Nasıl kullanılır
- Bir .svg dosyasını bırakma alanına sürükleyin, seçmek için tıklayın veya bir görsel yapıştırın.
- SVG işaretlemesinin kendisini kodlamak için "Orijinal biçimi koru" seçeneğini kullanın ya da görseli piksellere dönüştürmek için "Hedef biçim" olarak PNG, JPEG veya WebP seçin.
- Rasterleştirme yapıyorsanız piksel boyutunu kontrol etmek için bir "Maks. genişlik" belirleyin.
- Stil sayfası için CSS background-image çıktısını ya da data URI, ham Base64, img etiketi veya Markdown sürümünü kopyalayın.
Data URI olarak SVG
SVG (Scalable Vector Graphics, MIME türü image/svg+xml) şekilleri XML metni olarak tanımlar; bu yüzden her boyutta keskin kalır. Base64 karşılığı genellikle PHN2Zy (kodlanmış <svg) ile, dosya bir XML bildirimiyle başlıyorsa PD94bWw ile başlar.
Bir SVG görsel olarak kullanıldığında kök öğenin xmlns="http://www.w3.org/2000/svg" özniteliğini taşıması gerekir. HTML'den kopyalanan birçok satır içi parçacıkta bu öznitelik yoktur ve bu durumda data URI hiçbir şey göstermez. Görsel modunda harici kaynaklar da engellenir; bu nedenle SVG içindeki web yazı tipleri ve bağlantılı görseller yüklenmez. Önce metinleri yollara (path) dönüştürün veya bu kaynakları dosyaya gömün.
Base64 mü, URL kodlaması mı?
SVG zaten metin olduğundan bir data URI, işaretlemeyi doğrudan taşıyabilir; yalnızca birkaç karakterin (<, >, #, % ve tırnaklar) yüzde kodlamasıyla yazılması gerekir. CSS'teki tipik bir simge için bu yöntem Base64'ten daha kısadır ve gzip ile daha iyi sıkıştırılır. Dize tırnakları veya özel karakterleri bozan sistemlerden geçecekse ya da bir API Base64 bekliyorsa Base64 daha güvenli seçimdir.
/* Base64 */
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
/* Yüzde kodlamalı */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...");Yüzde kodlamalı biçimi oluşturmak için Data URI Oluşturucu aracını kullanın ve "Yüzde kodlaması" seçeneğini belirleyin.
Güvenilmeyen SVG'leri temizleyin
SVG; <script> öğeleri, onload gibi olay işleyici öznitelikleri ve başka belgelere bağlantılar içerebilir. Tarayıcılar <img> veya bir CSS arka planı aracılığıyla gösterilen SVG'lerdeki betikleri çalıştırmaz, ancak aynı dosya HTML'ye satır içi olarak eklendiğinde veya tek başına açıldığında betikler çalışabilir. Kullanıcılar uygulamanıza SVG dosyası yükleyebiliyorsa bu dosyaları saklamadan veya gömmeden önce, örneğin DOMPurify ile temizleyin. Base64 işaretlemeyi yalnızca üstünkörü bir bakıştan gizler; onu güvenli hâle getirmez.
Sıkça sorulan sorular
SVG için Base64 mü daha iyi, URL kodlaması mı?
CSS'teki SVG'ler için URL kodlaması genellikle daha kısadır ve okunabilir kalır. Dize başka sistemlerden geçtiğinde veya bir API Base64 gerektirdiğinde Base64 daha sağlamdır.
SVG data URI'm neden görüntülenmiyor?
xmlns özniteliği, yüzde kodlamalı bir URI'de kaçışlanmamış bir # ve SVG'nin başka dosyalardan yüklediği yazı tipleri veya görsellerdir.Bir SVG'yi PNG Base64 dizesine dönüştürebilir miyim?
Evet. "Hedef biçim" olarak PNG'yi seçin. Tarayıcı SVG'yi piksellere dönüştürür; "Maks. genişlik" seçeneğiyle sonucu küçültebilirsiniz.