SVG → Base64
Ubah SVG menjadi data URI yang bisa langsung ditempel ke HTML atau CSS — Base64 dan bentuk URL-encoded yang biasanya lebih kecil, berdampingan.
atau klik untuk memilih — hanya SVG
Bisa dipakai di mana pun URL bisa dipakai. Selalu sekitar sepertiga lebih besar daripada berkas aslinya.
Gambar yang sama, biasanya lebih kecil daripada Base64 — dan masih terbaca, yang membantu saat men-debug CSS.
satu permintaan lebih sedikit
Data URI menaruh gambar di dalam HTML atau CSS itu sendiri, sehingga browser tidak pernah membuat permintaan kedua untuknya. Untuk ikon kecil, itulah beda antara muncul seketika dan muncul terlambat sesaat.
Imbalannya adalah caching: ikon yang disematkan akan diunduh ulang bersama setiap halaman yang memuatnya, dan tidak bisa di-cache sendiri. Sematkan segelintir ikon yang penting untuk tampilan pertama, dan biarkan sisanya sebagai berkas.
tiga langkah
Pilih berkas .svg — berkasnya tetap di perangkat Anda.
Salin data URI Base64 atau yang URL-encoded.
Gunakan tag img atau aturan latar CSS yang sudah disiapkan.
jawaban singkat
Untuk SVG, URL-encoded biasanya lebih kecil, karena SVG berupa teks sementara Base64 menambah sekitar 33% pada apa pun yang disentuhnya. URL-encoded juga terbaca, jadi Anda bisa mengenali bentuk yang dimaksud di dalam stylesheet. Pakai Base64 bila ada tahap dalam alur kerja yang merusak karakter mentahnya.
Base64 mengenkode tiga bita menjadi empat karakter, jadi sepertiga pembengkakan itu tak terhindarkan. Lewatkan dulu berkasnya ke pengoptimal SVG — metadata editor dan koordinat dengan desimal berlebih sering memakan lebih banyak ruang daripada enkodenya sendiri.
Bisa — blok CSS-nya siap ditempel. Ia memakai bentuk URL-encoded di dalam tanda kutip ganda, dan itulah sebabnya encoder mengganti tanda kutip ganda milik SVG dengan tanda kutip tunggal.
Hampir selalu karena ada `#` yang tidak dienkode. Warna seperti `#fff` memotong URL tepat di titik itu, dan semua sesudahnya dianggap fragmen. Keluaran di sini sudah meloloskannya dengan benar — masalahnya biasanya muncul ketika data URI diedit manual sesudahnya.
Tidak. Proses enkode hanyalah pengolahan teks biasa yang dilakukan di browser Anda.