PerfectVector
โดย Irene Kim

Potrace PNG เป็น SVG: จัดการอัลฟาและเก็บช่องว่าง

แปลง PNG ด้วย Potrace หลังจากเตรียมช่องอัลฟ่า ปฏิบัติตามขั้นตอนการทำงานของ PGM ที่ทดสอบแล้ว เปรียบเทียบเกณฑ์ และตรวจสอบพื้นหลังของ SVG และรูด้านใน

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

หากต้องการแปลง PNG เป็น SVG ด้วย Potrace ให้เตรียมบิตแมประดับสีเทาก่อน จากนั้นจึงติดตามด้วย potrace --svg สำหรับงานศิลปะสีเข้มบนพิกเซลโปร่งใส ให้รวมภาพลงบนแผ่นสีขาวก่อนที่จะบันทึกบิตแมป ตรวจสอบรูปทรงธรณีประตูและช่องเปิดด้านในก่อนยอมรับ SVG

Standard Potrace 1.16 อ่าน PBM, PGM, PPM และ BMP แทน PNG โดยตรง คู่มืออย่างเป็นทางการของมันอธิบายการดำเนินการติดตามขาวดำ: เฉดสีกลางจะกลายเป็นสีดำหรือสีขาว ขั้นตอนการทำงานด้านล่างจะสร้างรูปทรงเรขาคณิตทึบโดยมีพื้นที่ว่าง แทนที่จะรักษาค่าอัลฟ่าต่อเนื่องของ PNG

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

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

สิ่งที่คุณต้องการก่อนการติดตาม

ใช้ไฟล์ปฏิบัติการ Potrace ที่ติดตั้งไว้, Python 3 พร้อม Pillow และ PNG ดั้งเดิม สูตรนี้ใช้กับ Potrace 1.16 และ Pillow 11.3.0 เก็บสำเนาอินพุตและทำงานในโฟลเดอร์แยกต่างหาก เพื่อให้ตัวแปรเกณฑ์แต่ละรายการมีชื่อไฟล์ที่แตกต่างกัน

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

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

1. แก้ไขความโปร่งใสก่อนบันทึกบิตแมป

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

สำหรับรอยดำ ให้วางภาพไว้บนสีขาวโดยเจตนา ตัวอย่าง Python นี้เปิด artwork.png แล้วรวมเข้ากับรูปภาพสีขาวที่มีขนาดเท่ากัน แปลงผลลัพธ์นั้นเป็นระดับสีเทา และบันทึก artwork.pgm:

from PIL import Image
 
src = Image.open("artwork.png").convert("RGBA")
matte = Image.new("RGBA", src.size, "white")
gray = Image.alpha_composite(matte, src).convert("L")
gray.save("artwork.pgm")

เอกสาร alpha_composite ของ Pillow กำหนดรูปภาพที่ 2 ว่ามีการรวมคอมโพสิตไว้เหนือรูปภาพแรก รูปภาพทั้งสองที่นี่มีขนาดที่ตรงกันและโหมด RGBA

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

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

2. ติดตาม PGM ที่เตรียมไว้

เรียกใช้สิ่งนี้ในโฟลเดอร์ที่มี artwork.pgm:

potrace artwork.pgm --svg --blacklevel 0.5 --turdsize 2 --output artwork.svg

--blacklevel 0.5 เลือกจุดตัดระดับสีเทา --turdsize 2 เก็บค่าการปราบปรามจุดเล็กเริ่มต้นของ Potrace ไว้อย่างชัดเจน ใช้ชื่อเอาต์พุตใหม่เมื่อคุณเปลี่ยนการตั้งค่า จากนั้นเปรียบเทียบไฟล์แทนที่จะเขียนทับข้อมูลอ้างอิงของคุณซ้ำๆ

เปลี่ยนการควบคุมทีละรายการ:

ควบคุมสิ่งที่จะทบทวน
--blacklevelไม่ว่ารอยจางๆ จะกลายเป็นเบื้องหน้าและช่องแคบๆ ยังคงว่างเปล่าหรือไม่
--turdsizeไม่ว่ารูปทรงแยกเล็กๆ น้อยๆ จะเป็นเสียงรบกวนหรือรายละเอียดโดยเจตนา
--alphamaxการรักษามุม; แม้จะมีชื่อ แต่นี่ไม่ใช่การควบคุมความทึบ

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

สิ่งที่ภาพทดสอบต้นฉบับทั้งสองแสดงให้เห็น

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

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

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

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

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

3. ตรวจสอบรูและพื้นหลังใน SVG ที่บันทึกไว้

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

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

ตรวจสอบไฟล์ที่บันทึกไว้สำหรับ:

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

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

เมื่อเวิร์กโฟลว์ขาวดำนี้ลงตัว

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

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

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

Potrace สามารถเปิด PNG โดยตรงได้หรือไม่ Standard Potrace 1.16 ยอมรับอินพุต PBM, PGM, PPM และ BMP ถอดรหัส PNG ด้วยเครื่องมือรูปภาพอื่นก่อน ทำให้การรักษาความโปร่งใสชัดเจน และบันทึกบิตแมปที่รองรับก่อนการติดตาม

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

alphamax เป็นการตั้งค่า PNG alpha หรือไม่ ไม่ อัลฟ่าแม็กซ์ของ Potrace ควบคุมการรักษามุมในเส้นโค้งที่ลากตามเส้น ไม่ได้กำหนดวิธีการรวมช่องความทึบของ PNG ก่อนการติดตาม

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

แหล่งที่มา

  1. Potrace — Manual — รูปแบบอินพุตที่รองรับ, การกำหนดขีดจำกัดขาวดำ, เอาต์พุต SVG และตัวเลือกคำสั่งที่มีชื่อ
  2. Pillow — โมดูลรูปภาพ — การจัดองค์ประกอบภาพ RGBA และลำดับที่ใช้ในการเตรียมตัวอย่าง
  3. W3C — ข้อกำหนด PNG — ตัวอย่างสีและการแสดงอัลฟ่าในภาพ PNG
  4. W3C — เส้นทาง SVG — เส้นทางแบบผสมและรูปทรงภายในที่สามารถอธิบายช่องเปิดได้

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

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

PerfectVector

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

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