Softonic

SVG'den CSS'ye Dönüştürücü

Adım 1 / 2
Sonraki

Herhangi bir <svg> parçacığını yapıştırın ve SVG’yi bir data URI olarak gömen bir background-image bildirimi geri alın. Bu, fazladan bir HTTP isteğinden kaçınır, simgeyi veya deseni CSS’nizin denetiminde tutar ve CDN yeniden yazımlarına dayanır. Kodlama, base64 yerine rawurlencode yolunu izler; bu da metin ağırlıklı SVG’ler için daha küçük ve daha sonra hata ayıklamanız gerekirse daha okunaklıdır.

SVG bir CSS arka planına nasıl dönüştürülür

  1. 1

    SVG'yi yapıştırın

    Tam `<svg>...</svg>` işaretlemesini, SVG'niz bir tane taşıyorsa xmlns özniteliği de dahil olmak üzere ekleyin.

  2. 2

    Dönüştür'e tıklayın

    Araç, SVG'yi URL biçiminde kodlar ve onu bir `data:image/svg+xml,...` URI'sinin içine sarar.

  3. 3

    CSS'yi kopyalayın

    Yapıştırmaya hazır üç satır CSS elde edersiniz: `background-image`, `background-repeat` ve `background-size`.

  4. 4

    Gerektiği gibi ayarlayın

    Bir simge mi yoksa desen mi olduğuna göre `background-size` değerini `cover`, `100px 100px` veya kendi değerinizle değiştirin.

Neden base64 yerine rawurlencode

Base64 bir SVG’yi kabaca %33 büyütür. SVG düz metin olduğundan, URL kodlaması baytların çoğunu olduğu gibi bırakır ve yalnızca bir URI içinde anlam taşıyan karakterleri kaçışla işler: <, >, #, boşluklar ve birkaç tanesi daha. Bu genellikle base64 eşdeğerinden %20-40 daha kısa bir dize üretir ve yine de her modern tarayıcıda doğru şekilde ayrıştırılır.

Bir SVG ne zaman gömülür, ne zaman dosyaya bağlanır

Durum data URI olarak göm Harici .svg dosyası
Sayfa başına bir kez kullanılan küçük simge İyi seçim Uygun
Site genelinde kullanılan 2 KB altı desen İyi seçim O da uygun, önbelleğe alınır
30+ şekilden oluşan simge seti Kaçının Bir sprite kullanın
JS ile canlandıracağınız veya biçimlendireceğiniz SVG Kaçının HTML içine gömün
E-posta HTML’i Göm veya atla Harici olan sıklıkla engellenir

Sık yapılan hatalar

  • Bir fill="#..." içindeki # kaçırılmalıdır. Kodlayıcı bunu sizin için yapar.
  • Bir <?xml ...?> ön bildirimi eklemeyin; yapıştırmadan önce kaldırın.
  • SVG içindeki tırnak işaretleri, CSS dizenizin dıştaki tırnak işaretleriyle uyuşmalıdır. Üretilen kural dışta çift tırnak kullanır, bu yüzden SVG içinde tek tırnak en güvenlisidir.
  • SVG <script> blokları içeriyorsa, tarayıcılar bunları bir background-image içinde çalıştırmayı reddeder; bu beklenen ve kasıtlı bir durumdur.

Sık Sorulan Sorular

data: URI’lerini ve SVG’yi destekleyen her tarayıcıda, yani son on yılın her büyük tarayıcısında. IE 11 de bunu destekler, ancak orada data URL’nin base64 olması gerekir.

background-size değerini açıkça belirtin. Bunu yapmazsanız tarayıcı, SVG’nin öğenizle eşleşmeyebilecek kendi viewBox değerine geri döner.

Olduğu gibi değil: CSS değişkenleri data URI’nin dışında değerlendirilir. Rengi sabit kodlayın ya da mask-image ve background-color ile bir maskeleme tekniği kullanın.

Kabaca kural: 4 KB altı sorunsuz, 4-10 KB arası ölçmeye değer, 10 KB üzeri neredeyse her zaman önbelleğe alınabilen harici bir dosya olarak daha iyi başarım verir.

Yapıştırdığınız işaretleme, URL biçiminde kodlanıp CSS kuralı olarak döndürülmek üzere sunucumuza gönderilir. Yalnızca o kuralı oluşturmak için işlenir ve saklanmaz veya paylaşılmaz.

İlgili Araçlar

ASCII Tablosu Referansı

NUL, LF ve DEL dahil her kod için ondalık, onaltılık, sekizlik ve ikili değerlerle HTML sayısal karakter başvurusu gösterimini sunan tam ASCII tablosu.

HTML Karakter Referansı

HTML varlıklarının aranabilir listesi; adlandırılmış ve sayısal kodlarıyla birlikte özel karakter ve semboller için tek tıkla kopyalama.

FPS Sayacı

requestAnimationFrame ile tarayıcı FPS değerini ölçün: yumuşatma, en düşük ve en yüksek kare hızı, uyarı eşiği ve isteğe bağlı grafik. Yerel çalışır, yükleme ve API yoktur.

Klavye kısayolları başvurusu

macOS, Windows ve Linux’ta VS Code, Chrome ve GNU Readline kullanan Bash için belgelenmiş varsayılan kısayolları arayın.

Dosya Boyutu Dönüştürücü

Bayt, KB, MB, GB, TB ve ikili IEC birimleri (KiB, MiB, GiB, TiB) arasında, ondalık ve ikiliyi dilediğiniz gibi birleştirerek dönüşüm yapın.

E-posta Doğrulayıcı

Bir e-posta adresini doğrulayın: RFC 5322 sözdizimi kontrolü, canlı MX kaydı sorgulama, ayrıca yerel kısım, alan adı ve uzunluk bilgileri. Hiçbir e-posta gönderilmez.

Araç diğer dillerde mevcuttur