วิธีใช้งาน
- ลากไฟล์ .svg มาวางในพื้นที่วางไฟล์ คลิกเพื่อเลือกไฟล์ หรือวางรูปภาพ
- เลือก “คงรูปแบบเดิม” เพื่อเข้ารหัสมาร์กอัป SVG โดยตรง หรือเลือก PNG, JPEG หรือ WebP เพื่อแปลงเป็นพิกเซล
- หากแปลงเป็นภาพแรสเตอร์ ให้ตั้ง “ความกว้างสูงสุด” เพื่อกำหนดขนาดพิกเซล
- คัดลอกเอาต์พุต CSS background-image สำหรับสไตล์ชีต หรือเลือกใช้ data URI, Base64 ล้วน, แท็ก img หรือ Markdown
SVG ในรูปแบบ data URI
SVG (Scalable Vector Graphics, ชนิด MIME image/svg+xml) อธิบายรูปทรงต่าง ๆ ด้วยข้อความ XML จึงคมชัดได้ในทุกขนาด Base64 ของ SVG มักขึ้นต้นด้วย PHN2Zy (คือ <svg ที่เข้ารหัสแล้ว) หรือ PD94bWw เมื่อไฟล์ขึ้นต้นด้วยการประกาศ XML
เมื่อใช้ SVG เป็นรูปภาพ องค์ประกอบรากต้องมี xmlns="http://www.w3.org/2000/svg" โค้ดอินไลน์จำนวนมากที่คัดลอกมาจาก HTML มักไม่มีแอตทริบิวต์นี้ ทำให้ data URI ไม่แสดงอะไรเลย นอกจากนี้ทรัพยากรภายนอกยังถูกบล็อกในโหมดรูปภาพ เว็บฟอนต์และรูปภาพที่ลิงก์ไว้ภายใน SVG จึงไม่โหลด ให้แปลงข้อความเป็นพาธหรือฝังทรัพยากรเหล่านั้นไว้ในไฟล์ก่อน
Base64 หรือการเข้ารหัส URL
เนื่องจาก SVG เป็นข้อความอยู่แล้ว data URI จึงบรรจุมาร์กอัปได้โดยตรง โดยเข้ารหัสแบบเปอร์เซ็นต์เพียงไม่กี่อักขระ (<, >, #, % และเครื่องหมายอัญประกาศ) สำหรับไอคอนทั่วไปใน CSS วิธีนี้ให้ผลลัพธ์ที่สั้นกว่า Base64 และบีบอัดด้วย gzip ได้ดีกว่า ส่วน Base64 ปลอดภัยกว่าเมื่อสตริงต้องผ่านระบบที่ทำให้เครื่องหมายอัญประกาศหรืออักขระพิเศษผิดเพี้ยน หรือเมื่อ API ต้องการ Base64
/* Base64 */
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
/* เข้ารหัสแบบเปอร์เซ็นต์ */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...");หากต้องการสร้างรูปแบบที่เข้ารหัสแบบเปอร์เซ็นต์ ให้ใช้ ตัวสร้าง Data URI แล้วเลือก “การเข้ารหัสแบบเปอร์เซ็นต์”
ทำความสะอาด SVG ที่ไม่น่าเชื่อถือ
SVG อาจมีองค์ประกอบ <script> แอตทริบิวต์ตัวจัดการเหตุการณ์ เช่น onload และลิงก์ไปยังเอกสารอื่น เบราว์เซอร์จะไม่รันสคริปต์ใน SVG ที่แสดงผ่าน <img> หรือพื้นหลัง CSS แต่หากฝังไฟล์เดียวกันนี้แบบอินไลน์ใน HTML หรือเปิดไฟล์โดยตรง สคริปต์ก็จะทำงานได้ หากผู้ใช้อัปโหลดไฟล์ SVG ไปยังแอปพลิเคชันของคุณได้ ให้ทำความสะอาดไฟล์ก่อนจัดเก็บหรือฝัง เช่น ด้วย DOMPurify ทั้งนี้ Base64 เพียงซ่อนมาร์กอัปจากการมองผ่าน ๆ เท่านั้น ไม่ได้ทำให้ไฟล์ปลอดภัยขึ้น
คำถามที่พบบ่อย
Base64 หรือการเข้ารหัส URL ดีกว่ากันสำหรับ SVG
สำหรับ SVG ใน CSS การเข้ารหัส URL มักให้ผลลัพธ์ที่เล็กกว่าและยังอ่านได้ ส่วน Base64 ทนทานกว่าเมื่อสตริงต้องผ่านระบบอื่น หรือเมื่อ API กำหนดให้ใช้ Base64
ทำไม data URI ของ SVG จึงไม่แสดงผล
xmlns มีอักขระ # ที่ไม่ได้ escape ใน URI ที่เข้ารหัสแบบเปอร์เซ็นต์ และมีฟอนต์หรือรูปภาพที่ SVG โหลดจากไฟล์อื่นแปลง SVG เป็นสตริง Base64 แบบ PNG ได้หรือไม่
ได้ เลือก PNG ในตัวเลือก “แปลงเป็น” เบราว์เซอร์จะเรนเดอร์ SVG เป็นพิกเซล และตัวเลือก “ความกว้างสูงสุด” ช่วยให้ผลลัพธ์มีขนาดเล็กลงได้