SVG'den Base64'e - Ve Neden Muhtemelen Ötekini İstiyorsunuz
Bu araç size aradığınız base64'ü verir, sonra da çoğu dönüştürücünün atladığı şeyi gösterir: SVG için base64, bir görseli satır içine almanın iki yolundan kötü olanıdır. Base64, ikili veriyi metin kanallarından güvenle geçirmek için vardır. Bir SVG zaten metindir, dolayısıyla onu kodlamak, hiç yaşamadığı bir sorun uğruna boyutunun üçte birine mal olur. Yüzde kodlaması aynı işi, yalnızca bir adresi bozacak birkaç karakteri kaçışlayarak yapar ve dosyanın geri kalanını olduğu gibi bırakır - hatta üzerinde daha küçüktür ve hâlâ sıkıştırılabilir, ki base64 büyük ölçüde değildir. Her iki biçim de burada yanlarında canlı bayt sayaçlarıyla üretilir; böylece farkı bizim sözümüze bakarak değil kendi dosyanız üzerinde görürsünüz. Her şey tarayıcınızda çalışır ve hiçbir şey üretilmeden önce SVG temizlenir.
Bu araç nasıl kullanılır
SVG dosyanızı bırakın
Bir dosyayı yukarıdaki kutuya sürükleyin ya da tıklayıp seçin. Uzantısına göre değil içeriğine göre denetlenir; kodlamadan önce bütün betikler, olay işleyicileri ve uzak referanslar temizlenir - bu çıktı sizin sayfanıza gireceği için önce arındırılır.
İki kodlamayı karşılaştırın
Panel; kaynak boyutunu, base64 data URI boyutunu ve URL kodlu data URI boyutunu yüzde farkıyla birlikte bir arada gösterir. Sınadığımız simgelerde URL kodlu biçim yüzde 14 ile 18 arasında daha küçük çıktı.
İhtiyacınız olan biçimi kopyalayın
Her birinin kendi kopyalama düğmesi olan beş kod parçacığı: ham base64 yükü, her iki data URI, hazır bir <img> etiketi ve bir CSS background-image bildirimi. Derleme adımınız ya da içerik yönetim alanınız hangisini bekliyorsa onu alın.
Boyut uyarısına dikkat edin
Yaklaşık 4 KB'ı aştığınızda panel sizi uyarır. Satır içine alınmış işaretleme, onu taşıyan sayfadan ayrı önbelleğe alınamaz; bu yüzden büyük bir data URI onu içeren her sayfada yeniden indirilir - o boyutta bağlantılı bir dosya neredeyse her zaman daha iyi bir seçimdir.
Sıkça Sorulan Sorular
Base64, özgün SVG'den ne kadar büyük olur?
Ölçtüğümüz dört dosyada %36 ile %43 arasında. 290 baytlık bir simge 414 baytlık bir base64 data URI'ye dönüştü; URL kodlu sürümü 339 bayttı. Base64 tasarımı gereği her üç bayt için dört karakter kullanır, yani bu büyümenin üçte biri yapısaldır ve geri kalanı data URI önekidir.
SVG için URL kodlaması neden daha küçük?
Çünkü yalnızca birkaç karakterin kaçışlanması gerekir. Yüzde kodlaması; yüzde işareti, diyez, açılı ayraçlar ve satır sonları için üçer bayt öder ve geri kalan her şeyi olduğu gibi bırakır. Base64 ise dosyadaki her bayta ne olduğuna bakmadan düz %33 öder. Metinde kaçış vergisi, düz vergiden çok daha küçüktür.
URL kodlu sürüm her yerde çalışır mı?
Evet, kullanımdaki bütün tarayıcılarda. base64 imi olmayan bir data URI, düpedüz yüzde kodlu metindir ve iki biçimden daha eski ve daha iyi desteklenenidir. Base64'ün gerçekten zorunlu olduğu tek yer onu varsayan bir hattır: bazı içerik yönetim alanları ve diğerini reddeden eski derleme eklentileri gibi.
Çift tırnaklarımı neden kesme işaretiyle değiştirdiniz?
Onları kaçışlamamak için. Bir SVG çoğunlukla özniteliklerden oluşur ve her sınırlayıcıyı %22 olarak kodlamak ikişer bayta mal olur. Öznitelik sınırlayıcıları kesme işaretine dönüşür ve CSS değeri çift tırnakla sarılır; böylece hiçbirinin kaçışlanması gerekmez. İçinde zaten kesme işareti bulunan değerlere dokunulmaz ve olağan biçimde kaçışlanır.
Satır içine mi almalıyım, dosyaya bağ mı vermeliyim?
Küçük ve sık kullanılan simgeleri satır içine alın; daha büyük her şeye bağ verin. Satır içine almak bir isteği ortadan kaldırır, ama baytlar o simgeyi kullanan her sayfanın ya da stil sayfasının içinde yaşar ve kendi başlarına önbelleğe alınamaz. Hesap 4 KB dolayında tersine döner; panelin orada uyarmasının nedeni budur.
gzip yanıtı değiştirir mi?
Aradaki farkı kapatmak yerine açar. Yüzde kodlu SVG hâlâ yinelenen etiket ve öznitelik adları taşıyan tanınabilir bir metindir, dolayısıyla bir sıkıştırıcı çalışacak bol malzeme bulur. Base64 çıktısı ise bir sıkıştırıcının gözünde rastgeleye yakındır ve neredeyse hiç küçülmez.
SVG'm kodlanmadan önce temizleniyor mu?
Evet ve bu, piksel üreten bir dönüştürücüdekinden daha önemlidir. Betikler, on* olay işleyicileri, uzak görsel referansları ve dış stil sayfası içe aktarımları kaldırılır ve panel neyi bulduğunu listeler. Satır içine yapıştırıldığında temizlenmemiş bir SVG, içinde ne varsa onu çalıştırır.
Data URI'yi favicon olarak ya da e-postada kullanabilir miyim?
Favicon olarak hayır - tarayıcılar orada gerçek bir adres ister. E-postada da hayır: bütün büyük istemciler, data URI olsun olmasın, SVG'yi tümüyle engeller. Data URI'ler kendi web sayfalarınız ve stil sayfalarınız içindir. E-posta için önce SVG'yi PNG'ye dönüştürün ve onu ekleyin ya da barındırın.
Simgem satır içine alındıktan sonra neden siyah görünüyor?
Çünkü currentColor kullanıyordu. Bir data URI, kendisine gönderme yapan öğenin rengini devralamayan ayrı bir belgedir; bu yüzden currentColor başlangıç değerine düşer. SVG'den CSS'e aracımız bunu saptar ve size bir mask-image parçacığı verir; o da biçimi öğenin kendi metin rengiyle boyar.
Data URI zaten elimdeyken <img> etiketi ne işe yarıyor?
Kolaylık ve alt özniteliği. Parçacık, alt="" ayarlanmış olarak gelir; süsleyici bir simge için doğru değer budur ve insanların unuttuğu da budur - hiç alt özniteliği olmayan bir görseli ekran okuyucular dosya adıyla seslendirir, ki bir data URI'de bu bir karakter duvarıdır.
Dosyalarım bir yere yükleniyor mu?
Hayır. Kodlama, tarayıcınızda çalışan birkaç satırlık aritmetiktir; dosyanız hiçbir sunucuya gönderilmez, hiç saklanmaz ve bizim tarafımızdan hiç görülmez. Bu aynı zamanda sıra beklemek diye bir şeyin ve kendi cihazınızın belleğinin ötesinde bir boyut sınırının olmadığı anlamına gelir.
Şunlara da ihtiyacınız olabilir
Bir şey çalışmıyor mu? Hata bildir