DevToolBoxGRATIS
Blog

Konverter SVG ke CSS

Konversi kode SVG ke data URI CSS background-image.

Inline SVG (original):

Konverter SVG ke CSS Data URI

Konversi kode SVG ke data URI CSS background-image untuk digunakan dalam stylesheet.

FAQ

Mengapa menggunakan SVG sebagai latar belakang CSS?
Menghilangkan permintaan HTTP tambahan dan meningkatkan kinerja.
Apa itu data URI?
Data URI memungkinkan penyematan file kecil langsung ke dalam dokumen.
Base64 atau URL encoding?
URL encoding umumnya lebih efisien untuk SVG daripada base64.
Bisakah menggunakan variabel CSS?
Tidak langsung dalam data URI. Gunakan SVG inline untuk warna dinamis.
Elemen SVG apa yang berfungsi?
Semua elemen SVG yang valid. Pastikan SVG Anda memiliki atribut viewBox.
๐• Twitterin LinkedIn

Nilai alat ini

3.6 / 5 ยท 198 penilaian

Tetap Update

Dapatkan tips dev mingguan dan tool baru.

Tanpa spam. Berhenti kapan saja.

Enjoy these free tools?

โ˜•Buy Me a Coffee

How to Use

  1. Paste your SVG code or upload an SVG file
  2. Choose encoding method: URL-encoded or Base64
  3. Preview the SVG and the generated CSS code
  4. 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.