แปลง SVG เป็น Data URI สำหรับ CSS Background Image รองรับตัวเลือกการเข้ารหัส URL และ Base64
การแปลงรูปแบบ
เกี่ยวกับเครื่องมือนี้
SVG เป็น Data URI เป็นเครื่องมือออนไลน์ที่แปลงโค้ด SVG เป็นสตริง Data URI สำหรับใช้ฝังใน CSS และ HTML รองรับผลลัพธ์แบบ URL Encoding และ Base64 การปรับแต่ง SVG (เลือกได้) และสร้างโค้ด CSS ที่พร้อมใช้งาน การประมวลผลทั้งหมดทำงานในเบราว์เซอร์แบบโลคัล
คุณสมบัติหลัก
- แปลง SVG เป็น Data URI แบบ URL Encoded
- แปลง SVG เป็น Data URI แบบ Base64 Encoded
- ปรับแต่ง SVG ก่อนการแปลง
- รูปแบบผลลัพธ์ CSS background-image
- ผลลัพธ์ HTML img src และ Data URI ดิบ
- แปลงแบบเรียลไทม์พร้อมดูตัวอย่างสด
กรณีการใช้งาน
- ฝังไอคอน SVG โดยตรงใน CSS Stylesheet
- Inline SVG Image ใน HTML เพื่อเพิ่มประสิทธิภาพ
- ลด HTTP Request โดยฝัง SVG เป็น Data URI
- สร้างเอกสาร HTML แบบพกพาที่มีรูปภาพฝังอยู่
- สร้าง CSS Code Snippet สำหรับ SVG Background
svg
data-uri
base64
embed
inline
คำถามที่พบบ่อย
ตัวแปลง SVG เป็น Data URI คืออะไร?
ตัวแปลง SVG เป็น Data URI เป็นเครื่องมือแปลงรูปแบบออนไลน์ที่แปลงโค้ด SVG เป็นสตริง Data URI สำหรับใช้ฝังใน CSS และ HTML รองรับ URL Encoding และ Base64 Encoding พร้อมการปรับแต่ง SVG และการสร้างโค้ด CSS ที่พร้อมใช้งาน
URL Encoding และ Base64 แตกต่างกันอย่างไร?
Data URI แบบ URL Encoded ใช้ Percent-Encoding เพื่อแสดงอักขระพิเศษ ผลลัพธ์มีขนาดใหญ่กว่าแต่อ่านง่ายกว่า Base64 Encoding สร้างการแทนแบบ Binary-to-Text ที่กระชับ ขนาดเล็กกว่าสำหรับ SVG ที่ซับซ้อน แต่อ่านไม่ได้
เครื่องมือปรับแต่ง SVG ก่อนการแปลงหรือไม่?
ใช่ เมื่อเปิดใช้งานตัวเลือกปรับแต่ง SVG เครื่องมือจะลบช่องว่าง คอมเมนต์ และแอตทริบิวต์ว่างที่ไม่จำเป็นออกจาก SVG ก่อนสร้าง Data URI ซึ่งช่วยลดขนาดผลลัพธ์
ข้อมูล SVG ของฉันจะถูกส่งไปยังเซิร์ฟเวอร์หรือไม่?
ไม่ การแปลง SVG เป็น Data URI ทั้งหมดทำงานในเบราว์เซอร์ของคุณทั้งหมด โค้ด SVG ของคุณจะไม่ถูกอัปโหลดหรือส่งไปยังเซิร์ฟเวอร์ใด ๆ ทำให้งานของคุณเป็นส่วนตัวและปลอดภัยอย่างสมบูรณ์
ฉันสามารถใช้ผลลัพธ์โดยตรงใน CSS ได้หรือไม่?
ได้ เครื่องมือสร้าง CSS background-image Code Snippet ที่พร้อมใช้งาน เพียงคัดลอกผลลัพธ์ CSS และวางลงใน Stylesheet ของคุณ Data URI จะทำงานเป็น URL รูปภาพพื้นหลังที่ถูกต้อง