SVG'yi CSS arka planları ve maskeler için data URI'ye kodlayın; Base64'ten küçük.
İşaretlemeyi simge dosyanızdan ya da tasarım aracınızdan doğrudan kopyalayın. Yorumlar, XML bildirimi ve fazladan boşluk temizlenir; ad alanı eksikse eklenir.
URL kodlama daha küçüktür ve işaretlemeyi okunur bırakır; yani stil dosyanızda renkleri hâlâ görüp değiştirebilirsiniz. Base64, buna ihtiyaç duyan nadir araçlar için var.
Bir background-image kuralı, webkit önekli mask-image kuralı ya da çıplak data URI alın. Önizleme, sonucu gerçek bir CSS arka planı olarak gösterir.
SVG için genelde daha küçüktür, çoğu zaman beşte bir veya daha fazla; ayrıca işaretleme stil dosyasında okunur kalır, böylece simgenin ne olduğunu görüp bir dolguyu yeniden kodlamadan değiştirebilirsiniz.
Çünkü url() içinde HTML'inizin parçası olarak değil, bağımsız bir belge olarak ayrıştırılır. Ad alanı olmadan tarayıcı onu çizmez. Araç eksikse ekler.
Kaçırılmamış bir diyez parça tanımlayıcısı başlatır ve URL'yi keser; yani #ec4393 gibi bir dolgu rengi tüm değeri bozardı. %23 olur.
Arka plan görselinde doğrudan hayır, çünkü renk işaretlemeye gömülüdür. Bunun yerine mask-image kullanın ve ögede background-color ayarlayın; böylece rengi CSS kontrol eder.
Büyük veya karmaşık illüstrasyonlarda ve birçok stil dosyasında tekrar kullanılan her şeyde. Gömmek her seferinde yükü çoğaltır ve ayrı önbelleklenemez.
Evet, data URI bir img src olarak çalışır. CSS parçaları daha yaygın kullanım olduğu için sunulur, ama ham URI hemen orada.
Hayır. Kodlama tarayıcınızda olur; yayınlanmamış simgeler ve müşteri varlıkları makinenizde kalır.
Evet, tamamen ücretsiz ve üyeliksiz.
Görseli CSS, HTML veya Markdown içine gömebileceğiniz bir data URI'ye çevirin; dosya yüklenmeden.
Aracı AçNoktaları sürükleyerek clip-path şekilleri çizin ya da circle, ellipse ve inset kullanın.
Aracı AçCSS'i küçültün veya düzenleyin; string ve data URI'ler bozulmadan, ne kadar küçüldüğünü görerek.
Aracı Aç