Softonic

ตัวแปลง SVG เป็น CSS

ขั้นตอน 1 / 2
ถัดไป

วางส่วนย่อย <svg> ใด ๆ แล้วรับกลับมาเป็นการประกาศ background-image ที่ฝัง SVG ไว้ในรูปแบบ data URI วิธีนี้ช่วยเลี่ยงคำขอ HTTP เพิ่มอีกหนึ่งครั้ง คงไอคอนหรือลวดลายให้อยู่ในการควบคุมของ CSS ของคุณ และทนต่อการเขียนซ้ำของ CDN การเข้ารหัสใช้เส้นทาง rawurlencode แทน base64 ซึ่งเล็กกว่าสำหรับ SVG ที่มีข้อความมาก และอ่านง่ายกว่าเมื่อคุณต้องดีบักในภายหลัง

วิธีแปลง SVG ให้เป็นพื้นหลัง CSS

  1. 1

    วาง SVG

    ใส่มาร์กอัป `<svg>...</svg>` ทั้งหมด รวมถึงแอตทริบิวต์ xmlns หาก SVG ของคุณมี

  2. 2

    คลิกแปลง

    เครื่องมือจะเข้ารหัส SVG แบบ URL และห่อไว้ใน URI `data:image/svg+xml,...`

  3. 3

    คัดลอก CSS

    คุณจะได้ CSS สามบรรทัด ได้แก่ `background-image`, `background-repeat` และ `background-size` พร้อมสำหรับวาง

  4. 4

    ปรับตามต้องการ

    เปลี่ยน `background-size` เป็น `cover`, `100px 100px` หรือค่าของคุณเอง ขึ้นอยู่กับว่าเป็นไอคอนหรือลวดลาย

ทำไมจึงใช้ rawurlencode แทน base64

base64 ทำให้ SVG พองขึ้นราว 33% เนื่องจาก SVG เป็นข้อความล้วน การเข้ารหัส URL จึงปล่อยไบต์ส่วนใหญ่ไว้ตามเดิม และหลีก (escape) เฉพาะอักขระที่มีความหมายภายใน URI เท่านั้น ได้แก่ <, >, #, ช่องว่าง และอีกไม่กี่ตัว โดยทั่วไปจะได้สตริงที่สั้นกว่าเทียบเท่า base64 ราว 20-40% และยังถูกแยกวิเคราะห์ได้อย่างถูกต้องในเบราว์เซอร์สมัยใหม่ทุกตัว

เมื่อใดควรฝัง SVG และเมื่อใดควรลิงก์ไปยังไฟล์

สถานการณ์ ฝังเป็น data URI ไฟล์ .svg ภายนอก
ไอคอนเล็กที่ใช้ครั้งเดียวต่อหน้า เหมาะสม ใช้ได้
ลวดลายต่ำกว่า 2 KB ที่ใช้ทั้งเว็บไซต์ เหมาะสม ก็ดีเช่นกัน แคชได้
ชุดไอคอนกว่า 30 รูปทรง หลีกเลี่ยง ใช้สไปรต์
SVG ที่ต้องทำแอนิเมชันหรือจัดสไตล์ด้วย JS หลีกเลี่ยง ฝังไว้ใน HTML
HTML สำหรับอีเมล ฝังหรือข้ามไป ภายนอกมักถูกบล็อก

ข้อผิดพลาดที่พบบ่อย

  • # ภายใน fill="#..." ต้องถูกหลีก (escape) ตัวเข้ารหัสจะทำให้คุณเอง
  • อย่าใส่ส่วนนำหน้า <?xml ...?> ให้ลบออกก่อนวาง
  • เครื่องหมายคำพูดภายใน SVG ต้องเข้ากันกับเครื่องหมายคำพูดด้านนอกของสตริง CSS ของคุณ กฎที่สร้างขึ้นใช้เครื่องหมายคำพูดคู่ที่ด้านนอก ดังนั้นเครื่องหมายคำพูดเดี่ยวภายใน SVG จึงปลอดภัยที่สุด
  • หาก SVG มีบล็อก <script> เบราว์เซอร์จะปฏิเสธการรันภายใน background-image ซึ่งเป็นสิ่งที่คาดไว้และตั้งใจให้เป็นเช่นนั้น

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

ในเบราว์เซอร์ใดก็ตามที่รองรับ URI data: และ SVG นั่นคือเบราว์เซอร์หลักทุกตัวในทศวรรษที่ผ่านมา IE 11 ก็รองรับเช่นกัน แต่ที่นั่น data URL ต้องเป็น base64

กำหนด background-size อย่างชัดเจน มิฉะนั้นเบราว์เซอร์จะย้อนกลับไปใช้ viewBox ในตัวของ SVG ซึ่งอาจไม่ตรงกับองค์ประกอบของคุณ

ไม่ได้ตามที่เป็นอยู่ ตัวแปร CSS ถูกประเมินนอก data URI ให้กำหนดสีแบบตายตัว หรือใช้เทคนิคมาสก์ด้วย mask-image และ background-color

กฎคร่าว ๆ: ต่ำกว่า 4 KB ก็ดี 4-10 KB ควรวัดดู เกิน 10 KB มักจะทำงานได้ดีกว่าเสมอในฐานะไฟล์ภายนอกที่แคชได้

มาร์กอัปที่คุณวางจะถูกส่งไปยังเซิร์ฟเวอร์ของเราเพื่อเข้ารหัสแบบ URL และส่งกลับมาเป็นกฎ CSS โดยจะถูกประมวลผลเพียงเพื่อสร้างกฎนั้นเท่านั้น และจะไม่ถูกจัดเก็บหรือแบ่งปัน

เครื่องมือที่เกี่ยวข้อง

ตารางอ้างอิง ASCII

ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

อ้างอิงตัวอักษร HTML

รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ

ตารางอ้างอิงแป้นพิมพ์ลัด

ค้นหาแป้นพิมพ์ลัดเริ่มต้นตามเอกสารของ VS Code, Chrome และ Bash ที่ใช้ GNU Readline บน macOS, Windows และ Linux

ตัวตรวจสอบความถูกต้องของ JSON

ตรวจสอบไวยากรณ์ JSON และตรวจจับเครื่องหมายจุลภาคต่อท้าย เครื่องหมายอัญประกาศที่ผิด คีย์ซ้ำ และโครงสร้างที่ผิดรูปแบบ พร้อมระบุตำแหน่งข้อผิดพลาดอย่างแม่นยำ

ตัวลดรูปพีชคณิตบูลีน

ประเมินนิพจน์บูลีนสำหรับทุกชุดอินพุตและดูตารางค่าความจริงที่สมบูรณ์ รองรับตัวแปรสูงสุดห้าตัวและตัวดำเนินการ &, |, !, ^

ตัวตรวจสอบอีเมล

ตรวจสอบที่อยู่อีเมล: ตรวจไวยากรณ์ RFC 5322 ค้นหา MX เรกคอร์ดแบบเรียลไทม์ พร้อมรายละเอียดส่วนท้องถิ่น โดเมน และความยาว ไม่มีการส่งอีเมลใด ๆ

เครื่องมือนี้มีให้บริการในภาษาอื่น