SVG มีโหนดมากเกินไป? เก็บงานลากเส้นอัตโนมัติ

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

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

522 โหนด เทียบกับ 59 โหนด

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

“โหนดมากเกินไป” หมายถึงอะไรจริง ๆ

พาธ SVG อธิบายด้วยคำสั่งและพิกัดที่สร้างส่วนเส้นตรงและเส้นโค้ง โปรแกรมแก้ไขแสดงพิกัดที่เกี่ยวข้องเป็นจุดยึด (หรือโหนด) พร้อมแขนบอกทิศทางสำหรับเส้นโค้ง Bézier จุดยึดไม่กี่จุดที่วางดีสามารถอธิบายเส้นโค้งยาวเรียบได้ ดูข้อกำหนดพาธ SVG ของ W3C หากมีมุมที่ไม่ต้องการเพียงจุดเดียวบนส่วนโค้งที่ควรเรียบ คู่มือซ่อมรอยต่อ Bézier แสดงวิธีจัดแนวแขนโดยคงจุดยึดไว้ที่เดิม

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

คุณน่าจะกำลังพบภาวะโหนดเกิน หาก:

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

ทำไมเครื่องมือลากเส้นอัตโนมัติจึงเพิ่มโหนดมาก

เครื่องมือลากเส้นดั้งเดิมหาแนวขอบหรือแนวกึ่งกลางจากราสเตอร์ แล้วประมาณด้วยเส้นโค้งเวกเตอร์ Adobe มี Image Trace พร้อมตัวควบคุมอย่าง Paths, Corners และ Noise ส่วน Potrace อธิบายอัลกอริทึมประมาณเส้นโค้งโดยใช้รูปหลายเหลี่ยมสำหรับขอบบิตแมป (ตัวเลือก Adobe Image Trace; บทความ Potrace)

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

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

<!-- Auto-traced: one ear tuft, 40+ points -->
<path d="M312.4,98.1 C313.0,97.8 313.9,97.2 314.6,96.9 C315.2,96.7
316.1,96.4 316.8,96.2 C317.4,96.0 318.3,95.7 319.0,95.5 ...(many more) Z"/>
 
<!-- Clean: the same tuft, 6 points -->
<path d="M312,98 C320,70 360,68 372,96 C378,112 340,140 312,98 Z"/>

เส้นโค้งเดียวกัน แบบหนึ่งถอดทุกพิกเซล อีกแบบอธิบายรูปทรง

เหตุที่ทำให้งานช้าลง

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

ในเครื่องมือออกแบบ

ใน Illustrator หรือ Figma จุดยึดที่เพิ่มแต่ละจุดคือสิ่งที่คุณต้องเลือกหลบ ระวัง หรือเก็บงานก่อนเปลี่ยนจริง การปรับเส้นโค้งสะอาดใช้หนึ่งหรือสองจุด แต่เส้นที่ถอดจากพิกเซลต้องจัดการทั้งกลุ่ม และรักษาความเรียบได้ยาก

เลือกใน Illustrator

บนเครื่องตัด

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

หาก Cricut ปฏิเสธไฟล์อัปโหลด ให้วินิจฉัยข้อผิดพลาด File Too Large จำนวนพาธและขนาดไฟล์ต่างจากจำนวนโหนด

วิธีได้โหนดที่สะอาด

มีทางออกสามแบบ เรียงคร่าว ๆ ตามระดับที่ช่วยลดงานยุ่งยาก:

1. ลดความซับซ้อนภายหลัง คำสั่ง Object → Path → Simplify ของ Illustrator ลดจุดยึดได้ Adobe มีตัวควบคุมสมดุลระหว่างการลดความซับซ้อนกับความแม่นยำของเส้นโค้งและการรักษามุม จึงควรดูตัวอย่างแทนการคิดว่าจะไม่สูญเสียอะไร ดูเอกสาร Simplify ของ Adobe
2. ลดรายละเอียดการลากเส้น เครื่องมือส่วนใหญ่ลดความซับซ้อนได้ แต่เป็นวิธีที่ไม่เจาะจง เมื่อลดมากพอให้โหนดน้อยลง ก็เริ่มเสียรายละเอียดที่ต้องการ
3. เริ่มให้สะอาด วิธีแก้ต้นเหตุคือแปลงด้วยเครื่องมือที่สร้างพาธสะอาดตั้งแต่แรก จึงไม่มีอะไรต้องเก็บงาน

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

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

สำหรับส่งขึ้นเว็บ ทำตามคู่มือปรับ SVG ด้วย SVGO หลังรูปทรงถูกต้องแล้ว คู่มือนี้ทดสอบการเปลี่ยนขนาดไฟล์และสไตล์ที่อาศัย ID แยกกัน SVG ที่เล็กกว่าไม่ใช่หลักฐานว่าพาธที่แก้ไขได้หรือพฤติกรรมหน้าเว็บยังตรงความต้องการ

235 โหนด เทียบกับ 76 โหนด

หากการส่งออกถัดไปเป็น DXF ให้ตรวจความหนาแน่นของส่วนเส้นในขั้นตอน CNC เป็นอีกประเด็นในการส่งต่อไฟล์

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

ลองใช้งาน

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

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

SVG ควรมีโหนดกี่จุด? ไม่มีเป้าหมายเดียวสำหรับทุกกรณี จำนวนที่เหมาะคือจุดน้อยที่สุดที่ยังรักษารูปทรงและรายละเอียดที่จำเป็น สำหรับนกฮูกที่แสดงในบทความนี้เท่านั้น ผลลากเส้นที่นำมาเทียบมี 522 โหนด ส่วน PerfectVector มี 59 โหนด ให้มองเป็นตัวอย่างที่ทำซ้ำได้ ไม่ใช่ค่าเฉลี่ยของทุกเครื่องมือหรือทุกภาพ

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

ลดจำนวนโหนดใน SVG อย่างไร? มีสามวิธี เรียงคร่าว ๆ ตามระดับที่ช่วยลดงานยุ่งยาก ลดความซับซ้อนพาธภายหลัง (Object → Path → Simplify ของ Illustrator) ซึ่งสูญเสียข้อมูลได้ ลดการตั้งค่ารายละเอียดการลากเส้น ซึ่งเป็นวิธีไม่เจาะจงและเสียรายละเอียดที่ต้องการด้วย หรือแปลงใหม่ด้วยเครื่องมือที่วางจุดสะอาดตั้งแต่ต้น จึงไม่มีอะไรต้องลบ

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

แหล่งข้อมูล

1. W3C — พาธ SVG — นิยามเชิงบรรทัดฐานของคำสั่งพาธ SVG พิกัด และส่วนเส้นโค้ง
2. Adobe Illustrator — ตัวเลือกแผง Image Trace — ตัวควบคุมการแนบพาธ มุม นอยส์ สี และความซับซ้อนของการลากเส้นอย่างเป็นทางการ
3. Adobe Illustrator — ลดความซับซ้อนพาธอัตโนมัติ — ขั้นตอนลดความซับซ้อนและตัวควบคุมความแม่นยำเทียบกับจำนวนจุดอย่างเป็นทางการ
4. Selinger — Potrace: อัลกอริทึมลากเส้นโดยใช้รูปหลายเหลี่ยม — คำอธิบายทางเทคนิคต้นทางของการประมาณขอบและเส้นโค้งในเครื่องมือลากเส้นดั้งเดิม
5. Cricut — การอัปโหลดภาพ: รายการที่ไม่รองรับ — รายการโครงสร้าง SVG อย่างเป็นทางการที่อาจขัดขวางหรือเปลี่ยนการอัปโหลดเข้า Design Space