PerfectVector
โดย Irene Kimอ่าน 4 นาที

ประเมินคุณภาพการแปลงเวกเตอร์อย่างไร: เกณฑ์ให้คะแนน

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

ในหน้านี้

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

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

คะแนนคุณภาพการแปลง 12 คะแนน
  • 2 คะแนน: พร้อมสำหรับงานที่ตั้งใจ
  • 1 คะแนน: ใช้ได้หลังแก้เฉพาะจุด
  • 0 คะแนน: ผิด เสีย หรือไม่เหมาะปลายทาง

รวม 10–12 เป็นไฟล์เริ่มต้นที่ดี 7–9 ต้องวางแผนแก้ 6 หรือต่ำกว่ามักต้องแปลงใหม่หรือวาดใหม่ คะแนนศูนย์ในความตรงขอบ พื้นที่ว่าง หรือทดสอบปลายทางข้อใดข้อหนึ่งมีผลเหนือคะแนนรวม

เกณฑ์คุณภาพการแปลงเวกเตอร์หกส่วน

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

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

เตรียมการตรวจต้นทางกับผลแปลงอย่างยุติธรรม

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

จากนั้นใช้ขั้นตอนนี้:

  1. เก็บแรสเตอร์ต้นฉบับไม่แตะข้าง SVG ที่แปลง
  2. วางผลแปลงทับต้นทางและจัดขอบเขตตรง ลดความทึบผลหรือสลับการมองเห็นเพื่อเห็นขอบรูปคลาดง่าย
  3. ตรวจที่ขนาดผลลัพธ์ตั้งใจหนึ่งครั้ง แล้วซูมพอเห็นมุม ช่อง ส่วนซ้อน และพฤติกรรมโค้ง
  4. เปลี่ยนมุมมองเส้นขอบหรือโหนด บันทึกพาธแน่น ขอบเปิด และเศษที่ตัวอย่างเติมสีซ่อน
  5. ให้คะแนนหกข้อและเพิ่มประโยคหลักฐานหนึ่งประโยคทุกคะแนนต่ำกว่า 2
  6. เปิด SVG ในปลายทางจริงแล้วทำงานถัดไป เช่น เปลี่ยนสีรูปทรง ปรับขนาดไอคอน นำเข้าโลโก้ หรือดูตัวอย่างการตัด

เมื่อเทียบเครื่องมือ คงต้นทาง ปลายทาง และระดับรายละเอียดที่ยอมรับ ผลแปลงละเอียดมากมักต้องรูปทรงมากกว่าไอคอนลดรายละเอียด เทียบจำนวนโหนดโดยไม่คงความตรงให้เท่ากันจะให้รางวัลผลผิด

1. ความตรงของขอบ: ผลแปลงเก็บขอบที่ตั้งใจหรือไม่?

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

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

อย่าเรียกร้องให้เวกเตอร์ตามทุกพิกเซลต้นทาง ขอบแรสเตอร์มีความนุ่มและความต่างพิกเซลเล็กที่ไม่ใช่รูปทรงตั้งใจได้ เอกสาร Image Trace ของ Adobe เปิดให้เห็นข้อแลกเปลี่ยนนี้ตรง ๆ: ตัวควบคุม Paths เปลี่ยนความแน่นในการตามรูปพิกเซล ขณะที่ Corners และ Noise เปลี่ยนการตีความโค้งและบริเวณเล็ก ดูตัวเลือก Image Trace ปัจจุบันของ Adobe

2. พื้นที่ว่าง: รูและช่องยังเปิดหรือไม่?

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

ให้ 2 เมื่อช่องที่ตั้งใจทุกช่องอยู่ครบ ให้ 1 เมื่อมีช่องแต่หนึ่งหรือสองต้องปรับรูป ให้ 0 เมื่อช่องปิด หาย หรือรวมสองส่วนที่ต้องแยก

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

3. การจับคู่สี: ผลแปลงสร้างบริเวณที่มีประโยชน์หรือไม่?

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

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

จำนวนสีอย่างเดียวไม่ใช่คะแนน สีมากอาจเก็บภาพมีเงา สีต่ำอาจเหมาะเครื่องหมายแบน แผง Adobe แสดงข้อแลกเปลี่ยนพื้นฐานเดียวกันด้วยการเปลี่ยนจำนวนและขนาดบริเวณสี และรายงาน Paths, Anchors และ Colors แยกกัน การแยกนี้เป็นแบบอย่างมีประโยชน์ต่อการตรวจ: ความตรงกับความซับซ้อนเกี่ยวข้อง แต่ไม่ใช่คะแนนเดียวกัน

4. ประสิทธิภาพโหนด: พาธเรียบง่ายกว่าสัญญาณรบกวนระดับพิกเซลหรือไม่?

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

ไม่มีจำนวนโหนดดีสากล ตัดสินประสิทธิภาพเทียบรูปและความตรงที่ต้องการ:

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

ให้ 2 เมื่อรูปทรงประหยัดและเสถียร ให้ 1 เมื่อแน่นเพียงไม่กี่บริเวณ ให้ 0 เมื่อจุดแน่นทั่วหรือพาธสั่นให้เห็น Auto-Simplify ของ Illustrator ลบจุดไม่จำเป็นและทำพาธเรียบได้ แต่ยังต้องตรวจภาพใหม่เพื่อไม่ให้ลบส่วนตั้งใจ Adobe อธิบายขั้นตอนจัดการนั้นที่นี่

หากเป็นความล้มเหลวหลัก ใช้คู่มือลึกกว่า วินิจฉัย SVG โหนดมากเกิน

5. การแก้ไขได้: เปลี่ยนส่วนที่คาดหวังได้หรือไม่?

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

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

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

6. ทดสอบปลายทาง: อยู่ครบในขั้นถัดไปหรือไม่?

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

ให้ 2 เมื่อทำงานตามต้องการ ให้ 1 เมื่อซ่อมตามบันทึกหนึ่งอย่างแล้วใช้ได้ ให้ 0 เมื่อ SVG ทำงานที่ตั้งใจไม่ได้

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

อ่านคะแนนรวมโดยไม่ซ่อนข้อบกพร่องร้ายแรง

ใช้ช่วงคะแนนคัดกรอง:

  • 10–12: ไฟล์เริ่มต้นดี บันทึกการแก้คะแนน 1 ที่เหลือก่อนส่ง
  • 7–9: ใช้ได้ต่อเมื่อการแก้ในรายการพอดีงบและกำหนดเวลาโครงการ
  • 0–6: แปลงซ้ำด้วยต้นทางหรือวิธีดีขึ้น หรือวาดรูปทรงสำคัญใหม่

ใช้กฎหยุดหลังรวมคะแนน ศูนย์ในความตรงขอบ พื้นที่ว่าง หรือทดสอบปลายทางหมายถึงไฟล์ยังไม่พร้อม แม้รวมได้ 10 งานสำคัญต่อแบรนด์อาจใช้กฎเข้มกว่า เช่น ต้องได้ 2 ทุกการตรวจรูปทรง

เกณฑ์แบ่งช่วงเป็นส่วนวิธีนี้ ไม่ใช่มาตรฐานอุตสาหกรรม ทีมเปลี่ยนได้แต่ควรเขียนกฎก่อนเทียบผล

ขั้นตอนนี้เมื่อใช้ PerfectVector

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

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

สำหรับกระบวนการเลือกเครื่องมือกว้างกว่า การเปรียบเทียบเครื่องมือ AI ปัจจุบัน ช่วยเลือกตัวทดลอง ขณะที่เกณฑ์นี้ให้การตรวจเดียวกันกับทุกผล

เมื่อแปลงใหม่ไม่แก้ปัญหา

เรียกตัวแปลงซ้ำไม่น่ากู้ข้อมูลที่ต้นทางไม่มี วาดใหม่หรือกลับต้นทางก่อนหน้าเมื่อ:

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

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

บันทึกตรวจแบบกะทัดรัด

บันทึกข้าง SVG เพื่อให้คนแก้คนอื่นทำการตัดสินใจซ้ำได้:

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

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

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

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

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

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

ควรรับคะแนนเท่าใด? วิธีนี้ถือ 10–12 เป็นไฟล์เริ่มต้นดี 7–9 ต้องวางแผนแก้ และ 6 หรือต่ำกว่ามักต้องแปลงซ้ำหรือวาดใหม่ ศูนย์ในความตรงขอบ พื้นที่ว่าง หรือทดสอบปลายทางข้อใดไม่ผ่านกฎหยุดไม่ว่ารวมเท่าใด

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

  1. Adobe — ตัวเลือกแผง Image Trace — ตัวควบคุมปัจจุบันสำหรับเทียบต้นทาง พาธ มุม สัญญาณรบกวน สี จุดยึด ความโปร่งใส และการขยายเป็นวัตถุ
  2. W3C — พาธ SVG 2 — นิยามมาตรฐานรูปทรงพาธ ท่อน โค้ง รูปปิด และพาธย่อยประกอบ
  3. Adobe — ลดความซับซ้อนพาธอัตโนมัติ — ขั้นตอนปัจจุบันลบจุดยึดไม่จำเป็นและทำพาธเรียบ

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

เพิ่มเติมจากบล็อก

เริ่มต้นด้วย SVG ที่เรียบร้อยขึ้น
และแก้ไขได้ง่ายกว่า