İçeriğe atla
TextArray
%100 yerel

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.

Giriş
Çıkış

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.

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.

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.

FAQ

SVG için neden base64 yerine URL kodlamasını kullanmalısınız?
URL kodlu SVG genellikle base64'ten küçüktür ve okunabilir kalır, böylece CSS'niz daha hafif olur ve işaretlemeyi hâlâ görebilirsiniz. Base64, bunu gerektiren araçlar için de sunulmaktadır.
Üç çıktı formatı nedir?
Arka plan görüntüsüne sahip tam bir CSS kuralı: url(...), çıplak veri URI değeri ve UTF-8 güvenli base64 veri URI'si. Stil sayfanızın veya bileşeninizin hangisine ihtiyacı varsa onu seçin.
Bir veri URI'sini tekrar SVG'ye dönüştürebilir miyim?
Evet. Bir CSS kuralının, çıplak veri URI'sinin veya base64 kuralının kodunu çözüp yapıştırma yönünü ayarlayın; araç, orijinal SVG işaretlemesini çıkarır ve döndürür.
Girişimin neden <svg ile başlaması gerekiyor?
Kodlama, girişin SVG'ye benzediğini kontrol eder, böylece başıboş bir yapıştırma bozuk bir veri URI'sine dönüşmez. <svg veya <?xml ile başlayan işaretleme kabul edilir.
SVG'im herhangi bir yere yüklendi mi?
Hayır. Dönüşüm tamamen tarayıcınızda çalışır ve işaretlemeniz hiçbir zaman cihazınızdan ayrılmaz.