UTILS.
ทำงานในเบราว์เซอร์ 100%
🖼️

ตัวเข้ารหัส SVG เป็น CSS / Data-URI

เข้ารหัสมาร์กอัป SVG เป็น data URI แบบ URL-encoded หรือ base64 พร้อมบรรทัด CSS background-image และ <img> ที่พร้อมวาง มีตัวเลือก minify

— ผลลัพธ์จะแสดงที่นี่ —
— ผลลัพธ์จะแสดงที่นี่ —
— ผลลัพธ์จะแสดงที่นี่ —

เกี่ยวกับเครื่องมือนี้

วางมาร์กอัป SVG ดิบแล้วได้ data URI ที่คุณวางลงใน CSS หรือ HTML ได้ทันที มันสร้างการเข้ารหัสสองแบบ และทุกอย่างสร้างขึ้นในเบราว์เซอร์ของคุณ ดังนั้นจึงไม่มีการอัปโหลด

ผลลัพธ์แบบ URL-encoded เปลี่ยนอัญประกาศคู่เป็นอัญประกาศเดี่ยว รัน encodeURIComponent จากนั้นคืนอักขระที่ปลอดภัยบางตัว (ช่องว่าง โคลอน สแลช เท่ากับ) เพื่อให้กระชับและอ่านง่าย ผลลัพธ์ base64 เข้ารหัส SVG แบบ UTF-8 และรันผ่าน btoa ให้ data:image/svg+xml;base64,… การเปรียบเทียบไบต์แสดงว่าการเข้ารหัสใดเล็กกว่า สำหรับไอคอนส่วนใหญ่แบบ URL-encoded ชนะ

เปิด minify เพื่อลบคอมเมนต์และยุบช่องว่างระหว่างแท็กก่อนเข้ารหัส คัดลอกบรรทัด background-image สำหรับ CSS หรือบรรทัด <img src> สำหรับ HTML โปรดทราบว่าอัญประกาศภายใน SVG ถูกปรับให้เป็นอัญประกาศเดี่ยว เพื่อให้ห่อ data URI ด้วยอัญประกาศคู่ได้อย่างปลอดภัย

คำถามที่พบบ่อย

URL-encoded หรือ base64 — ควรใช้อันไหน?
URL-encoded มักเล็กกว่าและยังอ่านง่าย ซึ่งช่วยในการดีบัก base64 ทึบกว่าแต่ยอมรับกันทั่วโลก การเปรียบเทียบขนาดบอกคุณว่าอันไหนเล็กกว่าที่นี่
ทำไมอัญประกาศคู่ของฉันถูกเปลี่ยนเป็นอัญประกาศเดี่ยว?
อัญประกาศแอตทริบิวต์ถูกแปลงเป็นอัญประกาศเดี่ยว เพื่อให้ทั้ง data URI อยู่ใน url("…") หรือ src="…" ที่ใช้อัญประกาศคู่ได้โดยไม่ต้อง escape ทั้งสองถูกต้องใน SVG
minify เปลี่ยนหน้าตาของ SVG ไหม?
ไม่ มันเพียงลบคอมเมนต์และยุบช่องว่างระหว่างและภายในแท็ก เวกเตอร์ที่เรนเดอร์เหมือนเดิมทุกประการ เพียงแต่เล็กกว่า
SVG ของฉันถูกอัปโหลดไปที่ใดไหม?
ไม่ การเข้ารหัสทำงานทั้งหมดในเบราว์เซอร์ของคุณด้วย encodeURIComponent และ btoa มาร์กอัปไม่เคยออกจากอุปกรณ์ของคุณ

เครื่องมือเพิ่มเติม