แปลง PNG เป็น SVG
ฝังภาพ PNG แบบแรสเตอร์ไว้ในคอนเทนเนอร์ XML ของ SVG เพื่อให้ปรับขนาดเลย์เอาต์เว็บได้และใช้งานร่วมกับเลย์เอาต์เวกเตอร์
การเปรียบเทียบรูปแบบและข้อกำหนดทางเทคนิค
| ข้อกำหนด | PNG | SVG |
|---|---|---|
| ประเภท MIME | image/ | image/ |
| ประเภท | แรสเตอร์ | เวกเตอร์ |
| การบีบอัด | ไม่สูญเสียคุณภาพ (DEFLATE / LZ77 + Huffman) | ข้อความ XML แบบไม่สูญเสียข้อมูล (บีบอัดด้วย GZIP ผ่าน .svgz) |
| ข้อกำหนดมาตรฐาน | ข้อกำหนด W3C PNG ฉบับที่ 3 | ข้อกำหนด W3C SVG 2 |
| ส่วนหัวที่ระบุลายเซ็นไฟล์ | 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 แบบปรับตามขนาดได้ นักออกแบบเว็บมักแปลงไฟล์เพื่อรวมภาพแรสเตอร์ไว้ในชุดภาพ SVG เวิร์กโฟลว์ภาพประกอบเวกเตอร์ และเว็บไซต์ที่ปรับตามขนาดหน้าจอ โดยไม่ต้องจัดการไฟล์ภาพภายนอกหลายไฟล์ ไฟล์ SVG ที่ได้จะรวมกราฟิกทั้งหมดไว้ในมาร์กอัป XML มาตรฐาน
ข้อกำหนดทางเทคนิคและรายละเอียดตัวแปลงสัญญาณ
ไฟล์ PNG เป็นภาพแรสเตอร์ที่ใช้ MIME type image/png เริ่มด้วยลายเซ็นไฟล์ 89 50 4E 47 0D 0A 1A 0A ตามด้วยส่วนข้อมูลที่บีบอัดด้วย DEFLATE ซึ่งผสานพจนานุกรมแบบหน้าต่างเลื่อน LZ77 กับการเข้ารหัส Huffman ส่วนไฟล์ SVG ใช้ MIME type image/svg+xml และมีโครงสร้างเป็นเอกสาร XML ระหว่างการแปลง เอนจินจะแปลงภาพเป็นพิกเซลในหน่วยความจำของอุปกรณ์ บันทึกบิตแมปเป็น PNG แล้วฝังภาพในรูปแบบ data URI แบบ Base64 ไว้ในองค์ประกอบ <image> ของ SVG เพื่อสร้างไฟล์ SVG ที่สมบูรณ์ในตัวเองพร้อมขนาด viewBox ที่กำหนด
ความเข้ากันได้ของระบบปฏิบัติการและเบราว์เซอร์
ไฟล์ SVG รองรับอย่างแพร่หลายในเว็บเบราว์เซอร์สมัยใหม่ เช่น Chrome, Firefox, Safari และ Edge บนระบบปฏิบัติการเดสก์ท็อปและมือถือ เช่น Windows, macOS, Android และ iOS โปรแกรมดูภาพและชุดโปรแกรมออกแบบ เช่น Adobe Illustrator, Inkscape และ CorelDRAW แก้ไข SVG ได้โดยตรง ไฟล์ PNG ก็รองรับอย่างแพร่หลายในเบราว์เซอร์และระบบปฏิบัติการเหล่านี้ แต่การดูมาร์กอัป SVG ดิบต้องใช้โปรแกรมแก้ไขข้อความทั่วไป
เคล็ดลับการใช้งาน
การแปลงนี้ฝังบิตแมปแรสเตอร์ไว้ในคอนเทนเนอร์ XML แทนการลากเส้นเวกเตอร์ตามขอบภาพ จึงยังคงรายละเอียดพิกเซลและความโปร่งใสของช่องอัลฟาไว้ครบถ้วน และแสดงผลในโปรแกรมอ่าน SVG ได้
คำถามที่พบบ่อย
จะแปลงภาพ PNG เป็นเวกเตอร์ SVG โดยไม่สูญเสียคุณภาพได้อย่างไร?
ตัวแปลงนี้ฝังบิตแมป PNG ความละเอียดเต็มไว้โดยตรงภายใน SVG XML wrapper ในรูปแบบสตรีมข้อมูล Base64 วิธีนี้ช่วยคงสีพิกเซลและความโปร่งใสไว้โดยไม่มีการบีบอัดแบบสูญเสียข้อมูล
ภาพ PNG และเวกเตอร์ SVG แตกต่างกันอย่างไร?
PNG คือรูปแบบภาพราสเตอร์ที่จัดเก็บข้อมูลภาพเป็นกริดพิกเซลสีคงที่ซึ่งบีบอัดด้วย DEFLATE ทำให้ขนาดไฟล์ขึ้นอยู่กับมิติของพิกเซล ส่วน SVG คือรูปแบบภาพเวกเตอร์ที่จัดเก็บข้อมูลภาพเป็นคำสั่งทางคณิตศาสตร์ที่ปรับขนาดได้ซึ่งเขียนด้วยข้อความ XML ช่วยให้ภาพสามารถปรับขนาดได้อย่างไม่จำกัดโดยไม่เกิดแตกเป็นพิกเซล