แปลง PNG เป็น SVG

สิ่งที่เกิดขึ้นเมื่อแปลง PNG เป็น SVG

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

วิธีแปลง PNG เป็น SVG ออนไลน์

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

ทำไมต้องแปลง PNG เป็น SVG?

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

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

วิธีแปลง PNG เป็น SVG บน Windows, Mac, iPhone และ Android

บน Windows

เปิดหน้านี้ใน Chrome, Edge หรือ Firefox ลากไฟล์ PNG มาจาก File Explorer แล้วกด แปลง ไฟล์ SVG แต่ละไฟล์จะถูกบันทึกไว้ในโฟลเดอร์ดาวน์โหลด

บน Mac

ใช้ได้ทั้ง Safari, Chrome และ Firefox ลากไฟล์ PNG จาก Finder มาวางในช่องวางไฟล์ แล้วไฟล์ SVG จะไปอยู่ในโฟลเดอร์ดาวน์โหลด

บน iPhone และ iPad

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

บน Android

เปิดหน้านี้ใน Chrome แตะ เลือกไฟล์ PNG แล้วเลือกไฟล์จากแอป Files หรือแกลเลอรี ไฟล์ SVG จะถูกบันทึกไว้ในโฟลเดอร์ Download ซึ่งแอปจัดการไฟล์ใดก็หาเจอ

การตั้งค่าที่ดีที่สุดสำหรับ PNG เป็น SVG

มีการตั้งค่าสองอย่างที่ควบคุมการลากเส้น สี กำหนดว่า SVG ใช้สีเรียบได้กี่สี 2 ให้การลากเส้นแบบขาวดำ เหมาะกับลายเซ็นและลายเส้น 8 ถึง 16 เหมาะกับโลโก้ส่วนใหญ่ 32 เก็บการไล่เฉดได้มากขึ้นแต่สร้างรูปทรงมากกว่ามาก รายละเอียด กำหนดว่าเส้นขอบจะตามพิกเซลใกล้แค่ไหน สูง เก็บรายละเอียดเล็กๆ ไว้ เรียบง่าย ให้ไฟล์ที่เรียบกว่าและเบากว่า

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

PNG กับ SVG: ความแตกต่าง

เกี่ยวกับไฟล์ PNG และ SVG

ไฟล์ PNG คืออะไร?

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

ไฟล์ SVG คืออะไร?

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

แปลง PNG เป็น SVG ไม่ได้? ปัญหาที่พบบ่อย

• สีดูต่างไปเล็กน้อย เบราว์เซอร์แปลงรูปภาพเป็นปริภูมิสีมาตรฐาน sRGB เมื่อถอดรหัส รูปภาพแบบ wide-gamut และ CMYK จึงอาจเปลี่ยนไปเล็กน้อย
• รูปถ่ายจากมือถือออกมาตั้งตรง แม้ว่าในที่อื่นจะดูเหมือนตะแคงอยู่ ซึ่งถูกต้องแล้ว: การหมุนที่บันทึกไว้ในรูปถ่ายจะถูกนำมาใช้ระหว่างการแปลง ไฟล์ SVG จึงตั้งตรงเสมอ
• ไฟล์ใหญ่กว่าที่คาด ขึ้นอยู่กับอาร์ตเวิร์ก โลโก้แบบง่ายที่ลากเส้นเป็น SVG มักมีขนาดไม่กี่กิโลไบต์ รูปภาพที่มีรายละเอียดมากจะสร้างรูปทรงหลายพันรูปทรงและไฟล์ที่ใหญ่กว่า PNG สีที่น้อยลงให้ SVG ที่เล็กลง

แปลง PNG เป็น SVG ด้วยบรรทัดคำสั่ง

ImageMagick ลากเส้นพิกเซลเป็นรูปทรงเวกเตอร์ไม่ได้ ทำได้เพียงห่อรูปภาพไว้ใน SVG ตัวลากเส้นโอเพนซอร์สมาตรฐานคือ potrace ซึ่งทำงานกับบิตแมปขาวดำ:

magick input.png -threshold 50% input.pbm
potrace input.pbm -s -o output.svg

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