วิธีใช้งาน
- วางสตริง Base64 หรือ URI แบบ data:image/svg+xml;base64
- ตรวจดูภาพตัวอย่าง รวมถึงรูปแบบที่ตรวจพบและขนาดภาพ
- คง SVG ไว้ใน “ดาวน์โหลดเป็น” สำหรับอินพุตที่เป็น SVG ไฟล์จะถูกบันทึกเป็นข้อความ SVG
- ดาวน์โหลดไฟล์ .svg แล้วเปิดในโปรแกรมแก้ไขหากต้องการอ่านหรือแก้ไขมาร์กอัป
การค้นหา SVG ภายใน Base64
SVG ต่างจากรูปภาพรูปแบบอื่นตรงที่เป็นข้อความ XML ธรรมดา ไฟล์ที่ขึ้นต้นด้วย <svg จะเข้ารหัสเป็น Base64 ที่ขึ้นต้นด้วย PHN2Zy และไฟล์ที่ขึ้นต้นด้วยการประกาศ XML (<?xml) จะขึ้นต้นด้วย PD94bWwg Base64 SVG พบได้บ่อยในภาพพื้นหลัง CSS ชุดไอคอน ไฟล์ส่งออกจากเครื่องมือออกแบบ และเทมเพลตอีเมล ชนิด MIME คือ image/svg+xml
data URI ของ SVG จำนวนมากไม่ได้เป็น Base64 เลย แต่เป็นข้อความที่เข้ารหัสแบบเปอร์เซ็นต์ เช่น data:image/svg+xml,%3Csvg... เครื่องมือนี้รับเฉพาะ Base64 ดังนั้นให้แยกวิเคราะห์ data URI แบบนั้นด้วย ตัวสร้าง Data URI แทน
การอ่านโค้ด SVG
ภาพตัวอย่างแสดงว่ากราฟิกเรนเดอร์ออกมาอย่างไร แต่ส่วนที่น่าสนใจมักเป็นมาร์กอัป เช่น ข้อมูลพาธ สี viewBox หรือฟอนต์ที่ฝังไว้ ดาวน์โหลดไฟล์เป็น “ต้นฉบับ” หรือ SVG แล้วเปิดในโปรแกรมแก้ไขข้อความใดก็ได้ หรือวาง Base64 เดียวกันลงใน ตัวถอดรหัส Base64 เพื่อดู XML เป็นข้อความได้ทันที
แรสเตอร์เป็น SVG คือการห่อ ไม่ใช่การแปลงเป็นเวกเตอร์
หากข้อมูล Base64 เป็น PNG, JPEG หรือบิตแมปรูปแบบอื่น การเลือก SVG จะได้ไฟล์ SVG ที่เก็บพิกเซลต้นฉบับไว้ในองค์ประกอบ <image> วิธีนี้มีประโยชน์เมื่อเครื่องมือรับเฉพาะไฟล์ SVG แต่ไม่ได้ลากเส้นภาพให้เป็นรูปทรง รูปภาพจึงยังเบลอเมื่อขยาย และไฟล์มีขนาดใหญ่กว่าบิตแมป เพราะพิกเซลถูกเก็บเป็น Base64 อยู่ภายใน หากต้องการพาธเวกเตอร์จริง ให้ใช้ซอฟต์แวร์ลากเส้นภาพ เช่น Potrace หรือฟีเจอร์ Trace Bitmap ใน Inkscape
การจัดการ SVG ที่ไม่น่าไว้วางใจ
SVG อาจมีองค์ประกอบ <script> แอตทริบิวต์ตัวจัดการเหตุการณ์ และลิงก์ไปยังทรัพยากรภายนอก เบราว์เซอร์จะบล็อกสิ่งเหล่านี้ทั้งหมดเมื่อแสดง SVG เป็นรูปภาพผ่านแท็ก <img> หรือพื้นหลัง CSS แต่สคริปต์จะทำงานได้และทรัพยากรภายนอกจะโหลดได้เมื่อเปิดไฟล์โดยตรงในแท็บเบราว์เซอร์ หรือวางมาร์กอัปแบบอินไลน์ลงในหน้าเว็บ ควรตรวจทานหรือกรองเนื้อหาที่เป็นอันตรายออกจาก SVG ที่มาจากแหล่งที่ไม่รู้จักก่อนนำไปใช้ในลักษณะนั้น
คำถามที่พบบ่อย
เครื่องมือนี้เปลี่ยน PNG เป็น SVG แบบเวกเตอร์จริงได้หรือไม่
ไม่ได้ การแปลงบิตแมปเป็น SVG เป็นเพียงการฝังรูปภาพไว้ในไฟล์ SVG ผลลัพธ์จะขยายขนาดแบบบิตแมปต้นฉบับ ไม่ใช่แบบภาพวาดเวกเตอร์
ทำไม data URI ของ SVG จึงถอดรหัสไม่สำเร็จ
;base64, หรือไม่ หากไม่มี แสดงว่า SVG เข้ารหัสแบบเปอร์เซ็นต์หรือเป็นข้อความดิบ ไม่ใช่ Base64 ซึ่ง ตัวสร้าง Data URI แยกวิเคราะห์ได้ถอดรหัส SVG จากแหล่งที่ไม่รู้จักปลอดภัยหรือไม่
การถอดรหัสและบันทึกไม่เป็นอันตราย เพราะผลลัพธ์เป็นเพียงข้อความ สคริปต์ภายใน SVG จะทำงานได้ก็ต่อเมื่อเปิดเป็นเอกสาร หรือแทรกแบบอินไลน์ลงในหน้าเว็บเท่านั้น
ทำไมฟอนต์หรือรูปภาพที่ลิงก์ไว้จึงหายไปหลังแปลง SVG เป็น PNG
ในการแปลง SVG เป็นภาพแรสเตอร์ เบราว์เซอร์จะโหลด SVG เป็นรูปภาพ และในโหมดนั้น SVG ดึงไฟล์ภายนอกไม่ได้ เว็บฟอนต์และรูปภาพที่ลิงก์ไว้จึงถูกข้ามไป และใช้ฟอนต์เริ่มต้นแทน ให้ฝังฟอนต์และรูปภาพไว้ใน SVG เพื่อให้ไฟล์สมบูรณ์ในตัวเอง