3 วิธีในการทำให้สีของคุณสอดคล้องกันใน SVG

เมื่อคุณสร้าง SVG ใน Illustrator คุณจะมีตัวเลือกสองสามอย่างในการปรับสีให้สอดคล้องกัน ทางเลือกหนึ่งคือการใช้จานสีเดียวกันตลอดงานออกแบบของคุณ สามารถทำได้โดยเลือกสีที่คุณต้องการใช้ในเมนู "แก้ไขสี" จากนั้นคลิกที่ปุ่ม "สร้างกลุ่มสีใหม่" อีกทางเลือกหนึ่งคือการใช้คุณสมบัติ "Global Colours" วิธีนี้ทำให้คุณสามารถกำหนดสีได้เพียงครั้งเดียว แล้วนำไปใช้ตลอดงานออกแบบของคุณ หากต้องการสร้างสีส่วนกลาง เลือกเมนู "แก้ไขสี" แล้วคลิกปุ่ม "สร้างสีส่วนกลางใหม่" สุดท้าย คุณสามารถใช้คุณสมบัติ "สืบทอดสี" สิ่งนี้จะทำให้สีของคุณสอดคล้องกันระหว่างวัตถุต่างๆ หากต้องการใช้คุณสมบัตินี้ เลือกเมนู "แก้ไขสี" แล้วคลิกที่ปุ่ม "สืบทอดสี"

มีแบบอักษร OpenType ที่น่าสนใจอยู่ในรูปแบบของ แบบอักษร SVG Adobe Illustrator, Photoshop และ Affinity Designer เป็นหนึ่งในโปรแกรมที่ใช้งาน สี ลวดลาย หรือแผ่นใสสามารถพบได้ในสัญลักษณ์หรืออักขระ ส่วนที่เหลือของบทช่วยสอนนี้จะดำเนินการด้วยฟอนต์ SVG แบบธรรมดาที่เรียกว่า Ultrasound ในขั้นตอนที่ 1 คุณจะสร้างเลเยอร์โปร่งใส เพียงเลือกข้อความของคุณ จากนั้นเริ่มใช้ฟังก์ชัน Rasterize ขั้นตอนต่อไปคือการเปลี่ยนสีของข้อความ เมื่อใช้ฟอนต์ SVG คุณจะไม่สามารถเปลี่ยนการเติมฟอนต์ได้ ในบทเรียนนี้ เราจะแสดงวิธีเปลี่ยนสีข้อความโดยใช้ฟอนต์ Illustrator ในรูปแบบ SVG

เมื่อกรอก fill=”currentColor” คุณสามารถเลือก “สี”

ไฟล์ Svg สามารถมีสีได้หรือไม่?

กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้หรือ SVG สามารถกำหนดได้โดยใช้ไฟล์ XML เป็นผลให้สามารถเปิดได้ด้วยโปรแกรมแก้ไขข้อความและ รหัสสี ที่กำหนดสีของข้อความสามารถเปลี่ยนแปลงได้ ในการเริ่มต้น สิ่งสำคัญคือต้องเข้าใจค่าฐานสิบหกของสี

กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ (SVG) เป็นภาษา XML ที่เปิดใช้งานการผลิตกราฟิกสองมิติและสัญญาณผสม นอกจากสี พื้นผิว แรเงา และสร้างจากเลเยอร์ที่ทับซ้อนกันบางส่วนแล้ว คุณยังสามารถกำหนดสี พื้นผิว แรเงา และสร้างจากเลเยอร์เหล่านี้ได้อีกด้วย หนึ่งในงานที่เกี่ยวข้องกับการวาดภาพคือการเติมและการลากเส้น บทความนี้กล่าวถึงรายละเอียดเพิ่มเติมเกี่ยวกับวิธีการเปลี่ยนสีไฟล์ sva ด้วยตัวเลือกที่หลากหลาย สไตล์ = ความกว้างของเส้นขีด: 2, เส้นขีด: สีเขียว; fill=ff0000 เป็นไวยากรณ์สำหรับการระบุ สี SVG มีชื่อสีทั้งหมด 147 ชื่อที่ระบุในข้อกำหนด Scalable Vector Graphics (SVG) ตั้งชื่อสีที่ต้องการใช้ดังนี้

สตริงเติมมีเส้นขีดสีเขียวหรือเส้นเติมมีเส้นขีดเป็นสีแดง รหัสสีสำหรับสัญลักษณ์ hx คู่ฐานสิบหกจะได้รับค่าตั้งแต่ 0 ถึง FF # RRGGBB คือรหัสที่ปรากฏ สีเติมหมายถึงสีของวัตถุภายในรูปร่าง ในขณะที่เส้นขีดหมายถึงโครงร่างที่มองเห็นได้ของวัตถุ หากไม่ได้ระบุคุณสมบัติการเติม (หรือหากไม่ได้ระบุแอตทริบิวต์การเติม (หรือคุณสมบัติการเติมของแอตทริบิวต์ style)) สีเริ่มต้นจะเป็นสีดำ สีเติมและเส้นขีดพร้อมใช้งานสำหรับ รูปร่าง SVG เช่น วงกลม วงรี สี่เหลี่ยมผืนผ้า เส้นหลายเหลี่ยม และรูปหลายเหลี่ยม

แอตทริบิวต์เติมก่อให้เกิดสีของการตกแต่งภายในขององค์ประกอบกราฟิก การเติมจะทำให้เส้นทางที่เปิดอยู่ทั้งหมดเป็นสีราวกับว่ามันเชื่อมต่อกับเส้นทางแรก แม้ว่าสีเส้นขีดในส่วนนั้นจะมองไม่เห็นก็ตาม หากไม่ได้ระบุค่าแอตทริบิวต์การเติม สีของแอตทริบิวต์การเติมจะเป็นสีดำ

รูปแบบกราฟิกแบบเวกเตอร์ เช่น SVG ช่วยให้คุณสร้างกราฟิกที่มีรายละเอียดซึ่งสามารถปรับขนาดได้โดยไม่สูญเสียคุณภาพ หากคุณเป็น โปรแกรมเข้ารหัส SVG คุณอาจระบุสี CMYK ได้ (เช่น ไวยากรณ์เป็นดังนี้: circle fill=#CD853F device-cmyk(0.11, 0.48, 0.83, 0.00) ) อย่างไรก็ตาม นี่ไม่ใช่ปัญหาสำหรับซอฟต์แวร์การออกแบบส่วนใหญ่ คุณจะต้องส่งออกรูปภาพของคุณเป็นไฟล์ sva เพื่อที่จะใช้สีเหล่านี้ในการออกแบบของคุณ จากนั้นไปที่เมนู File แล้วเลือกเลเยอร์เวกเตอร์ เมื่อส่งออกภาพเลเยอร์ ไฟล์ส่งออกเวกเตอร์จะถูกสร้างขึ้นในรูปแบบ [VNG] เมื่อคุณมีไฟล์ SVG แล้ว ซอฟต์แวร์การออกแบบที่รองรับกราฟิกแบบเวกเตอร์จะสามารถสร้างงานออกแบบที่น่าทึ่งโดยใช้สี CMYK ของคุณได้

ทำไมสีของฉันถึงเปลี่ยนไปใน Illustrator?

มีเหตุผลบางประการที่สีของคุณอาจเปลี่ยนแปลงอยู่เสมอใน Illustrator เหตุผลหนึ่งอาจเป็นเพราะคุณตั้งค่า "การตั้งค่าสี" เป็น "ส่วนกลาง" แทนที่จะเป็น "เอกสาร" ซึ่งหมายความว่า การเปลี่ยนแปลงสี ใดๆ ที่คุณทำจะมีผลกับทั้งเอกสารของคุณ ไม่ใช่แค่วัตถุหรือเลเยอร์ที่คุณเลือก อีกสาเหตุหนึ่งอาจเป็นเพราะคุณตั้งค่า "โหมดสี" เป็น "RGB" แทน "CMYK" ซึ่งหมายความว่าสีของคุณจะถูกสร้างขึ้นโดยใช้แสงสีแดง สีเขียว และสีน้ำเงินผสมกัน แทนที่จะพิมพ์ด้วยหมึกสีฟ้า สีม่วงแดง สีเหลือง และสีดำ ซึ่งอาจทำให้สีของคุณดูแตกต่างออกไปเมื่อคุณพิมพ์ออกมา

เนื่องจากวิธีการผลิตการพิมพ์ CMYK มักจะเป็นกรณีนี้ เมื่อใช้สี RGB กับเอกสาร CMYK คุณอาจสังเกตเห็นว่าสีจางลง โดยทั่วไปสี RGB จะสดใสกว่าสี CMYK การเปลี่ยนโหมดสีของเอกสารจะคืนค่าสีเดิมเกือบทั้งหมด

วิธีแก้ไขไฟล์ Svg ใน Illustrator

หากต้องการแก้ไขไฟล์ svg ใน illustrator ให้เปิดไฟล์ใน illustrator ก่อน จากนั้นใช้เครื่องมือปากกาเพื่อติดตามภาพ สุดท้าย ใช้เครื่องมือการเลือกโดยตรงเพื่อเลือกจุดที่คุณต้องการแก้ไข

แบบอักษร Svg สี

OpenType-SVG (ออกเสียงว่า “สไมล์”) เป็นรูปแบบตัวอักษรที่ร่ายมนตร์ทั้งหมดหรือส่วนใหญ่แสดงเป็น HTML (กราฟิกเดสก์ท็อป) ตัวอย่างเช่น สัญลักษณ์เดียวสามารถแสดงผลหลายสีและเอฟเฟกต์การไล่ระดับสี ฟอนต์ OpenType-SVG เรียกอีกอย่างว่า " ฟอนต์สี " เนื่องจากคุณสมบัติมากมาย

Glyphs ซึ่งเป็นโปรแกรมแก้ไขฟอนต์ OpenType ไม่สามารถสร้างฟอนต์ SVG ที่คล้ายกับฟอนต์เหล่านี้ได้ ข้อมูลสามารถนำไปใช้กับแบบอักษรโดยใช้หนึ่งในสามวิธี หากคุณมีกราฟิกในไฟล์แยกต่างหาก คุณสามารถวางไว้ในร่ายมนตร์ที่เกี่ยวข้องและส่งออกเป็นรูปแบบ SVG คุณสามารถใช้วิธีนี้เพื่อใช้ประโยชน์จากความสามารถของรูปแบบไฟล์ SVG ได้อย่างเต็มที่ หากคุณยังไม่มีไฟล์ OpenType-SVG เราจะแสดงวิธีหมุนวงกลมสีแดงสำหรับตัวพิมพ์ใหญ่ O โดยใช้เลเยอร์เลเยอร์เพื่อเลเยอร์มาสเตอร์เลเยอร์ ซึ่งเป็นเลเยอร์ที่มีข้อความเป็นตัวหนาในเลเยอร์เลเยอร์ . ในทางกลับกัน เลเยอร์ svg ใหม่ ช่วยให้คุณสามารถลากและวางไฟล์ภาพได้ทันที ไม่มีภาพเคลื่อนไหว แต่คุณสามารถปรับขนาดและสีของภาพได้

ด้วย Glyphs คุณสามารถใช้ฟอนต์สีที่มีอยู่แล้วแปลงเป็น SVG ในรูปแบบต่างๆ ตรวจสอบให้แน่ใจว่าคุณได้กำหนดค่าเลเยอร์จานสีในโฟลเดอร์ไฟล์ เลเยอร์ข้อมูลฟอนต์ และเลเยอร์จานสีในร่ายมนตร์ คำว่า "เลเยอร์สี" ใช้ในร่ายมนตร์สองวิธี: หมายถึงเลเยอร์ CPAL/COLR หรือเลเยอร์สีดั้งเดิมเช่น Microsoft ด้วย DrawBot ตอนนี้คุณสามารถนำเข้าและส่งออก SVG จากภายใน Glyphs ส่งออกอินสแตนซ์จากไฟล์ (ลิงก์) สิ่งสำคัญคือต้องสังเกตว่าสีเหล่านี้ใช้เพื่อระบุว่าตารางสีใดถูกสร้างขึ้น และสีใดไม่มี และสีใดที่ไม่ปรากฏในฟอนต์ OpenType นอกจากนี้ยังสามารถเข้าถึงได้ผ่านเบราว์เซอร์เช่น Firefox และ Microsoft Edge ฟีเจอร์ที่แอพหรือระบบรองรับนั้นไม่เหมือนกับฟีเจอร์ที่ไม่ได้รับการสนับสนุนเสมอไป คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ SVG ได้โดยการเรียกดูข้อมูลจำเพาะและโค้ดตัวอย่าง

แบบอักษร Svg ไม่รองรับในทุกเบราว์เซอร์

เมื่อคุณเปิด SVG ในเบราว์เซอร์ที่ไม่ได้ติดตั้งฟอนต์ไว้ SVG จะถูกแปลงโดยอัตโนมัติ หากข้อความถูกตั้งค่าเป็นแบบอักษรที่เบราว์เซอร์ยังไม่รองรับ อาจทำให้เกิดปัญหานี้ได้
หากข้อความถูกตั้งค่าเป็นแบบอักษรที่เบราว์เซอร์ไม่รองรับ sva จะถูกใช้แทนที่
ปัจจุบัน แบบอักษร SVG มีให้บริการในเบราว์เซอร์ Safari และ Android เท่านั้น Firefox ยกเลิกการใช้ฟังก์ชันนี้อย่างไม่มีกำหนดซึ่งเป็นส่วนหนึ่งของความพยายามในการมุ่งเน้นไปที่ WOFF และ Chrome 38 (และ Opera 25) ก็ได้ลบออกเช่นกัน เครื่องมืออื่นๆ เช่น Batik และ Inkscape สามารถฝังแบบอักษรได้