ลดจำนวนสีใน SVG อย่างไรโดยไม่ทำให้งานเสีย

หากต้องการลดสีใน SVG อย่างปลอดภัย ให้จัดกลุ่มสีตามหน้าที่ในงาน แล้วรวมสีที่เกือบซ้ำภายในแต่ละกลุ่ม เก็บสีที่มีความหมายต่างกันแยกไว้ เช่น ไฮไลต์กับเงา ส่วนหน้ากับพื้นหลัง หรือการตัดกับการทำรอยพับ

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

ลดชุดสีอย่างปลอดภัยหนึ่งรอบ

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

การเปลี่ยนสีและการลดสีเป็นคนละงาน

การเปลี่ยนสีคือแทนค่าหนึ่งด้วยอีกค่า หากโลโก้น้ำเงินกลายเป็นเขียวแต่ยังใช้สีเติมจำนวนเท่าเดิม ขนาดชุดสีก็ไม่ได้เปลี่ยน

การลดสีคือรวมหลายค่าให้เหลือน้อยค่า งานลากเส้นอาจมี #173f75, #184076 และ #194177 เพราะพิกเซลลบรอยหยักกลายเป็นบริเวณแยก การแมปทั้งสามเป็นน้ำเงินเดียวลดทั้งชุดสี และหลังจัดรูปทรงให้เรียบร้อยก็ลดจำนวนชิ้นย่อยที่ต้องจัดการด้วย

สิ่งเหล่านี้เกิดร่วมกันได้แต่ใช้แทนกันไม่ได้ คู่มือเปลี่ยนสี SVG ครอบคลุมการแทนสีโดยตรง บทความนี้เน้นตัดสินว่าสีใดรวมเป็นหนึ่งได้

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

ก่อนอื่น หาสีที่ไฟล์ใช้จริง

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

นับมากกว่ารหัสสีฐานสิบหก:

• สีเติมทึบบนรูปทรง
• สีเส้นขอบ
• จุดสีในการไล่สี
• ความทึบที่ทำให้สีหนึ่งดูอ่อนลงบนพื้นหลัง
• สไตล์ที่เก็บในคลาสแทนการกำหนดตรงบนรูป
• ภาพราสเตอร์ฝัง ซึ่งสีพิกเซลไม่ได้เป็นชุดสี SVG

รหัสสีสิบค่าในรายการไม่ได้หมายถึงสีที่เห็นสิบสีเสมอไป รหัสเดียวกันที่ความทึบต่างกันดูต่างกันได้ การไล่สีอาจมีเพียงสองจุดสีแต่เรนเดอร์โทนระหว่างกลางมากมาย ราสเตอร์ <image> แสดงสีหลายพันสีได้ ขณะที่ SVG รอบภาพมีสีเติมเดียว ข้อกำหนดการลงสี SVG แยกสีทึบ การไล่สี ลวดลาย ความทึบสีเติมและเส้นขอบ กับพฤติกรรมลงสีอื่น

หากไฟล์เป็นภาชนะห่อราสเตอร์แทนรูปทรงที่แก้ไขได้ ต้องลดสีก่อนหรือระหว่างการลากเส้นใหม่ การตรวจ SVG ที่ดูเป็นพิกเซล บอกได้ว่ามีพาธจริงให้แก้หรือไม่

ตั้งชื่อสีตามบทบาท

ก่อนเปลี่ยนค่า ให้ทำแผนที่ชุดสีเล็ก ๆ:

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

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

สำหรับไฟล์ตัด บทบาทอาจหมายถึงหน้าที่จริง ใน Cricut Design Space SVG ที่นำเข้าคงเลเยอร์แยกไว้ และ ตัวควบคุม Operation กำหนดพฤติกรรม เช่น Basic Cut, Draw, Score และ Engrave ให้เลเยอร์ที่เลือก ในขั้นตอนเลเซอร์หรือ CNC อื่น สีอาจใช้จัดการทำงานด้วย อย่ารวมเลเยอร์ที่มีหน้าที่การทำงานเพียงเพราะสีดูใกล้กันบนหน้าจอ

รวมสีใกล้กันในโปรแกรมเวกเตอร์

เริ่มจากคู่ที่เสี่ยงน้อยที่สุดไปยังคู่ที่เห็นเด่นที่สุด

1. ทำสำเนาไฟล์หรืออาร์ตบอร์ด
2. เลือกสีที่พิจารณาหนึ่งสีด้วย Select Same Fill หรือคำสั่งเทียบเท่า
3. แทนด้วยสีข้างเคียงในชุดสีชั่วคราว
4. ตรวจส่วนเล็ก จุดตัด และพื้นที่ว่างที่ขนาดดูปกติ
5. สลับดูสำเนาเดิมกับสำเนาลดสี
6. เก็บการรวมไว้เฉพาะเมื่อลำดับความสำคัญของรูปทรงและความหมายการผลิตยังอยู่
7. ทำซ้ำกับคู่ถัดไป

เมื่อสีตรงกัน รูปทรงติดกันไม่ได้กลายเป็นพาธเดียวอัตโนมัติ รวมรูปเฉพาะเมื่อควรเป็นรูปเดียวสำหรับแก้ไขหรือตัด วัตถุสองชิ้นมีสีเติมเดียวกันได้โดยยังแยกไว้สำหรับแอนิเมชัน การจัดวาง หรือแก้ไข

คุณภาพโหนดและชิ้นย่อยก็สำคัญตรงนี้ หากสีน้ำเงินที่มองเห็นหนึ่งสีแตกเป็นชิ้นบางหลายร้อยชิ้น การเลือกตามสีเติมช่วยได้ แต่ไฟล์ยังอาจแก้ยาก งานลากเส้นที่สะอาดกว่าอาจเร็วกว่าซ่อมทุกชิ้น

การจัดกลุ่มอัตโนมัติทำอะไรได้และไม่ได้

เครื่องมือชุดสีมักจัดกลุ่มตามระยะห่างเชิงตัวเลข K-means และวิธีคล้ายกันเปลี่ยนรายการค่าสีใกล้กันยาว ๆ เป็นสีตัวแทนตามจำนวนที่เลือกได้ มีประโยชน์กับภาพประกอบที่สร้างจากราสเตอร์มีสัญญาณรบกวน

การจัดกลุ่มอัตโนมัติไม่รู้ว่า:

• ส่วนใดคือใบหน้า ตัวอักษร ช่อง หรือเส้นขอบ;
• สีใดระบุการทำงานของเครื่อง;
• สีเน้นเล็ก ๆ มีความหมายต่อแบรนด์หรือไม่;
• ความโปร่งใสบนพื้นหลังสร้างสีที่เห็นหรือไม่;
• รูปสองชิ้นต้องยังแก้แยกกันหรือไม่

ใช้ผลลัพธ์เป็นร่าง เปรียบเทียบที่ขนาดผลลัพธ์สุดท้าย ไม่ใช่เฉพาะตอนซูม การรวมที่ดูไม่กระทบเมื่อซูม 800% อาจลบตาเล็กหรือช่องตัวอักษรเมื่อมีขนาดสติกเกอร์

เมื่อใดการแปลงเป็นราสเตอร์แล้วลากเส้นใหม่จึงสมเหตุสมผล

การส่งออก SVG เป็น PNG ลดชุดสีราสเตอร์ แล้วลากเส้นใหม่เป็นการเริ่มใหม่ที่ทำลายโครงสร้าง มันทำให้กลุ่ม ชื่อ สัญลักษณ์ใช้ซ้ำ โครงสร้างข้อความ และพาธที่วางอย่างละเอียดกลายเป็นพิกเซลก่อนสร้างกลับขึ้น

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

อย่าแปลง SVG ที่สะอาดและจัดระเบียบดีเป็นราสเตอร์เพียงเพื่อเปลี่ยนสีเติมสี่สี การแก้เวกเตอร์โดยตรงเก็บข้อมูลไว้มากกว่า

ตรวจไฟล์ที่ลดสีแล้ว

ตรวจสิ่งเหล่านี้ก่อนบันทึกทับอะไร:

• ดูบนพื้นหลังทั้งสว่างและมืด
• ตรวจภาพเงาและพื้นที่ว่าง
• ยืนยันว่าเส้นขอบไม่กลืนหายไปกับสีเติม
• ตรวจการไล่สีและความทึบแยกจากสีทึบ
• นับเลเยอร์ Cricut หรือการทำงานผลิตสุดท้าย
• ดูข้อความเล็กและไอคอนที่ขนาดผลลัพธ์จริง
• เปิด SVG ที่ส่งออกใหม่ในโปรแกรมดูอีกตัว

หากไฟล์ใช้กับ Cricut ขั้นตอน SVG หลายเลเยอร์ อธิบายว่าสีแมปไปสู่วัสดุและการประกอบอย่างไร คู่มืองานลอกเศษยาก ครอบคลุมปัญหารูปทรงที่ลดสีอย่างเดียวแก้ไม่ได้

PerfectVector เหมาะกับส่วนใด

PerfectVector ไม่ได้แก้ SVG ที่มีอยู่ แต่ช่วยเมื่อจำนวนสีเพิ่มมากจากภาพราสเตอร์ ขั้นตอน SVG สำหรับ Cricut แปลงต้นฉบับเป็นพาธที่แก้ไขได้ และให้ตรวจพร้อมปรับบริเวณสีที่ลากเส้นก่อนดาวน์โหลด

ใช้วิธีนี้เมื่อ PNG หรือ JPG ทำให้เกิดสีใกล้กันหลายสิบสีและเลเยอร์แตกย่อยในเครื่องมือแปลงอื่น เริ่มจากราสเตอร์สะอาดที่สุดที่มี ลบเงาหรือความแปรผันพื้นหลังที่ไม่ต้องการ แล้วเทียบตัวอย่างเวกเตอร์ รวมสีตามเลเยอร์วัสดุที่วางแผนจะตัดจริง

เป้าหมายไม่จำเป็นต้องเป็นจำนวนสีน้อยที่สุดเสมอไป แต่เป็นชุดสีเล็กที่สุดที่ยังสื่อแบบและแผนผลิตได้

คำถามที่พบบ่อย

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

เปลี่ยนสีเติมสองสีให้เป็นรหัสเดียวกันจะรวมเลเยอร์ SVG ไหม? ไม่จำเป็น รูปทรงมีสีเดียวกันแล้วแต่ยังเป็นวัตถุแยกจนกว่าจะรวมรูปทรง การแยกไว้อาจมีประโยชน์ต่อการแก้ไข แอนิเมชัน หรือจัดวาง แม้จะตัดจากวัสดุเดียวกัน

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

ทำไมลากเส้นจากภาพสี่สีแล้วได้หลายสิบสี? ราสเตอร์น่าจะมีการลบรอยหยัก เงา ความแปรผันจากการบีบอัด หรือขอบนุ่ม เครื่องมือลากเส้นมองความต่างพิกเซลเหล่านั้นเป็นบริเวณแยก ทำความสะอาดราสเตอร์เฉพาะจุดหรือรวมสีใกล้กันในผลลัพธ์เวกเตอร์

ควรลดสี SVG ก่อนอัปโหลดเข้า Cricut ไหม? โดยทั่วไปควร เมื่อหลายสีเป็นสีเกือบซ้ำที่ไม่ตั้งใจ วางแผนหนึ่งสีที่มีความหมายต่อวัสดุหรือเลเยอร์ เก็บสิ่งที่ควรตัดแยกไว้ และตรวจจำนวนเลเยอร์หลังนำเข้า เลเยอร์น้อยที่กำหนดอย่างตั้งใจตัดและประกอบง่ายกว่างานลากเส้นที่เต็มไปด้วยความต่างสีเล็ก ๆ

แหล่งอ้างอิง

1. W3C — การลงสี SVG 2 — กำหนดสีเติม เส้นขอบ ไล่สี ลวดลาย และความทึบของสี
2. Adobe Illustrator — เลือกวัตถุที่มีสีเติมและเส้นขอบเดียวกัน — อธิบายขั้นตอนเลือกตามลักษณะที่ใช้ได้จริง
3. Cricut — อัปโหลดภาพเข้า Design Space — อธิบายการคงเลเยอร์ SVG เมื่ออัปโหลด
4. Cricut — เลือก Operation — กำหนดการทำงานเครื่องที่มอบหมายให้เลเยอร์ Design Space

---

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