UTILS.
100% di peramban
🖼️

Encoder SVG ke CSS / Data-URI

Enkode markup SVG sebagai data URI URL-encoded atau base64, dengan baris background-image CSS dan <img> siap tempel. Minify opsional.

— keluaran muncul di sini —
— keluaran muncul di sini —
— keluaran muncul di sini —

Tentang alat ini

Tempel markup SVG mentah dan dapatkan data URI yang bisa langsung Anda jatuhkan ke CSS atau HTML. Alat menghasilkan dua enkoding dan semuanya dibuat di browser Anda, sehingga tidak ada yang diunggah.

Output URL-encoded menukar tanda kutip ganda dengan tunggal, menjalankan encodeURIComponent, lalu memulihkan beberapa karakter aman (spasi, titik dua, garis miring, sama dengan) agar tetap ringkas dan mudah dibaca manusia. Output base64 meng-encode SVG dalam UTF-8 dan menjalankannya melalui btoa, memberikan data:image/svg+xml;base64,… . Perbandingan byte menunjukkan enkoding mana yang lebih kecil; untuk sebagian besar ikon bentuk URL-encoded menang.

Aktifkan minify untuk menghapus komentar dan menyingkat spasi antar tag sebelum enkoding. Salin baris background-image untuk CSS atau baris <img src> untuk HTML. Perhatikan bahwa tanda kutip dalam SVG dinormalisasi menjadi tanda kutip tunggal sehingga data URI dapat dibungkus dalam tanda kutip ganda dengan aman.

Pertanyaan yang sering diajukan

URL-encoded atau base64 — mana yang harus saya gunakan?
URL-encoded biasanya lebih kecil dan tetap mudah dibaca, yang membantu debugging. Base64 lebih buram tetapi diterima secara universal; perbandingan ukuran memberi tahu mana yang lebih kecil di sini.
Mengapa tanda kutip ganda saya diubah menjadi tunggal?
Tanda kutip atribut diubah menjadi tanda kutip tunggal sehingga seluruh data URI dapat berada di dalam url("…") atau src="…" berkutip ganda tanpa escaping. Keduanya valid dalam SVG.
Apakah minify mengubah tampilan SVG?
Tidak. Ia hanya menghapus komentar dan menyingkat spasi antara dan di dalam tag; vektor yang dirender identik, hanya lebih kecil.
Apakah SVG saya diunggah ke mana pun?
Tidak. Enkoding berjalan sepenuhnya di browser Anda dengan encodeURIComponent dan btoa; markup tidak pernah meninggalkan perangkat Anda.

Alat lainnya