แปลง PNG เป็น SVG โดยไม่เสียคุณภาพ: วิธีตรวจงาน

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

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

เริ่มจากเหตุผลที่ PNG กับ SVG เป็นไฟล์คนละชนิด

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

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

ดังนั้น "การแปลง PNG เป็น SVG" หมายถึงการสร้างใหม่ จากภาพพิกเซลเป็นรูปทรงที่แก้ไขได้ คุณภาพของผลลัพธ์ขึ้นอยู่กับความสามารถในการสร้างใหม่นั้นทั้งหมด

“ไม่เสียคุณภาพ” หมายถึงอะไรจริง ๆ

การแปลง PNG เป็น SVG คุณภาพสูงไม่ได้หมายถึงแค่ "เปิดใน Illustrator ได้" ให้ตรวจคุณสมบัติของเวกเตอร์ที่สร้างใหม่ 4 ข้อ:

• พาธสะอาด: เส้นโค้งเรียบที่ตามรูปงาน แทนที่จะตามตารางพิกเซล
• ไม่มีจุดยึดเกินจำเป็น: ใช้จุดมากพอรักษารูปทรง แต่ไม่มากจนแก้ไขด้วยมือลำบาก Adobe ก็แนะนำให้ใช้จุดน้อยลงเพื่อแก้ไขง่ายและแสดงผลเรียบขึ้น (คำแนะนำแก้ไขพาธจาก Adobe; เหตุใดจำนวนโหนดจึงสำคัญ)
• สีตรงต้นฉบับ: บริเวณสีเรียบยังเรียบ ไม่แตกเป็นรูปทรงสีเกือบเหมือนกันหลายสิบชิ้น
• โครงสร้างใช้งานได้: เลือกและปรับส่วนที่ต้องการได้โดยไม่มีเศษส่วนเกินหรือรูปทรงซ้ำ บางแบบใช้กลุ่มหรือพาธประกอบอย่างเหมาะสมอยู่แล้ว

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

เปรียบเทียบความซับซ้อนของพาธ

วิธีแปลง PNG เป็น SVG โดยไม่เสียคุณภาพ

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

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

การตรวจคุณภาพที่ใช้ได้จริง

เปรียบเทียบสิ่งเหล่านี้ในขนาดที่จะใช้และเมื่อซูมใกล้:

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

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

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

เคล็ดลับเพื่อผลลัพธ์ที่คมชัดที่สุด

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

เปรียบเทียบวิธีลากเส้นตามการควบคุมและความเที่ยงตรง

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

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

เมื่อใดที่คุณไม่ควรแปลง PNG เป็น SVG

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

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

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

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

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

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

เปิด SVG ที่ได้ด้วยอะไรได้บ้าง? เครื่องมือที่รองรับเวกเตอร์หลายตัว เช่น Illustrator, Figma, Inkscape, Affinity Designer และ Canva รองรับการทำงานกับ SVG การรองรับฟิลเตอร์ ข้อความ มาสก์ หรือเนื้อหาฝังอาจต่างกัน จึงควรทดสอบในแอปและเวอร์ชันที่จะใช้จริง

แหล่งข้อมูล

1. W3C — ข้อกำหนด Portable Network Graphics (PNG) ฉบับที่สาม — มาตรฐาน PNG ปัจจุบัน รวมถึงการแทนภาพแบบไม่สูญเสียและอัลฟา
2. W3C — Scalable Vector Graphics (SVG) 2 — มาตรฐานกำหนดรูปทรงเวกเตอร์ พาธ การลงสี และการแสดงผล SVG
3. W3C — เนื้อหาที่ฝังใน SVG — ข้อกำหนดที่แสดงว่าเหตุใดการใส่ PNG ใน SVG จึงไม่ใช่การแปลงเป็นพาธเวกเตอร์
4. Adobe Illustrator — ตัวเลือกแผง Image Trace — ตัวควบคุมรายละเอียด พาธ มุม นอยส์ และสีอย่างเป็นทางการสำหรับลากเส้นราสเตอร์
5. Adobe Illustrator — ลดความซับซ้อนของพาธอัตโนมัติ — ตัวควบคุมลดจุดยึดและผลต่อความเที่ยงตรงอย่างเป็นทางการ
6. Inkscape — การลากเส้นภาพ — ขั้นตอนปัจจุบันอย่างเป็นทางการสำหรับลากเส้นแบบสแกนเดียวและหลายสแกน
7. PerfectVector — ข้อเท็จจริงเกี่ยวกับผลิตภัณฑ์ — การเตรียมอัปโหลด ตัวอย่างฟรี และการเข้าถึงผลลัพธ์ด้วยการปลดล็อก

---

แปลง PNG แล้วเปรียบเทียบตัวอย่าง กับเส้นขอบและรายละเอียดเล็กของต้นฉบับ ปลดล็อกก่อนแก้ไข แล้วตรวจ SVG ที่ส่งออกในแอปที่จะใช้