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

แปลงโค้ด SVG เป็น data URI CSS background-image

ประเภทเอาต์พุต:

โค้ด SVG

เอาต์พุต CSS

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E %3Ccircle cx='50' cy='50' r='40' fill='%233b82f6' opacity='0.8'/%3E %3Cpolygon points='50,15 61,35 85,35 67,57 75,80 50,65 25,80 33,57 15,35 39,35' fill='%23f59e0b' opacity='0.9'/%3E %3C/svg%3E");

ตัวอย่างพื้นหลัง

Inline SVG (original):

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

แปลงโค้ด SVG เป็น data URI CSS background-image สำหรับใช้ใน stylesheet

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

ทำไมต้องใช้ SVG เป็นพื้นหลัง CSS?

ลดคำขอ HTTP เพิ่มเติมและปรับปรุงประสิทธิภาพ

data URI คืออะไร?

data URI ช่วยให้ฝังไฟล์ขนาดเล็กโดยตรงในเอกสาร

Base64 หรือ URL encoding?

URL encoding โดยทั่วไปมีประสิทธิภาพมากกว่า base64 สำหรับ SVG

ใช้ CSS custom properties ได้ไหม?

ไม่ตรงใน data URI ใช้ SVG แบบอินไลน์สำหรับสีไดนามิก

SVG element ใดที่ใช้งานได้?

SVG element ที่ถูกต้องทั้งหมด ตรวจสอบให้แน่ใจว่า SVG มี viewBox attribute

𝕏 Twitter in LinkedIn

💬 User Feedback

ให้คะแนนเครื่องมือนี้

3.6 / 5 · 198 คะแนน

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

SVGSVG เป็น JSX/React 💎SVG Optimizer { }ตัวย่อ / ทำให้สวย CSS

อัปเดตข่าวสาร

รับเคล็ดลับการพัฒนาและเครื่องมือใหม่ทุกสัปดาห์

ไม่มีสแปม ยกเลิกได้ตลอดเวลา

Enjoy these free tools?

☕Buy Me a Coffee

How to Use

Paste your SVG code or upload an SVG file
Choose encoding method: URL-encoded or Base64
Preview the SVG and the generated CSS code
Copy the CSS background-image property to use in your stylesheet

Use Cases

Embedding small SVG icons directly in CSS to reduce HTTP requests
Creating CSS-only decorative elements without external files
Optimizing SVG icons for use in CSS pseudo-elements (::before, ::after)
Converting SVG logos for inline CSS backgrounds in email templates

Frequently Asked Questions

Should I use URL encoding or Base64 for SVGs in CSS?

URL encoding is generally recommended for SVGs in CSS because it produces smaller output than Base64 (about 30% smaller). Base64 is better for binary formats like PNG.

Is it better to use inline SVG or SVG in CSS?

For decorative icons and backgrounds, CSS data URIs keep your HTML cleaner. For interactive or accessible SVGs, inline SVG in HTML is preferred as it supports CSS styling and aria attributes.

What is the size limit for SVG data URIs?

There is no strict size limit, but keeping data URIs under 8-10KB is recommended for performance. Larger SVGs should be served as external files.