SVG → Base64
Tukar SVG menjadi data URI yang boleh terus ditampal ke dalam HTML atau CSS — Base64 dan bentuk URL-encoded yang biasanya lebih kecil, bersebelahan.
atau klik untuk pilih — SVG sahaja
Boleh digunakan di mana-mana URL boleh digunakan. Sentiasa kira-kira satu pertiga lebih besar daripada fail asalnya.
Imej yang sama, biasanya lebih kecil daripada Base64 — dan masih boleh dibaca, yang membantu ketika menyahpepijat CSS.
satu permintaan kurang
Data URI meletakkan imej di dalam HTML atau CSS itu sendiri, jadi pelayar tidak pernah membuat permintaan kedua untuknya. Bagi ikon kecil, itulah beza antara muncul serta-merta dan muncul sesaat terlambat.
Harganya ialah caching: ikon yang dibenamkan akan dimuat turun semula bersama setiap halaman yang memuatkannya, dan tidak boleh di-cache secara berasingan. Benamkan segelintir ikon yang penting untuk paparan pertama, dan biarkan selebihnya sebagai fail.
tiga langkah
Pilih fail .svg — ia kekal pada peranti anda.
Salin data URI Base64 atau yang URL-encoded.
Guna tag img atau peraturan latar CSS yang sudah siap.
jawapan pantas
Bagi SVG, URL-encoded biasanya lebih kecil kerana SVG ialah teks manakala Base64 menambah kira-kira 33% pada apa sahaja yang disentuhnya. URL-encoded juga boleh dibaca, jadi anda dapat mengecam bentuk yang dimaksudkan di dalam helaian gaya. Guna Base64 apabila ada peringkat dalam aliran kerja yang merosakkan aksara mentahnya.
Base64 mengekod tiga bait menjadi empat aksara, jadi satu pertiga pertambahan itu tidak dapat dielakkan. Lalukan fail itu melalui pengoptimum SVG dahulu — metadata editor dan koordinat berketepatan berlebihan selalunya memakan lebih banyak ruang berbanding pengekodan itu sendiri.
Boleh — blok CSS itu sedia untuk ditampal. Ia menggunakan bentuk URL-encoded di dalam tanda petik berganda, dan itulah sebabnya pengekod menukar tanda petik berganda milik SVG kepada tanda petik tunggal.
Hampir selalu kerana ada `#` yang tidak dikodkan. Warna seperti `#fff` memotong URL pada titik itu, dan semua yang selepasnya dianggap serpihan. Keluaran di sini sudah melepaskannya dengan betul — masalah ini biasanya timbul apabila data URI disunting secara manual selepas itu.
Tidak. Pengekodan hanyalah kerja rentetan biasa yang dilakukan dalam pelayar anda.