เครื่องมือแปลงภาพ PNG เป็นไฟล์เวกเตอร์ SVG
แปลงภาพบิตแมป PNG ให้เข้าไปอยู่ในคอนเทนเนอร์เวกเตอร์ SVG XML สำหรับการปรับขนาดบนเว็บแบบ Responsive และการผสานรวมเลย์เอาต์ที่รองรับเวกเตอร์
การเปรียบเทียบรูปแบบและข้อกำหนดทางเทคนิค
| ข้อกำหนด | PNG | SVG |
|---|---|---|
| ประเภท MIME | image/png | image/svg+xml |
| ประเภท | raster | vector |
| การบีบอัด | lossless (DEFLATE / LZ77 + Huffman) | lossless XML text (GZIP compressible via .svgz) |
| ข้อกำหนดมาตรฐาน | W3C PNG 3rd Edition | W3C SVG 2 Specification |
| ส่วนหัว Magic Bytes | 89 50 4E 47 0D 0A 1A 0A | 3C 3F 78 6D 6C (<?xml) or 3C 73 76 67 (<svg) |
ภาพรวมรูปแบบและการใช้งาน
การแปลงไฟล์ PNG เป็นรูปแบบ SVG จะเป็นการห่อหุ้มภาพบิตแมปไว้ภายในคอนเทนเนอร์เวกเตอร์ XML ซึ่งช่วยให้นักพัฒนาเว็บและนักออกแบบกราฟิกสามารถฝังกราฟิกแบบบิตแมปไว้ในเวิร์กโฟลว์เวกเตอร์ที่ปรับขนาดได้โดยตรง ภาพ PNG แบบราสเตอร์ใช้กริดพิกเซลสีที่มีขนาดคงที่ การห่อหุ้มกราฟิกนี้ลงในไฟล์ SVG จะช่วยรักษาขนาดพิกเซลและความโปร่งใสเดิมไว้ พร้อมทั้งทำให้ภาพสามารถฝังลงในเลย์เอาต์เว็บที่ขับเคลื่อนด้วย SVG และวิวพอร์ต UI แบบ Responsive ได้โดยตรง นักออกแบบเว็บมักทำการแปลงนี้เพื่อรวมงานศิลปะแบบราสเตอร์เข้ากับชุดสปรายต์ SVG เวิร์กโฟลว์ภาพประกอบเวกเตอร์ และเว็บไซต์แบบ Responsive โดยไม่ต้องจัดการไฟล์ภาพภายนอกหลายไฟล์ แพ็กเกจ SVG ที่ได้จะรวบรวมกราฟิกทั้งหมดไว้ภายในมาร์กอัป XML มาตรฐานในตัวเดียว
ข้อมูลทางเทคนิคและรายละเอียดตัวแปลงสัญญาณ (Codec)
ไฟล์ PNG เป็นภาพราสเตอร์ที่มี MIME type เป็น image/png เริ่มต้นด้วยส่วนหัวเมจิกไบต์ 89 50 4E 47 0D 0A 1A 0A ตามด้วยกลุ่มข้อมูลที่บีบอัดโดยใช้อัลกอริทึม DEFLATE ซึ่งรวมพจนานุกรมเลื่อน LZ77 และการเข้ารหัสแบบฮัฟแมน ในทางตรงกันข้าม ไฟล์ SVG ใช้ MIME type เป็น image/svg+xml และมีโครงสร้างเป็นเอกสาร XML ในระหว่างการแปลง เอ็นจิ้นจะเรนเดอร์ภาพในหน่วยความจำของไคลเอนต์ แปลงบิตแมปเป็นอนุกรมในรูปแบบ PNG และฝังภาพเป็นดาต้า URI แบบ Base64 ภายในองค์ประกอบคอนเทนเนอร์ <image> ของ SVG ซึ่งจะแพ็กเกจกราฟิกให้เป็นไฟล์ SVG ที่สมบูรณ์และอยู่ในตัว พร้อมด้วยมิติข้อมูล viewBox ที่กำหนดไว้
ความเข้ากันได้ของระบบปฏิบัติการและเบราว์เซอร์
ไฟล์ SVG ได้รับการสนับสนุนอย่างกว้างขวางในเว็บเบราว์เซอร์สมัยใหม่ รวมถึง Chrome, Firefox, Safari และ Edge ทั้งบนเดสก์ท็อปและระบบปฏิบัติการมือถือเช่น Windows, macOS, Android และ iOS โปรแกรมดูภาพและชุดเครื่องมือออกแบบ เช่น Adobe Illustrator, Inkscape และ CorelDRAW สามารถจัดการการแก้ไข SVG ได้โดยตรง ไฟล์ PNG ก็รองรับเบราว์เซอร์และระบบปฏิบัติการสากลเหล่านี้เช่นกัน แต่การดูซอร์សโค้ด SVG ดิบจำเป็นต้องใช้โปรแกรมแก้ไขข้อความมาตรฐานใดก็ได้
ข้อมูลที่เป็นประโยชน์
เนื่องจากการแปลงนี้เป็นการฝังบิตแมปราสเตอร์ลงในคอนเทนเนอร์ XML แทนที่จะเป็นการแปลงเส้นทางเวกเตอร์ (Tracing) กราฟิกจึงยังคงรายละเอียดพิกเซลและความโปร่งใสแบบอัลฟาไว้อย่างครบถ้วน พร้อมทั้งรักษาความเข้ากันได้เต็มรูปแบบกับโปรแกรมเรนเดอร์ SVG
การเปรียบเทียบรูปแบบและข้อกำหนดทางเทคนิค
โลโก้ PNG ความละเอียดสูงที่ซับซ้อนสามารถมีขนาดถึง 2 เมกะไบต์ได้อย่างง่ายดาย ซึ่งใช้เวลาดาวน์โหลดประมาณ 3.2 วินาทีผ่านการเชื่อมต่อมือถือ 4G 標準 ไฟล์ SVG ที่แปลงแล้วซึ่งเทียบเท่ากันมักจะลดเหลือเพียง 40 กิโลไบต์ โดยดาวน์โหลดเสร็จในเวลาไม่ถึง 0.1 วินาทีบนเครือข่าย 4G และทันทีทันใดบนเครือข่าย 5G และไฟเบอร์
คำถามที่พบบ่อย
จะแปลงภาพ PNG เป็นเวกเตอร์ SVG โดยไม่สูญเสียคุณภาพได้อย่างไร?
เครื่องมือแปลงจะห่อหุ้มบิตแมป PNG ความละเอียดสูงไว้ภายในตัวครอบ SVG XML โดยตรงในฐานะสตรีมข้อมูล Base64 แบบฝัง ซึ่งจะช่วยรักษา 100% ของสีพิกเซลและความโปร่งใสเดิมไว้โดยไม่มีการสูญเสียคุณภาพจากการสร้างใหม่
ภาพ PNG และเวกเตอร์ SVG แตกต่างกันอย่างไร?
PNG คือรูปแบบภาพราสเตอร์ที่จัดเก็บข้อมูลภาพเป็นกริดพิกเซลสีคงที่ซึ่งบีบอัดด้วย DEFLATE ทำให้ขนาดไฟล์ขึ้นอยู่กับมิติของพิกเซล ส่วน SVG คือรูปแบบภาพเวกเตอร์ที่จัดเก็บข้อมูลภาพเป็นคำสั่งทางคณิตศาสตร์ที่ปรับขนาดได้ซึ่งเขียนด้วยข้อความ XML ช่วยให้ภาพสามารถปรับขนาดได้อย่างไม่จำกัดโดยไม่เกิดแตกเป็นพิกเซล