İş başına en fazla 200 görsel işleyin — ayarlarınızı bir kez yapın, hepsini çalıştırın.
Her küçük simge için ek HTTP isteklerinin web sitenizi yavaşlatmasından bıktınız mı? SVG'den Veri URI'sine dönüştürücümüz çözüm sunuyor. Bu araç, SVG görsellerini doğrudan HTML veya CSS'inize gömmeyi sağlayarak ayrı dosya isteklerini ortadan kaldırır ve sayfa oluşturma hızınızı artırmaya yardımcı olur. SVG kodunuzu kompakt bir base64 veri URI'sine dönüştürerek varlıklarınızı düzene sokabilir ve saniyeler içinde genel site performansını iyileştirebilirsiniz.
SVG'den Veri URI'sine Dönüştürücümüz Nasıl Çalışır
Süreç son derece basittir. Tam SVG kodunuzu—<svg> ile başlayıp </svg> ile biten—giriş kutusuna yapıştırın ve dönüştür düğmesine tıklayın. Aracımız kodu tarayıcınızda anında işleyerek base64 dizesine kodlar. Ardından bu dizeyi doğrudan kullanım için doğru formatta sarar ve CSS background-image özelliğinize veya bir HTML <img> etiketinin src niteliğine kopyalamaya hazır parçacıklar sunar. Karmaşık bir kurulum yok; basit bir kopyala-yapıştır işlemi.
SVG Veri URI'si Ne Zaman Kullanılmalı
SVG'leri veri URI'si olarak gömmek, sitenizde tekrar tekrar kullanılan küçük, basit simgeler ve grafikler (logolar, madde işaretleri veya kullanıcı arayüzü öğeleri gibi) için idealdir. Temel fayda, sunucu isteklerinin azaltılmasıdır; bu, özellikle mobil cihazlarda sitenizin yüklenme hızını önemli ölçüde artırabilir. Ancak bu yöntem, büyük veya çok karmaşık SVG'ler için uygun değildir. Base64 kodlaması dosya boyutunu yaklaşık %33 artırdığından, büyük bir SVG'yi gömmek CSS veya HTML dosyanızı şişirebilir ve performans avantajlarını ortadan kaldırabilir. Daha karmaşık vektör işlemleri için eksiksiz SVG vektör araçları paketimizi keşfedin.
En İyi Sonuçlar İçin İpuçları
Bu teknikten en iyi şekilde yararlanmak için SVG'nizi dönüştürmeden önce her zaman optimize edin. Daha küçük, daha temiz bir SVG dosyası, daha kısa ve daha verimli bir veri URI'si sağlar. Gereksiz verileri kaldırmak ve boyutunu en aza indirmek için kodunuzu öncelikle SVG Optimize Edici aracımızdan geçirmenizi şiddetle tavsiye ederiz. Ayrıca, bir SVG veri URI'si olarak gömüldüğünde, iç parçalarını harici CSS ile biçimlendiremeyeceğinizi unutmayın. Bu açıdan bir PNG veya JPEG gibi davranır. Dinamik biçimlendirme gerektiren grafikler için harici bir .svg dosyasına bağlantı vermek hâlâ daha iyi bir yaklaşımdır. SVG listelerimizde ilham ve kullanıma hazır grafikler bulabilirsiniz.
Sıkça sorulan sorular
SVG veri URI'si nedir?
SVG veri URI'si, bir SVG görüntüsünü temsil eden ve base64 formatında kodlanmış bir metin dizisidir. Bu, görüntüyü ayrı bir dosyaya ihtiyaç duymadan doğrudan HTML veya CSS'ye yerleştirmenize olanak tanır.
SVG'yi gömmek mi yoksa <img> etiketi kullanmak mı daha iyidir?
Küçük simgeler için SVG'yi veri URI'si olarak gömmek, HTTP isteklerini azaltarak ilk sayfa yüklenmesini iyileştirir. Daha büyük ve karmaşık SVG'ler için ise, bir .svg dosyasına bağlantı veren standart bir <img> etiketi kullanmak önbellekleme açısından daha iyidir.
How do I use a base64 SVG in CSS?
You can use a base64-encoded SVG in CSS by setting it as the value of a `background-image` property. The format is `url('data:image/svg+xml;base64,...')`, where the dots are your encoded string.
SVG veri URI'm neden bu kadar uzun?
Base64 kodlaması, orijinal dosya boyutunu yaklaşık %33 oranında artırır. Daha kısa bir veri URI'si elde etmek için, gereksiz karakterleri ve yorumları kaldırarak SVG kodunuzu önce küçültmelisiniz.
Bir SVG'yi veri URI'si olarak gömülü şekilde stilleyebilir miyim?
Hayır, bir veri URI'si SVG'nin iç yollarını web sayfanızdaki harici CSS kullanarak stilleyemezsiniz. Bu bağlamda tarayıcı, onu PNG gibi statik bir raster görüntü olarak ele alır.
SVG veri URI'leri SEO için kötü mü?
Hayır, doğası gereği SEO için kötü değildir. Küçük simgeler için doğru kullanıldığında sayfa hızını artırabilir, bu da olumlu bir sıralama faktörüdür. HTML/CSS ayrıştırmasını yavaşlatabilecek büyük görseller için kullanmaktan kaçının.
Base64 ve URL kodlamalı SVG'ler arasındaki fark nedir?
Her ikisi de SVG'leri yerleştirme yöntemleridir. Base64, her türlü veri için uygun bir ikili-metin kodlama şemasıdır; URL kodlaması (veya yüzde kodlaması) ise SVG'nin XML'inin bir URL dizesi içinde güvenle kullanılmasını sağlar.
Bu araç SVG verilerimi saklıyor mu?
Hayır, aracımız tamamen tarayıcınız içinde çalışır. SVG kodunuz asla sunucularımıza yüklenmez, böylece verilerinizin gizliliği korunur.
Hakkında SVG'den CSS Veri URI'sine
SVG'den CSS Veri URI'sine Wallpapers.com'dan ücretsiz bir çevrimiçi araçtır ve tamamen tarayıcınızda çalışır — kurulum yok, filigran yok, ilk deneme için e-posta kaydı yok.
SVG'yi satır içi CSS / HTML yerleştirme için base64 veri URI'sine kodlayın.
Nasıl kullanılır SVG'den CSS Veri URI'sine
- Görselini yükleme alanına sürükle (tekli veya toplu — üstteki Toplu seçeneğini aç).
- Aracın sunduğu ayarları seç (boyut, biçim, kalite).
- Çalıştır'a tıkla. Sonuç otomatik indirilir — manuel kaydetme adımı yok.
Ne zaman kullanılır
Yaygın kullanım alanları şunlardır:
görselleri web yüklemesi, e-ticaret listeleri, biçim kısıtlamaları olan sosyal medya platformları için hazırlama ve dosyaları bir cihaz veya uygulamadan diğerine dönüştürme.
Free vs Premium
Her ziyaretçi ücretsiz bir deneme hakkı alır; giriş yapmış ücretsiz kullanıcılar daha yüksek günlük kota alır. Abone ol
Premium
sınırsız çalıştırma, iş başına 200 görsele kadar toplu işleme, öncelikli sıra ve reklamsız gezinme için.
İlgili araçlar
Biraz farklı bir şey mi arıyorsun? Dene
SVG'den PNG'ye Dönüştürücü
,
SVG'den JPG'ye Dönüştürücü
veya
SVG'den WebP'ye Dönüştürücü
— or browse all
SVG / Vektör araçlar.
