SVG → Base64
เปลี่ยน SVG เป็น data URI ที่วางลงใน HTML หรือ CSS ได้ทันที — แสดงทั้งแบบ Base64 และแบบ URL-encoded ซึ่งมักเล็กกว่า เทียบกันข้าง ๆ
หรือคลิกเพื่อเลือก — เฉพาะ SVG
ใช้ได้ทุกที่ที่ URL ใช้ได้ และจะใหญ่กว่าไฟล์ต้นฉบับราวหนึ่งในสามเสมอ
ภาพเดียวกัน มักเล็กกว่าแบบ Base64 — และยังอ่านออก จึงช่วยตอนไล่แก้ CSS
ลดคำขอไปหนึ่งครั้ง
data URI วางตัวรูปภาพไว้ใน HTML หรือ CSS โดยตรง เบราว์เซอร์จึงไม่ต้องส่งคำขอครั้งที่สองเพื่อไปเอารูปนั้น สำหรับไอคอนเล็ก ๆ นี่คือความต่างระหว่างปรากฏทันทีกับปรากฏช้าไปเสี้ยววินาที
สิ่งที่ต้องแลกคือแคช ไอคอนที่ฝังไว้จะถูกดาวน์โหลดใหม่ทุกครั้งพร้อมกับหน้าที่บรรจุมันอยู่ และแคชแยกต่างหากไม่ได้ ให้ฝังเฉพาะไอคอนไม่กี่ตัวที่สำคัญต่อการแสดงผลครั้งแรก แล้วปล่อยที่เหลือไว้เป็นไฟล์
สามขั้นตอน
เลือกไฟล์ .svg — ไฟล์ยังอยู่ในอุปกรณ์ของคุณ
คัดลอก data URI แบบ Base64 หรือแบบ URL-encoded
ใช้แท็ก img หรือกฎพื้นหลัง CSS ที่เตรียมไว้ให้แล้ว
ตอบสั้น ๆ
สำหรับ SVG แบบ URL-encoded มักเล็กกว่า เพราะ SVG เป็นข้อความ ขณะที่ Base64 จะเพิ่มขนาดราว 33% ให้กับทุกอย่างที่มันแตะ อีกทั้งแบบ URL-encoded ยังอ่านออก คุณจึงมองเห็นได้ว่านั่นคือรูปทรงที่ตั้งใจไว้จริงในไฟล์สไตล์ ให้ใช้ Base64 เมื่อมีขั้นตอนใดในกระบวนการทำให้อักขระดิบเสียหาย
Base64 เข้ารหัสสามไบต์เป็นสี่อักขระ ส่วนที่โตขึ้นหนึ่งในสามจึงเลี่ยงไม่ได้ ลองส่งไฟล์ผ่านตัวปรับแต่ง SVG ก่อน — ข้อมูลกำกับจากโปรแกรมแก้ไขและพิกัดที่มีทศนิยมเกินจำเป็น มักกินพื้นที่มากกว่าตัวการเข้ารหัสเสียอีก
ได้ — บล็อก CSS พร้อมวางได้เลย มันใช้รูปแบบ URL-encoded ภายในเครื่องหมายอัญประกาศคู่ นั่นจึงเป็นเหตุผลที่ตัวเข้ารหัสเปลี่ยนอัญประกาศคู่ใน SVG ให้เป็นอัญประกาศเดี่ยว
เกือบทุกครั้งเกิดจาก `#` ที่ไม่ได้เข้ารหัส สีอย่าง `#fff` จะตัด URL ลงตรงจุดนั้น และทุกอย่างหลังจากนั้นถูกมองเป็นส่วนอ้างอิงภายในหน้า ผลลัพธ์จากที่นี่ทำ escape ให้เรียบร้อยแล้ว — ปัญหานี้มักเกิดตอนไปแก้ data URI ด้วยมือทีหลัง
ไม่ การเข้ารหัสเป็นเพียงงานจัดการสตริงธรรมดาที่ทำในเบราว์เซอร์ของคุณ