0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0
SVG'den CSS'ye
SVG kodunu kutudan çıkmış bir veri URI'sine CSS özelliği olarak dönüştürdüm: arka plan görüntüsü, maske-görüntü veya CSS değişkeni. URL ve Base64 kodlamasını destekler.
Format
CSS Özelliği
Seçenekler
SVG Kodu
Replikler:0Karakterler:0

Nasıl çalışır

Bir SVG'nin kodunu CSS'te kullanıma hazır bir Data URI'ye dönüştürür; böylece simgeyi ayrı bir dosya veya ek bir HTTP isteği olmadan doğrudan stil sayfasına gömebilirsiniz.

İki kodlama sunar: URL-encoded (percent-encoding), daha kısa ve okunabilir, SVG için önerilir; ve Base64, biraz daha uzun ama evrensel olarak uyumlu.

Sonuç, background-image, mask-image (simgeyi CSS ile renklendirmek için) veya yeniden kullanılabilir bir CSS değişkeni olarak üretilebilir. SVG'yi önceden küçültmek boyutu daha da azaltır.

Örnekler

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">…</svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'…%3C/svg%3E");URL kodlaması SVG'yi neredeyse okunabilir tutar ve genellikle Base64'ten daha kısadır.
-webkit-mask-image: url("data:image/svg+xml,…"); mask-image: url("data:image/svg+xml,…");mask-image olarak, simgenin rengi öğenin background-color özelliğiyle denetlenir.

Kullanım senaryoları

  • Sayfaya HTTP istekleri eklemeden SVG simgelerini background-image olarak gömmek.
  • Bir SVG'yi maske (mask-image) olarak kullanıp temaya veya duruma göre CSS'ten yeniden renklendirmek.
  • Bir simgeyi bir CSS değişkeninde saklayıp birden çok seçicide yeniden kullanmak.
  • Gömmeden önce SVG'yi küçülterek satır içi simgelerin ağırlığını azaltmak.

Sık sorulan sorular

URL-encoded mi yoksa Base64 mü daha iyi?

SVG için URL-encoded genellikle en iyi seçenektir: SVG metin olduğu için daha kısa ve okunabilir bir Data URI üretir. Base64 azami uyumluluk sağlar ama boyutu yaklaşık %33 artırır.

Neden background-image yerine mask-image kullanılır?

background-image ile simge özgün renklerini korur. mask-image ile SVG yalnızca şekli tanımlar ve rengi CSS sağlar; temayla değişen tek renkli simgeler için idealdir.

Küçültme seçeneği ne yapar?

SVG'yi kodlamadan önce yorumları kaldırır ve boşlukları daraltır; böylece son Data URI, çizimi değiştirmeden daha küçük olur.

SVG'm bir sunucuya yükleniyor mu?

Hayır. Dönüştürme tamamen tarayıcınızda yapılır; SVG bilgisayarınızdan hiç ayrılmaz.

Ayrıca bakınız