PerfectVector
โดย Irene Kim

VTracer PNG เป็น SVG: ตรวจสีและรายละเอียดเล็ก ๆ

แปลง PNG ด้วย VTracer CLI ที่ทดสอบแล้ว เปรียบเทียบการตั้งค่าจานสีและจุด และตรวจสอบว่าสีและขอบเขตเล็กๆ ใดยังคงอยู่ใน SVG ที่บันทึกไว้จริง

อ่าน 3 นาที
ในหน้านี้

สำหรับเวิร์กโฟลว์ PNG-to-SVG ของ VTracer ให้บันทึกการติดตามพื้นฐานก่อนที่จะลดสีหรือกรองพื้นที่ขนาดเล็ก จากนั้นเปลี่ยนการควบคุมทีละรายการ และตรวจสอบ SVG ที่บันทึกไว้แต่ละรายการ ในการทดสอบสีเรียบแบบเดิมของเรา ขีดจำกัดสีจะรวมบริเวณที่สำคัญเข้าด้วยกัน ในขณะที่ตัวกรองจุดสีที่แข็งแกร่งยิ่งขึ้นทำให้เครื่องหมายขนาดเล็กโดยเจตนาหายไป ไฟล์ที่เล็กที่สุดหรือจานสีที่สั้นที่สุดไม่ใช่ไฟล์ที่เก็บงานศิลปะที่เราตั้งใจไว้

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

ลองกับรูปภาพของคุณเอง
เปิดเครื่องมือฉบับเต็ม
ลองใช้ฟรี วางรูปภาพเพื่อดูตัวอย่างเวกเตอร์ของคุณได้เลย ไม่ต้องสมัครสมาชิก

จับคู่คำสั่งกับ CLI ที่ติดตั้ง

การฝึกปฏิบัตินี้ใช้ VTracer 1.0.0-alpha.4 CLI อย่างเป็นทางการ พร้อมด้วยความช่วยเหลือในการปฏิบัติการของตัวเอง รับไบนารีแพลตฟอร์มที่ตรงกันจากรุ่นอย่างเป็นทางการ ตัวอย่างจะถือว่าไฟล์ปฏิบัติการชื่อ vtracer ในโฟลเดอร์การทำงานของคุณ ข้างสำเนา PNG ที่ได้รับอนุญาตของคุณชื่อ artwork.png

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

./vtracer --version
./vtracer --help

คำสั่งเวอร์ชันของเราส่งคืน vtracer 1.0.0-alpha.4 หากความช่วยเหลือของคุณไม่แสดงแฟล็กด้านล่าง ให้ใช้เอกสารประกอบสำหรับอินเทอร์เฟซที่ติดตั้งของคุณ แพ็คเกจ Python เป็นอินเทอร์เฟซที่แยกจากกัน อาร์กิวเมนต์ของคีย์เวิร์ด Python และแฟล็ก CLI ไม่สามารถใช้แทนกันได้

เอกสารประกอบโครงการอย่างเป็นทางการ อธิบายการติดตามสี การควบคุมจานสี และ CLI บทความนี้ใช้ไฟล์ปฏิบัติการในเครื่องนั้น แทนที่จะรายงานการทดสอบการสาธิตเบราว์เซอร์หรือการผูก Python

1. บันทึกเส้นฐานที่เก็บข้อมูลเล็กๆ น้อยๆ โดยเจตนาไว้

เริ่มต้นด้วยการติดตามง่ายๆ ที่คุณสามารถเปรียบเทียบได้ในภายหลัง:

./vtracer artwork.png baseline.svg \
  --mode polygon --color-precision 8 --filter-speckle 0

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

ตัวเลือกที่มีชื่อทั้งสามจะตอบคำถามที่แตกต่างกัน:

ตัวเลือกมันควบคุมอะไร.สิ่งที่ต้องตรวจสอบ
--mode polygonโหมดการปรับให้พอดีที่เลือกรูปทรงที่ได้จะเหมาะกับแหล่งที่มาหรือไม่
--color-precision 8บิตที่สำคัญต่อช่อง RGBไม่ว่าสีที่ต้องการจะยังคงแยกแยะได้หรือไม่
--filter-speckle 0การตั้งค่าการกรองแพตช์ขนาดเล็กไม่ว่าต้องการให้เครื่องหมายเล็กๆ อยู่รอดจากเกณฑ์พื้นฐานหรือไม่

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

ภาพประกอบ
ตัวอย่างชุดสีแนวคิดและรูปทรงสีข้างแว่นขยายเพื่อดูรายละเอียดส่วนเน้นเล็กๆ น้อยๆ
ตรวจสอบสีที่ต้องการและรายละเอียดเล็กๆ น้อยๆ แยกกัน จากนั้นตรวจสอบทั้งสองอีกครั้งหลังการเปลี่ยนแปลงแต่ละครั้ง

2. เปรียบเทียบขีดจำกัดสีกับจานสีแบบตายตัว

CLI ที่ทดสอบจะเสนอ --max-colors สำหรับขีดจำกัดสีด้านบน และ --palette สำหรับสีฐานสิบหกที่ให้มา จานสีคือชุดสีที่คุณต้องการให้อาร์ตเวิร์กใช้ ตัดสินใจว่าสีใดจะต้องคงความแตกต่างก่อนที่จะขอให้ผู้ตามรอยลดขนาดลง

ตัวแปรนี้เก็บตัวเลือกพื้นฐานไว้คงที่และเพิ่มขีดจำกัดสีสามสี:

./vtracer artwork.png fewer-colors.svg \
  --mode polygon --color-precision 8 --filter-speckle 0 \
  --max-colors 3

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

เมื่อคุณมีจานสีที่ต้องการแล้ว ให้ทดสอบสีที่ให้มาแทน:

./vtracer artwork.png fixed-palette.svg \
  --mode polygon --color-precision 8 --filter-speckle 0 \
  --palette '#ffffff,#17324d,#298d83,#d49c32'

แหล่งทองคำของเราคือ #e7b64c; จานสีที่ให้มานี้ใช้ #d49c32 แทนที่ SVG ที่บันทึกไว้ได้ใช้ทองคำใหม่นั้นโดยยังคงรักษาสีกรมท่า นกเป็ดน้ำ และสีขาวไว้ นั่นเป็นตัวเลือกการเปลี่ยนสีโดยเจตนา ไม่ใช่การคงสีเดิมไว้ หากต้องการตัดสินใจในวงกว้างว่าสีใดสามารถรวมเข้าด้วยกันได้โดยไม่สูญเสียความหมาย ให้ใช้คำแนะนำในการลดจานสี SVG

3. ทดสอบการกรองพื้นที่ขนาดเล็กในสำเนาแยกต่างหาก

กลับไปที่ตัวเลือกพื้นฐาน จากนั้นเปลี่ยนเฉพาะตัวกรองจุด:

./vtracer artwork.png filtered.svg \
  --mode polygon --color-precision 8 --filter-speckle 8

จุดเป็นบริเวณเล็กๆ ที่แยกจากกันซึ่งอาจเป็นเสียงรบกวนที่ไม่พึงประสงค์หรือเป็นงานศิลปะโดยเจตนา ขนาดของมันเพียงอย่างเดียวไม่ได้บอกคุณว่าขนาดไหน ในอุปกรณ์ติดตั้งของเรา ทั้งเครื่องหมายกองทัพเรือ 2 × 2 และ 8 × 8 อันแยกออกมานั้นมองเห็นได้ในเส้นฐานและหายไปในตัวแปรที่ถูกกรองนี้

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

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

ไฟล์ที่บันทึกไว้จริงสี่ไฟล์แสดงให้เห็นอะไร

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

เอาท์พุตการเติมสีทึบที่ไม่ซ้ำใคร รวมถึงพื้นหลังด้วยขนาดเล็ก 2 × 2 และ 8 × 8 เครื่องหมายการสังเกตหลัก
baseline.svgสี่มองเห็นได้ทั้งสีทึบดั้งเดิมยังคงอยู่ในข้อมูลอ้างอิงการทดสอบนี้
fewer-colors.svgสองทั้งสองมองเห็นเป็นสีที่ผสานกันกองทัพเรือ/นกเป็ดน้ำรวมเข้าด้วยกัน แถบทองอ่านเป็นสีขาว
filtered.svgห้าก็ไม่สามารถมองเห็นได้สูญเสียเครื่องหมายเล็กน้อย แนะนำการเติมสีขาวใกล้
fixed-palette.svgสี่มองเห็นได้ทั้งทองเปลี่ยนเป็น #d49c32 ที่ให้มา

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

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

เลือกไฟล์ที่คุณสามารถอธิบายได้

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

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

ดัชนีชี้วัดคุณภาพการติดตามเพิ่มโครงร่าง การแก้ไขได้ และการตรวจสอบปลายทางนอกเหนือจากการทดสอบชุดสี/รายละเอียดนี้ สำหรับเวิร์กโฟลว์ขาวดำที่ชัดเจน คำแนะนำ Potrace PNG-to-SVG จะครอบคลุมงานการติดตามอื่น

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

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

VTracer สามารถแปลง PNG สีเป็นเส้นทาง SVG จริงได้หรือไม่

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

max-colors 3 รับประกันสามสีทุกประการหรือไม่

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

เหตุใดเครื่องหมายเล็กๆ จึงหายไปหลังจากการกรอง

การตั้งค่าจุดสามารถละทิ้งพื้นที่เล็กๆ เครื่องหมายสี่เหลี่ยมจัตุรัสทั้ง 2 เครื่องหมายในการอ้างอิงการทดสอบของเราหายไปที่จุดกรอง 8 เปรียบเทียบกับเส้นฐานที่มีตัวกรองต่ำ และลดการตั้งค่าลงหากงานศิลปะของคุณต้องการพื้นที่เหล่านั้น

ฉันสามารถวางแฟล็กเหล่านี้ลงในตัวอย่าง Python VTracer ได้หรือไม่

ใช้อินเทอร์เฟซและเวอร์ชันที่คุณติดตั้ง คู่มือนี้ทดสอบไฟล์ปฏิบัติการ 1.0.0-alpha.4 และวิธีใช้ CLI ตัวอย่างการผูก Python ใช้อาร์กิวเมนต์และเอกสารประกอบของฟังก์ชันของตัวเอง

แหล่งที่มา

  1. โครงการ VTracer อย่างเป็นทางการ — การติดตามสี การใช้ CLI และตัวเลือกจานสี/รายละเอียด
  2. VTracer 1.0.0-alpha.4 release — ไฟล์ปฏิบัติการที่ปักหมุดเวอร์ชันที่ใช้สำหรับเวิร์กโฟลว์นี้
  3. แพ็คเกจ VTracer Python — อินเทอร์เฟซการเชื่อมโยง Python ที่แยกจากกัน แตกต่างจาก CLI ที่ทดสอบแล้ว

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

PerfectVector

เปลี่ยนรูปภาพเป็น
เส้นพาธเวกเตอร์ที่เรียบร้อยและแก้ไขได้

แปลงเวกเตอร์และตรวจดูพรีวิวได้ฟรี ไม่จำกัดจำนวนครั้งต่อวัน