SVG'den CSS'e - Gerçekten Çalışan Bir background-image
Bir SVG'yi stil sayfasına yapıştırmak iki belirli biçimde başarısız olur ve ikisi de sessizdir. Kaçışlamayı yanlış yaparsanız, bir dolgu renginin içindeki kaçışlanmamış bir diyez adresi keser; kural ayrıştırılır ama görsel hiç ortaya çıkmaz. Çiziminizde currentColor kullanırsanız, dosya bir data URI'ye dönüştüğü anda yeniden renklenmeyi bırakır, çünkü URI devralacağı hiçbir şeyi olmayan ayrı bir belgedir. Bu araç birincisini sizin yerinize halleder, ikincisi konusunda sizi uyarır ve olduğu gibi yapıştırabileceğiniz bir background-image bildirimi verir. Base64 yerine URL kodlu biçimi kullanır, ki SVG için o hem daha küçüktür hem de daha iyi sıkışır. Her şey sizin cihazınızda çalışır ve hiçbir şey üretilmeden önce dosya 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. Hiçbir şey üretilmeden önce betikler, olay işleyicileri ve belge dışı referanslar kaldırılır ve panel neyi çıkardığını listeler.
background-image kuralını kopyalayın
İlk parçacık, data URI'si zaten kaçışlanmış ve tırnaklanmış eksiksiz bir bildirimdir - doğrudan bir kuralın içine yapıştırın. Altında, base64 dayatan hatlar için bir base64 sürümü durur ve her ikisinin bayt sayısı gösterilir.
currentColor uyarısını denetleyin
Çiziminiz currentColor kullanıyorsa, neden siyah çizileceğini açıklayan ve onun yerine bir mask-image parçacığı öneren bir bildirim belirir. O parçacık biçimi öğenin kendi metin rengiyle boyar, ki bu çalışan en yakın karşılıktır.
Gereken boyut özelliklerini ekleyin
Tek başına bir background-image, çizimin kendi doğal boyutunda döşenir. Bunu denetlemek için background-size ve background-repeat: no-repeat ekleyin ya da ikisini de zaten içeren mask parçacığını kullanın.
Sıkça Sorulan Sorular
Hangi karakterlerin kaçışlanması gerekiyor?
Beş tanesi, artı satır sonları. Yüzde işareti önce gelmek zorundadır, yoksa kaçışların kendisini kaçışlar. Sonra diyez gelir; o olmasa bir adres parçası başlatır ve ilk onaltılık renginizden sonrasını keser. Sonra bir HTML özniteliğinden dışarı taşan açılı ayraçlar ve değeri saran çift tırnak.
background-image'ım hiç görünmüyor. Neden?
Neredeyse her zaman kaçışlanmamış bir diyez yüzünden. Kaçışlanmamış bir data URI içindeki #c33 dolgusu adresi diyezde bitirir; tarayıcı kesilmiş bir belge ister, kullanılabilir hiçbir şey alamaz ve hiçbir şey göstermez - üstelik konsolda hata da vermez, çünkü CSS açısından kural kusursuz biçimde geçerliydi.
currentColor bir data URI'de neden çalışmayı bırakıyor?
Çünkü data URI ayrı bir belgedir. currentColor, SVG'nin içinde bulunduğu öğenin hesaplanmış color değerine göre çözümlenir; görsel olarak yüklenmiş bir SVG'nin böyle bir öğesi yoktur - sayfanızın ağacının parçası değildir. Başlangıç değerine düşer, o da siyahtır.
mask-image çözümü nedir?
SVG'yi bir resim olarak değil, bir şablon olarak kullanırsınız. background-color'ı currentColor yapın ki öğe devraldığı metin rengiyle boyansın, sonra data URI'nizle mask-image kullanın ki yalnızca çizimin biçimi görünsün. Safari için yanına -webkit-mask-image de ekleyin.
CSS'te onun yerine base64 mü kullanmalıyım?
Nadiren. Base64 aynı görseli stil sayfasının içinde yaklaşık beşte bir büyütür ve çok daha kötü sıkışır, çünkü gzip'in gözünde gürültüye benzer. Ona ancak bir derleme aracı ya da içerik yönetim sistemi yüzde kodlu biçimi reddettiğinde başvurmaya değer; bu sayfanın ikisini de sunmasının nedeni budur.
url() değerinin çevresinde tek tırnak kullanabilir miyim?
Buradaki çıktıyla kullanamazsınız ve bu bilinçlidir. SVG içindeki öznitelik sınırlayıcıları kaçışlanmalarına gerek kalmasın diye kesme işaretine çevrilir; boyut kazancının çoğu buradan gelir. Bu da çift tırnağı tek güvenli sarmalayıcı yapar - bir kesme işareti değeri erkenden bitirirdi.
Bu, bir CSS özel özelliğinde çalışır mı?
Evet. url("…") değerinin tamamını bir özel özelliğe atayın ve gerektiği yerde ona gönderme yapın; bu, uzun bir data URI'yi bir kuralın ortasından uzak tutmanın derli toplu bir yoludur. Özel özellikler değeri bir simge dizisi olarak alır, dolayısıyla buradaki kaçışlama zaten doğrudur.
Bir stil sayfası için ne kadarı fazla büyük?
Panelin uyardığı yer olan 4 KB dolayında SVG kaynağı. CSS'teki bir data URI, kural hiç eşleşmese bile o stil sayfasını yükleyen her ziyaretçi tarafından indirilir ve ayrıca önbelleğe alınamaz. O eşiğin altında genellikle fazladan bir isteği yener; üstünde genellikle yenmez.
Bütün bir çizimi stil sayfasına koyabilir miyim?
Koyabilirsiniz, ama koymamalısınız. Çizimler onlarca kilobayta ulaşır ve o baytların her biri, kural hiç uygulanmasa bile stil sayfasını yükleyen herkes tarafından indirilir. Data URI'ler simgeler ve küçük süsleyici biçimler içindir; gerçek ayrıntısı olan her şeyin yeri kendi dosyasıdır.
Tarayıcı satır içine alınmış görseli önbelleğe alır mı?
Yalnızca onu içeren stil sayfasının parçası olarak; takas budur. Ayrı bir önbellek girdisi ve ayrı bir istek yoktur, dolayısıyla ilk ziyaret daha hızlıdır ve stil sayfasındaki sonraki her değişiklik görseli de birlikte yeniden indirir. Her sayfada kullanılan bir simge için bu genellikle iyi bir anlaşmadır.
Bir sunucuya bir şey gönderiliyor mu?
Hayır. Kaçışlama tarayıcınızda çalışır; dosya cihazınızdan hiç çıkmaz, hiç saklanmaz ve bizim tarafımızdan hiç görülmez. Bu aynı zamanda beklenecek bir şeyin olmadığı anlamına gelir - parçacıklar dosya okunduğu anda belirir.
Şunlara da ihtiyacınız olabilir
Bir şey çalışmıyor mu? Hata bildir