devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt
Audit Situs

Konverter Data URI SVG ke CSS

Tempel SVG dan dapatkan data URI ter-URL-encode yang ringkas, plus CSS background-image dan mask-image yang bisa diubah warnanya, siap pakai.

Diperbarui
Encoding
Buka .svg
Output CSS
Data URI

      
background-image

      
mask-image (ikon bisa diubah warna)

    

  





  
Pratinjau background-image

  
Pratinjau mask-image





    
 Data kamu tidak pernah meninggalkan komputer kamu. Semua proses berjalan 100% secara lokal di browser kamu.
Apakah alat ini membantu?0.0 0 penilaian

    
    
    Ubah kode SVG menjadi komponen React secara onlineAtribut camelCase, className, objek style, props spread, dan opsi TypeScript.SVG ke JSX Converter →
    
    

      
Cara menggunakan Konverter SVG ke CSS
  1. Tempel kode SVG kamu, buka file .svg, atau muat contohnya.
  2. Biarkan Bersihkan SVG aktif untuk menghapus komentar, metadata, dan atribut editor, lalu pilih URL-encoded atau Base64.
  3. Cek kedua pratinjau — gambar background biasa dan versi mask satu warna.
  4. Salin data URI atau aturan CSS lengkapnya, lalu tempel ke stylesheet kamu.


Apa itu data URI SVG?


Data URI menyematkan file langsung di CSS alih-alih menautkannya: background-image: url("data:image/svg+xml,…"). Untuk ikon kecil, pembatas, pola, dan checkbox kustom, cara ini menghemat satu HTTP request, mencegah kedipan gambar yang belum termuat, dan menjaga aset tetap berdampingan dengan style yang memakainya.


URL-encoding vs Base64


SVG adalah teks, jadi tidak perlu Base64. Base64 membengkakkan file sekitar 33% dan mengubahnya menjadi blob yang tidak bisa dibaca serta kurang efektif saat dikompresi dengan gzip atau Brotli. SVG yang di-URL-encode tetap mendekati ukuran aslinya dan masih bisa dibaca. Hanya beberapa karakter yang perlu di-escape:


KarakterHasil encodeAlasan


#%23Jika tidak, dianggap awal fragment URL — warna seperti #fff merusak gambar.


%%25Karakter escape itu sendiri.


< >%3C %3EDisarankan agar kompatibel dengan parser yang ketat.


"' atau %22Tanda kutip atribut diganti kutip tunggal agar CSS bisa membungkus URI dengan kutip ganda.




Gunakan Base64 hanya jika tool atau framework menolak format lain. Kartu ukuran di bawah pratinjau menampilkan kedua hasil supaya kamu bisa membandingkan.


Ikon bisa diubah warna dengan mask-image


SVG yang dipakai sebagai background image dirender secara terpisah: CSS di halaman tidak bisa mengubah fill-nya, dan currentColor di dalamnya tidak mengikuti warna teks kamu. Snippet mask-image mengatasi ini dengan memakai SVG hanya sebagai stensil lalu mewarnainya dengan background-color: currentColor, sehingga satu ikon bisa tampil dalam warna apa pun, state hover, atau dark mode. Baris -webkit-mask tetap dibutuhkan untuk beberapa browser.


Pembersihan dan batasan


Pembersihan menghapus deklarasi XML, komentar, <metadata>, <title> (tidak berguna di background), atribut Inkscape/Sodipodi/Sketch, dan spasi berlebih. Jika xmlns yang wajib tidak ada, atribut itu akan ditambahkan — tanpanya browser tidak akan merender gambar. Sematkan hanya SVG kecil (beberapa KB): data URI besar membuat setiap unduhan CSS membengkak dan tidak bisa di-cache terpisah. Untuk grafik kompleks, tautkan file-nya saja. Butuh komponen React, bukan CSS? Gunakan SVG ke JSX; untuk gambar raster, lihat Image ke Base64.


Menggunakannya di Webflow


Panel Backgrounds di Webflow hanya menerima gambar yang diunggah, jadi tempel aturan yang dihasilkan ke dalam tag <style> di elemen Embed atau di custom code halaman/situs, lalu beri elemenmu class yang sesuai (misalnya icon).
Juga dicari sebagai: svg ke css, svg data uri, svg ke data url, url encode svg, svg sebagai background image, svg ke base64, mask-image, ikon css svg.
Tool yang cocok dipakai bersama Konverter SVG ke CSS
  • Encode & Decode URL — Ubah teks menjadi percent-encoding agar aman dipakai di URL, kembalikan string yang sudah di-encode menjadi teks yang bisa dibaca, dan pecah URL apa pun menjadi bagian-bagian serta parameter query-nya.
  • Encode / Decode Base64 — Ubah teks ke Base64 dan sebaliknya dengan dukungan UTF-8 penuh (aksen, emoji), beralih ke Base64 URL-safe, atau seret file untuk mendapatkan string Base64 atau data URI-nya.
  • CSS Minifier — Tempel stylesheet untuk langsung memperkecil ukurannya.
  • Generator Animasi CSS — Desain animasi CSS di atas timeline keyframe sungguhan.
Pertanyaan yang sering diajukan
Kenapa data URI SVG saya tidak muncul?
Penyebab umumnya adalah # yang belum di-escape (pada warna seperti #fff), atribut xmlns="http://www.w3.org/2000/svg" yang hilang, atau kutip yang tidak seimbang antara url("…")` di CSS dan atribut SVG. Tool ini memperbaiki ketiganya.
Mana yang lebih baik untuk SVG di CSS, URL-encoding atau Base64?
Biasanya URL-encoding lebih baik: hasilnya lebih kecil, tetap bisa dibaca, dan terkompresi dengan baik. Base64 menambah sekitar sepertiga ukuran dan hanya layak dipakai jika toolchain kamu mewajibkannya.
Bisakah saya mengubah warna background image SVG dengan CSS?
Tidak secara langsung — CSS tidak bisa menjangkau bagian dalam background image. Kamu bisa mengedit fill di SVG sebelum di-encode, atau memakai snippet mask-image dan mengatur background-color, yang bisa diubah saat hover atau di dark mode.
Apakah saya perlu menambahkan charset=utf-8 di data URI?
Tidak perlu. Karakter non-ASCII di-encode persen sebagai UTF-8, dan browser mendekodenya dengan benar untuk SVG, jadi data:image/svg+xml, sudah cukup.
Apakah ada batas ukuran untuk data URI di CSS?
Browser bisa menangani data URI yang sangat besar, tetapi itu membuat stylesheet kamu membengkak dan tidak bisa di-cache terpisah. Batasi SVG yang disematkan hingga beberapa kilobyte dan tautkan file yang lebih besar.
Bisakah saya memasang Konverter SVG ke CSS sebagai aplikasi web dan memakainya offline?
Bisa. Konverter SVG ke CSS adalah aplikasi web (PWA) yang bisa dipasang. Pemasangannya lewat browser kamu, bukan diunduh dari toko aplikasi. Klik Pasang aplikasi di bagian atas halaman ini di Chrome atau Edge (Windows, macOS, Linux, ChromeOS) atau di Android. Di iPhone dan iPad, gunakan Bagikan → Tambahkan ke Layar Utama, dan di Safari 17+ pada Mac, gunakan File → Tambahkan ke Dock. Setelah itu, aplikasi akan terbuka di jendelanya sendiri dengan ikonnya sendiri. Karena berjalan sepenuhnya di browser kamu, aplikasi ini tetap bisa dipakai offline. Firefox di desktop tidak bisa memasang aplikasi web. Cara memasang aplikasi.

      
    

    
    
Tool terkait
localSVG ke JSX ConverterTempel SVG dari Figma, Illustrator, atau kumpulan ikon, lalu dapatkan komponen React (JSX atau TSX) yang…localGambar ke Base64Ubah PNG, JPEG, SVG, WebP atau GIF menjadi data URI Base64 dengan CSS dan HTML yang siap disalin, atau…localEncode & Decode URLUbah teks menjadi percent-encoding agar aman dipakai di URL, kembalikan string yang sudah di-encode…localEncode / Decode Base64Ubah teks ke Base64 dan sebaliknya dengan dukungan UTF-8 penuh (aksen, emoji), beralih ke Base64 URL-safe,…localCSS MinifierTempel stylesheet untuk langsung memperkecil ukurannya. Kamu akan melihat ukuran asli dan hasil minify,…localGenerator Animasi CSSDesain animasi CSS di atas timeline keyframe sungguhan. Mulai dari 50+ preset, geser frame demi frame,…