ตัวแปลง SVG เป็นพื้นหลัง CSS สำหรับโค้ด CSS Data URI
วางหรือนำ SVG เพื่อสร้าง background-image ของ CSS พร้อมใช้ที่มี data URI URL encoding เป็นตัวเลือกที่แนะนำสำหรับผลลัพธ์ที่น้อยและอ่านง่าย และ Base64 ก็มีเช่นกัน เลือกสไตล์เครื่องหมายคำพูด ใช้การย่อ SVG แบบเบา ตั้ง background-size, background-repeat และ background-position แล้วตรวจสอบตัวอย่างแบบสด
ตัวแปลง SVG เป็นพื้นหลัง CSS เปลี่ยนมาร์กอัป SVG เป็นการประกาศ background-image ของ CSS พร้อมใช้ที่มี data URI วางหรือนำ SVG เพื่อสร้างผลลัพธ์ แล้วใช้ตัวอย่างแบบสดเพื่อทบทวน มีประโยชน์เมื่อต้องการใช้ SVG เป็นพื้นหลัง CSS แทนการอ้างอิงเป็นไฟล์ภาพแยก
ตัวแปลงมี URL encoding และ Base64 สำหรับ data URI URL encoding เป็นตัวเลือกที่แนะนำสำหรับผลลัพธ์ที่น้อยและอ่านง่าย ส่วน Base64 มีเป็นทางเลือก คุณยังเลือกสไตล์เครื่องหมายคำพูด ใช้การย่อ SVG แบบเบา และตั้ง background-size, background-repeat และ background-position ได้ ตัวเลือกเหล่านี้ช่วยกำหนด CSS ที่สร้างและตัวอย่างโดยไม่เปลี่ยนวัตถุประสงค์พื้นฐานของการแปลง
SVG เป็นรูปแบบภาพเวกเตอร์แบบมาร์กอัป ส่วน CSS ใช้บรรยายกฎการแสดงผลสำหรับหน้าเว็บ data URI แทนเนื้อหาภายใน URI ทำให้เนื้อหา SVG ปรากฏในค่า background-image ของ CSS การแปลงระหว่างรูปแบบเหล่านี้มีประโยชน์เมื่อต้องการวาง SVG ในสไตล์ชีตเป็นพื้นหลังและกำหนดการแสดงผลด้วยคุณสมบัติพื้นหลังของ CSS
ตัวแปลงทำงานในเบราว์เซอร์ของคุณทั้งหมด: ป้อนเข้าของคุณถูกประมวลผลบนอุปกรณ์และไม่ถูกส่งไปยังเซิร์ฟเวอร์ นอกจากนี้ยังใช้งานออฟไลน์ได้เมื่อโหลดหน้าแล้ว คุณจึงแปลง SVG ได้โดยไม่ต้องเชื่อมต่อ นักพัฒนาและวิศวกร DevOps ใช้มันสำหรับการแปลงอย่างรวดเร็วที่โต๊ะหรือขณะทำงานบนเครื่องอื่น โดยไม่ต้องติดตั้งอะไรในเครื่อง
ขั้นตอนที่ 1: วางหรือนำ SVG ของคุณลงในพื้นที่ป้อน ตัวแปลงใช้เนื้อหานั้นเพื่อสร้าง data URI ของ background-image ของ CSS
ขั้นตอนที่ 2: เลือก URL encoding หรือ Base64 สำหรับ data URI URL encoding เป็นตัวเลือกที่แนะนำสำหรับผลลัพธ์ที่น้อยและอ่านง่าย
ขั้นตอนที่ 3: ปรับตัวเลือกที่มี รวมถึงสไตล์เครื่องหมายคำพูดและการย่อ SVG แบบเบา ตั้ง background-size, background-repeat และ background-position ตามต้องการ
ขั้นตอนที่ 4: ตรวจสอบตัวอย่างแบบสดเพื่อดูผลลัพธ์ แล้วคัดลอก CSS ที่สร้างไปใช้ในโปรเจกต์ของคุณ
กรณีการใช้งาน: แปลง SVG เป็น background-image ของ CSS สำหรับสไตล์ชีตโดยไม่ต้องติดตั้งเครื่องมือในเครื่อง
กรณีการใช้งาน: เตรียมกราฟิกพื้นหลังขณะทำงานบนเครื่องที่คุณไม่มีสภาพแวดล้อมพัฒนาแบบปกติ
กรณีการใช้งาน: แปลง SVG ภายในโดยไม่วางเนื้อหาลงในบริการของบุคคลที่สาม
กรณีการใช้งาน: เปรียบเทียบ data URI แบบ URL-encoded กับ Base64 เมื่อเลือกวิธีแทน SVG ใน CSS
กรณีการใช้งาน: ปรับ background-size, background-repeat และ background-position แล้วใช้ตัวอย่างแบบสดเพื่อตรวจสอบผลลัพธ์
กรณีการใช้งาน: ใช้การย่อ SVG แบบเบาขณะเตรียมพื้นหลัง SVG สำหรับกฎ CSS