Verilerim bir sunucuya gönderiliyor mu?

Hayır. SVG optimizasyonu, kodlama ve dönüştürme işlemleri tamamen tarayıcınızda gerçekleştirilir. Hiçbir dosya veya veri asla harici sunuculara gönderilmez.

URL Kodlaması mı yoksa Base64 mü seçmeliyim?

Genellikle "URL Kodlaması" önerilir. SVG'ler metin tabanlı olduğundan, sunucunun Gzip/Brotli sıkıştırması kullandığı ortamlarda, URL Kodlaması Base64'e (dosya boyutunu yaklaşık %33 artıran) kıyasla daha küçük bir son aktarım boyutuyla sonuçlanacaktır.

Optimizasyon SVG'nin görünümünü değiştirir mi?

Hayır, yalnızca görsel görünümü etkilemeyen gereksiz veriler (yorumlar, düzenleyiciye özgü meta etiketler, etiketleri vb.) kaldırılır, bu nedenle oluşturma sonucu tamamen aynı kalır.

Peki ya SVG harici resimler içeriyorsa?

Harici olarak başvurulan (URL bağlantıları) resimler otomatik olarak Data URI'lerine dönüştürülmez, bu nedenle düzgün görüntülenmeyebilirler. Bu araç, tamamen SVG'nin kendi içinde bulunan vektör verileri için tasarlanmıştır.

🖼️

svg-css-background-generator,

SVG Arka Plan Deseni CSS Oluşturucu

SVG dosyalarını anında CSS background-image için Data URI'lerine dönüştürün.
Gereksiz etiketleri kaldırarak optimize eder, HTTP isteklerini azaltmaya yardımcı olur.

🔒

Tarayıcı tabanlı

Dosya yüklemesi olmadan güvenli

⚡

Gerçek zamanlı

Önizlemede anında onay

🧹

Otomatik optimize

Daha küçük boyut için gereksiz etiketleri kaldırır

SVG Kodu Girin

SVG dosyasını buraya bırakın

SVG'yi optimize et (Yorumları ve gereksiz etiketleri kaldır)

Kodlama Modu:

about,

SVG Arka Plan Deseni CSS Oluşturucu Hakkında

"SVG Arka Plan Deseni CSS Oluşturucu", SVG vektör görüntü dosyalarının kodunu CSS background-image özelliğiyle doğrudan yüklenebilecek bir biçime (Data URI) dönüştüren ücretsiz bir geliştirici aracıdır.

Bir görüntü dosyasını bir sunucuya yükleyip ona bir URL ile başvurmanın olağan yönteminin aksine, görüntü verilerini doğrudan CSS dosyasına gömmek ek HTTP isteklerini azaltarak web sayfasının yüklenme sürelerinin hızlanmasına (PageSpeed) katkıda bulunur.

Bu araç, dönüştürme işlemi sırasında gereksiz yorumları ve meta etiketleri otomatik olarak kaldırır (optimize eder), böylece gömmeden kaynaklanan dosya boyutu şişkinliğini en aza indirir. Tüm işlemler tarayıcınızda güvenli bir şekilde yapılır.

how to,

SVG CSS Background Generator Nasıl Kullanılır

ADIM 1

SVG Kodunu Girin

SVG kodunuzu (<svg>...</svg>) doğrudan giriş alanına yapıştırın veya bilgisayarınızdan bir SVG dosyasını sürükleyip bırakın.

ADIM 2

Önizlemeyi Kontrol Edin ve Ayarlayın

Otomatik olarak bir önizleme oluşturulur. Arka plan rengini, boyutunu ve yineleme ayarlarını gerektiği gibi ayarlayın.

ADIM 3

CSS Kodunu Kopyalayın

Projenizde kullanmak için çıktı alanından background-image: url("data:image/..."); içeren sonuç CSS kodunu kopyalayın.

glossary,

SVG CSS Background Generator Sözlüğü

Data URI (Veri URI Şeması): Resimler gibi dosya verilerini bir dizeye dönüştürmek ve bir URL kullanmak yerine doğrudan yazmak için kullanılan bir yöntem. data:image/svg+xml,... formatını alır.
URL Kodlaması: Bir SVG'deki özel karakterleri (<, >, # vb.) %3C gibi biçimlere dönüştüren bir biçim. SVG metin tabanlı olduğundan, bu, Base64'e kıyasla daha az dosya boyutu artışına sahip olma eğilimindedir.
Base64: İkili verileri belirli bir kurala göre dizelere (A-Z, a-z, 0-9 vb.) dönüştüren bir format. Dönüştürülen boyut, orijinal boyutun yaklaşık 1,33 katıdır (%33 daha büyük).
SVG Optimizasyonu (SVGO vb.): Illustrator veya Figma'dan dışa aktarılan SVG'ler genellikle düzenleyiciye özgü gereksiz etiketler, satır sonları ve yorumlar içerir. Bu, dosya boyutunu küçültmek için bunları kaldırma işlemidir.

faq,

SVG CSS Background Generator Hakkında Sıkça Sorulan Sorular (SSS)

S.Verilerim bir sunucuya gönderiliyor mu?: Hayır. SVG optimizasyonu, kodlama ve dönüştürme işlemleri tamamen tarayıcınızda gerçekleştirilir. Hiçbir dosya veya veri asla harici sunuculara gönderilmez.
S.URL Kodlaması mı yoksa Base64 mü seçmeliyim?: Genellikle "URL Kodlaması" önerilir. SVG'ler metin tabanlı olduğundan, sunucunun Gzip/Brotli sıkıştırması kullandığı ortamlarda, URL Kodlaması Base64'e (dosya boyutunu zorunlu olarak yaklaşık %33 artıran) kıyasla daha küçük bir son ağ aktarım boyutuyla sonuçlanacaktır.
S.Optimizasyon SVG'nin görünümünü değiştirir mi?: Hayır, yalnızca görsel görünümü etkilemeyen gereksiz veriler (yorumlar, düzenleyiciye özgü meta etiketler, <title> etiketleri vb.) düzenli ifadeler kullanılarak güvenle kaldırılır, bu nedenle oluşturma sonucu tamamen aynı kalır.
S.Peki ya SVG harici resimler içeriyorsa?: Harici resimlere iç referanslar içeren SVG'ler (URL bağlantıları aracılığıyla PNG/JPG gibi) Data URI'lerine dönüştürülse bile düzgün görüntülenmeyebilir. Bu araç, yalnızca yollardan (paths) veya çokgenlerden oluşturulmuş vektör verileriyle kullanılmak üzere tasarlanmıştır.

use cases,

SVG CSS Arka Plan Resimleri için Kullanım Durumları

🏁

Arka Plan Desenleri Oluşturma

Noktalar, çizgiler veya geometrik şekiller gibi kusursuz SVG desenlerini tekrarlamak (döşemek) için idealdir. Çözünürlükten bağımsız olarak keskin bir şekilde oluşturulurlar.

⚡

Performansı Artırma

Arka plan resmi olarak küçük simgeler veya logolar kullanırken, bunları CSS'ye gömmek ayrı resim dosyalarını yüklemek için gereken HTTP isteklerini azaltarak sayfa yükleme sürelerini hızlandırır.

📱

Duyarlı Simgeler

SVG simgelerini CSS'ye liste madde imi işaretleyicileri olarak (::before sözde öğesinde olduğu gibi) gömerek, herhangi bir cihazda keskin bir şekilde çizilirler.

✉️

HTML E-posta Kodlaması

Harici resim yüklemesinin genellikle engellendiği HTML e-postalarında bu, belirli e-posta istemcileri için satır içi süslemeler oluşturmak üzere bir hack olarak kullanılabilir.