UTILS.
%100 tarayıcıda
🖼️

SVG'den CSS / Data-URI Kodlayıcı

SVG işaretlemesini URL kodlu ya da base64 data URI olarak kodlayın; yapıştırmaya hazır CSS background-image ve <img> satırlarıyla birlikte. İsteğe bağlı küçültme.

— çıktı burada görünür —
— çıktı burada görünür —
— çıktı burada görünür —

Bu araç hakkında

Ham SVG işaretlemesini yapıştırın ve doğrudan CSS ya da HTML'ye bırakabileceğiniz bir data URI alın. İki kodlama üretir ve her şey tarayıcınızda oluşturulur; bu yüzden hiçbir şey yüklenmez.

URL kodlu çıktı çift tırnakları tek tırnakla değiştirir, encodeURIComponent çalıştırır, ardından kompakt ve okunabilir kalması için birkaç güvenli karakteri (boşluk, iki nokta, eğik çizgi, eşittir) geri yükler. Base64 çıktısı SVG'yi UTF-8 kodlar ve btoa'dan geçirerek data:image/svg+xml;base64,… verir. Bir bayt karşılaştırması hangi kodlamanın daha küçük olduğunu gösterir; çoğu ikon için URL kodlu form kazanır.

Kodlamadan önce yorumları kaldırmak ve etiketler arasındaki boşlukları daraltmak için küçültmeyi etkinleştirin. CSS için background-image satırını ya da HTML için <img src> satırını kopyalayın. SVG içindeki tırnakların, data URI'nin güvenli şekilde çift tırnakla sarılabilmesi için tek tırnağa normalize edildiğini unutmayın.

Sık sorulan sorular

URL kodlu mu base64 mü — hangisini kullanmalıyım?
URL kodlu genellikle daha küçüktür ve okunabilir kalır ki bu hata ayıklamaya yardımcı olur. Base64 daha karmaşıktır ama evrensel olarak kabul edilir; buradaki boyut karşılaştırması hangisinin daha küçük olduğunu söyler.
Çift tırnaklarım neden tek tırnağa çevrildi?
Öznitelik tırnakları tek tırnağa dönüştürülür; böylece tüm data URI, kaçış karakteri olmadan çift tırnaklı bir url("…") ya da src="…" içine oturabilir. İkisi de SVG'de geçerlidir.
Küçültme, SVG'nin görünümünü değiştirir mi?
Hayır. Yalnızca yorumları kaldırır ve etiketler arasındaki ve içindeki boşlukları daraltır; oluşturulan vektör aynıdır, sadece daha küçüktür.
SVG'im herhangi bir yere yükleniyor mu?
Hayır. Kodlama tamamen tarayıcınızda encodeURIComponent ve btoa ile çalışır; işaretleme asla cihazınızdan çıkmaz.

Daha fazla araç