Skip to main content
FreeToolkit .ai

SVG'yi CSS Arka Planına Dönüştürücü Veri URI kodlaması kullanarak SVG kodunu bir CSS arka-plan-görüntüsü olarak kodlayın.

SVG'yi CSS Arka Planına Dönüştür illustration
🎨

SVG'yi CSS Arka Planına Dönüştür

Veri URI kodlaması kullanarak SVG kodunu bir CSS arka-plan-görüntüsü olarak kodlayın.

1

SVG kodunu yapıştır

Giriş alanına SVG markup'nizi girin veya yapıştırın.

2

Arka plan özelliklerini ayarla

Arka plan boyutu, tekrarlama ve konum ayarlarını yapılandırın.

3

CSS'yi kopyala

SVG'yi arka plan olarak önizleyin ve CSS kodunu kopyalayın.

Loading tool...

What Is SVG'yi CSS Arka Planına Dönüştür?

SVG'yi CSS Arka Plan aracı, SVG kodunu veri URI kodlaması kullanarak bir CSS arka-plan-görseli olarak dönüştürür. Bu teknik, ayrı resim dosyaları veya HTTP istekleri gerektirmeden SVG'yi doğrudan CSS'nize gömer. Sadece SVG kodunuzu yapıştırın, arka-plan-boyutu, arka-plan-tekrarı ve arka-plan-konumu yapılandırın ve araç, kodlanmış CSS'i oluşturur. Veri URI kodlaması, özel karakterleri (mesela <, >, #) URL güvenli eşdeğerleriyle değiştirir, böylece SVG'nin bir CSS url() işlevinde güvenle gömülmesi sağlanır. Ön izleme, SVG'yi örnek bir öğe üzerinde arka plan olarak uygulamayı gösterir. Bu yaklaşım, dış dosya bağımlılıkları olmadan CSS'nize dahil etmek istediğiniz küçük simgeler, desenler ve süsleme öğeleri için idealdir.

Why Use SVG'yi CSS Arka Planına Dönüştür?

  • Ayrı resim dosyalarına gerek yok - SVG doğrudan CSS'ye gömülü
  • Küçük SVG varlıkları için HTTP isteklerini ortadan kaldırır
  • Arka plan boyutu, tekrarlama ve konum ayarları yapılandırılabilir
  • Canlı önizleme, SVG'yi bir CSS arka planı olarak gösterir

Common Use Cases

İcon Arka Planları

Küçük ikon SVG'lerini düğmeler ve liste işaretleri için doğrudan CSS'ye gömün.

Desen Arka Planları

Tekrarlayan SVG desenlerini resim dosyaları olmadan CSS arka planları olarak kodlayın.

Süsleme Öğeleri

SVG süslemelerini pseudo-öğelere CSS arka planları aracılığıyla ekleyin.

E-posta Şablonları

Harici resimlerin engellenebileceği e-posta şablonlarında SVG grafiklerini CSS'ye gömün.

Technical Guide

SVG veri URI'leri aşağıdaki formatı kullanır: url("data:image/svg+xml,<kodlanmış-svg>"). SVG içeriği, özel karakterlerin değiştirilmesi yoluyla URL'ye dönüştürülür: < %3C olur, > %3E olur, # %23 olur ve tırnak işaretleri tek tırnak işaretiyle değiştirilir. Bu kodlama, okunabilirliği korur ve genellikle daha küçük olduğu için SVG için Base64'ten daha verimlidir. Arka-plan-görseli özelliği veri URI'sini kabul eder ve standart arka plan özellikleri (boyut, tekrarlama, konum) işlenmeyi kontrol eder. Büyük SVG'ler için, büyük veri URI'leri CSS dosya boyutunu artırır ve bağımsız olarak önbelleğe alınamaz, bu nedenle dış dosyaları kullanmayı düşünün. Arka-plan-boyutu: contain, SVG'yi öğenin içinde koruyarak oranını korur. Arka-plan-boyutu: cover, öğeyi doldurur ve potansiyel olarak SVG'yi kırpabilir. Belirli piksel veya yüzde değerleri kesin kontrol sağlar.

Tips & Best Practices

  • 1
    SVG için daha küçük dosya boyutu elde etmek üzere URL kodlamasını (base64 değil) kullanın
  • 2
    Kodlanmış boyutu en aza indirmek için gereksiz SVG özniteliklerini kaldırın
  • 3
    SVG'leri küçültün - büyük veri URI'leri CSS'yi şişirir ve ayrı olarak önbelleğe alınamaz
  • 4
    CSS'de kaçış sorunlarını önlemek için SVG'de tek tırnak işareti kullanın

Related Tools

CSS Arka Plan Deseni - free online tool

CSS Arka Plan Deseni

Çizgiler, satranç tahtası, noktalar ve daha fazlası dahil olmak üzere tekrarlanan CSS arka plan desenleri oluşturun.

🎨 CSS & Design
İcon Arama - free online tool

İcon Arama

Boyut, renk ve çizgi kalınlığı ayarlanabilen açık kaynaklı SVG ikonlarını arayın ve özelleştirin.

🎨 CSS & Design
CSS Değişken Oluşturucu - free online tool

CSS Değişken Oluşturucu

Renkler, boşluklar ve tipografi için özel CSS özelliklerini (değişkenleri) oluşturun.

🎨 CSS & Design
SVG Desen Jeneratörü - free online tool

SVG Desen Jeneratörü

CSS arka planları için çeşitli şekillerle SVG tabanlı tekrar eden desenler oluşturun.

🎨 CSS & Design

Frequently Asked Questions

Q SVG için veri URI kodlaması base64'ten daha iyi midir?
Evet, URL ile kodlanmış SVG genellikle base64'ten küçüktür ve CSS'de insan tarafından okunabilir.
Q Herhangi bir SVG'yi kullanabilir miyim?
Evet, geçerli herhangi bir SVG kodu kodlanabilir. En iyi boyut için gereksiz öznitelikleri ve boşlukları kaldırın.
Q Bu tüm tarayıcılarda çalışıyor mu?
Evet, CSS arka planlarında SVG veri URI'leri tüm modern tarayıcılarda desteklenir.
Q Büyük SVG'ler için ne yapmalıyım?
Büyük veya karmaşık SVG'ler için dışa aktarılmış SVG dosyalarını kullanın. Veri URI'leri CSS'den bağımsız olarak önbelleğe alınamaz.
Q Veri URI SVG'lerini <img> etiketlerinde kullanabilir miyim?
Evet, aynı veri URI formatı img src öznitelikleri ve CSS background-image'de çalışır.

About This Tool

SVG'yi CSS Arka Planına Dönüştür is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.