SVG URL kodlayıcı
SVG işaretlemesini CSS'ye hazır bir veri URI'sine dönüştürün ve veri URI'lerinin kodunu tekrar SVG'ye çözün.
SVG URL kodlayıcı
Bir SVG yapıştırın ve arka plan görüntüsü veya maske için hazır olarak doğrudan CSS'ye bırakabileceğiniz bir veri URI'si alın. Kodlayıcı, base64 yerine kompakt URL kodlama yaklaşımını kullanır: çift tırnakları tek tırnaklarla değiştirir, boşlukları daraltır ve yalnızca gerçekten ihtiyaç duyan karakterleri yüzde olarak kodlar, böylece sonuç kısa ve insanlar tarafından okunabilir kalır. Bu, stil sayfanızı base64 blob'dan daha küçük tutar ve URI içindeki şekilleri hâlâ tanımanıza olanak tanır.
Üç çıktı formatı yaygın durumları kapsar. CSS kuralı, veri URI'sini arka plan görüntüsüne sarar: url("…"); böylece bir beyanın tamamını yapıştırabilirsiniz. Çıplak veri URI'si size yalnızca özel bir özelliğin, bir <img> src'nin veya bir SVG maskesinin değerini verir. Base64 formu, emoji veya vurgulu metin düğümlerine sahip SVG'ler de dahil olmak üzere, bu kodlamayı bekleyen araçlar veya derleme adımları için UTF-8 güvenli bir data:image/svg+xml;base64 URI'si üretir. MIME türü seçeneği aynı kodlayıcıyı her içeriğe açar: text/plain, text/html, text/css, application/json ya da başka bir tür seçin, yapıştırdığınız şey o türde bir veri URI'si olsun. Yalnızca image/svg+xml boşlukları sıkıştırır ve çift tırnakları teke çevirir; bu iki numara işaretlemeyi kısaltır ama düz metni ve JSON'u bozar. Görüntü olmayan türler background-image sarmalayıcısını da bırakır ve çıplak bir url("…") verir.
Yönü kod çözmeye çevirdiğinizde araç, üç formdan herhangi birini ham SVG işaretlemesine geri döndürür. Bir CSS kuralını, çıplak veri URI'sini veya base64 kuralını yapıştırdığınızda, yalnızca stil sayfasında bulunan bir simgeyi düzenleyebilmeniz için SVG'yi çıkarır. Hesaplama giriş boyutunu, çıkış boyutunu ve değişim yüzdesini gösterir; böylece kodlamanın simgeyi küçültüp küçülttüğünü veya büyüttüğünü bir bakışta görebilirsiniz. URI, başlıkta açıkça belirtilen karakter kümesiyle birlikte HTML <img> veya <link> etiketine sarılı da gelebilir.
Her şey tarayıcınızda çalışır. SVG işaretlemeniz hiçbir zaman yüklenmez, böylece özel simgeleri, logoları ve dahili varlıkları cihazınızdan ayrılmadan kodlayabilirsiniz.