Ücretsiz Çevrimiçi SVG CSS ve Data URI Dönüştürücü

SVG ikonlarınızı ve vektörlerinizi CSS koduna (Background veya Mask) veya sıkıştırılmış Data URI'ye dönüştürün. Harici HTTP isteklerini ortadan kaldırarak web sitenizin performansını optimize edin.

SVG'yi Yapıştır

SVG Kaynak Kodu Orijinal Önizleme

CSS Sonucu

Uygulanan Sonuç
Araç Stüdyosu

Bu aracı kendi sitenizde kullanmak ister misiniz?

WordPress, Notion veya kendi siteniz için renkleri ve karanlık modu özelleştirin.

Hemen Başla

Sıkça Sorulan Sorular

Data URI kullanmak mı yoksa harici bir .svg dosyası kullanmak mı daha iyidir?

Kullanım durumuna bağlıdır. Data URI'lar HTTP isteklerini ortadan kaldırır (küçük ikonlar için idealdir), ancak CSS dosya boyutunu artırır. Büyük veya ayrıntı açısından zengin illüstrasyonlar için harici bir dosya tercih edilir.

CSS'e gömülü bir SVG'nin rengini nasıl değiştirebilirim?

En iyi yol 'mask-image' kullanmaktır. SVG'yi bir maske olarak tanımlayarak, :hover durumlarında bile rengini dinamik olarak değiştirmek için 'background-color' kullanabilirsiniz.

Hangi tarayıcılar CSS Maskelerini destekliyor?

Tüm modern tarayıcılar (Chrome, Firefox, Safari, Edge) tam desteğe sahiptir. Eski tarayıcılar için yaygın olarak -webkit- önekleri kullanılır.

Data URI kullanımı SEO'yu etkiler mi?

Evet, olumlu yönde. Sayfayı oluşturmak için gereken istek sayısını azaltarak yükleme süresini (LCP) ve Core Web Vitals puanlarını iyileştirir.

React veya Tailwind gibi frameworklerde kullanabilir miyim?

Kesinlikle! Oluşturulan kodu kopyalayıp .css dosyalarınızda veya hatta Tailwind CSS'de rastgele değerler olarak kullanabilirsiniz.

# Neden SVG'yi CSS Data URI'ye Dönüştürmelisiniz?

Modern web geliştirmede, performansın ve kaynak yüklemesinin optimize edilmesi esastır. İkonları Data URI'lar aracılığıyla doğrudan CSS'e gömmek, gereksiz HTTP isteklerini ortadan kaldırır, gecikmeyi azaltır ve Etkileşim Süresini (TTI) iyileştirir.Bu araç, <svg> vektör kodunu, tarayıcının arka plan resmi veya kırpma maskesi olarak yorumlayabileceği kodlanmış bir metin dizisine dönüştürürken vektörlerin karakteristik özelliği olan sonsuz ölçeklenebilirliği ve keskinliği korur.

# Temel Teknik Avantajlar

  • Sıfır HTTP İsteği: Grafiği .css dosyalarınıza gömerek, tarayıcının ek harici dosyalar indirmesine gerek kalmaz.
  • CSS Maskesi ile Özelleştirme: mask-image tekniğini kullanarak, karmaşık bir vektör ikonunun rengini sadece background-color kullanarak değiştirebilirsiniz.
  • Anında Oluşturma: Kritik görsel kaynaklar stil sayfası indirilir indirilmez hazır olduğundan içerik titremesini (FOUC) önlersiniz.

# CSS Maskeleri vs Arka Planlar

Pek çok geliştirici vektörleri gömmek için sadece background-image kullanır, ancak bunun bir sınırı vardır: SVG rengini CSS'ten dinamik olarak değiştiremezsiniz.Aracımız CSS Maskeleri için kod oluşturmayı destekler. Oluşturulan Data URI ile bir mask-image uygulayarak ikon bir şablon görevi görür ve öğenin background-color özelliğinin son ikon rengini tanımlamasına olanak tanır. Astro, Next.js veya herhangi bir modern framework'te ikonları yönetmenin en profesyonel ve esnek yolu budur.

Bibliyografik Referanslar

Daha fazla araç: Web Geliştirme

Ücretsiz Çevrimiçi JSON Formatlayıcı ve Doğrulayıcı

JSON kodunu formatlamak, doğrulamak ve onarmak için ücretsiz çevrimiçi araç. JSON'u güzelleştirin ve düzenleyin. Sözdizimi hatalarını algılar ve kodun okunabilirliğini artırır.

Aracı Kullan

Piksel Cinsinden En Boy Oranı Hesaplayıcı. Çevrimiçi Oranlar

Grafiklerin bozulmasını önlemek için tam oranı koruyarak yeni görüntü, video ve web tasarım çözünürlüklerini hesaplayın. 16:9, 4:3, 21:9 ve özel formatları destekler.

Aracı Kullan

Yer Tutucu Resim Üreteci. Hızlı Web Mockup'ları Çevrimiçi

Web tasarımlarınız için özel yer tutucu resimler oluşturun. Çözünürlüğü, arka planı, metni ayarlayın ve PNG, WebP veya JPEG olarak anında dışa aktarın.

Aracı Kullan

Çevrimiçi URL Kodlayıcı ve Çözücü

Herhangi bir bağlantıdaki özel karakterleri güvenli formata (Percent-Encoding) dönüştürün veya anında ve yerel olarak orijinal okunabilir durumuna geri döndürün.

Aracı Kullan

Yinelenen CSS Kaldırma Aracı. Stil Sayfalarınızı Birleştirin ve Temizleyin

Yinelenen CSS kodunu temizlemek ve kaldırmak için ücretsiz araç. Gereksiz seçicileri birleştirir, cascade'i korur ve tarayıcıda anında dosya boyutunu küçültür.

Aracı Kullan

CSS Satır İçi HTML Dönüştürücü. Epostaları İçin Satır İçi Işlemci

Stil sayfalarınızı ve CSS sınıflarınızı otomatik olarak satır içi stillerle HTML'ye dönüştürün. E-bültenleri, işlemsel e-postaları ve güvenli web düzeni için ideal.

Aracı Kullan

CSS Özgüleşme Hesaplayıcı Çevrimiçi. Seçici Ağırlık Görselleştiricisi

Herhangi bir CSS seçicinin özgüleşmesini ve tam ağırlığını hesaplayın. Hangi CSS kuralının kaskada galip geldiğini anlamak için görsel araç ve !important kullanımından kaçının.

Aracı Kullan

Online Cron İfadesi Oluşturucu. Çevirmen ve Görselleştirici

Linux Cron ifadeleri oluşturmak için ücretsiz görsel araç. * * * * * ifadesini insan diline çevirir ve sonraki 5 çalışmayı gerçek zamanlı olarak gösterir.

Aracı Kullan

Çevrimiçi Klavye Tuş Kodu Görselleştiricisi. Tuş Kodu İnceleyicisi

Herhangi bir klavye tuşunun event.key, event.code, event.which ve konumunu gerçek zamanlı olarak görmek için ücretsiz çevrimiçi araç. Kullanıma hazır JavaScript kod parçacıkları oluşturur.

Aracı Kullan

LLM Maliyet Hesaplayıcısı. AI Model Fiyatlandırma Tahmincisi

LLM API çağrılarının maliyetini tahmin etmek için ücretsiz çevrimiçi araç. GPT-4o, Claude, Gemini, Llama ve daha fazlasını milyonda tokencik gerçek fiyatlarla karşılaştırın.

Aracı Kullan

Müziksel Tipografi Ölçeği. Modüler Ölçek Hesaplayıcısı

Müziksel oranlarına dayalı modüler ölçekler kullanarak uyumlu görsel hiyerarşiler oluşturmak için ücretsiz çevrimiçi araç. Web tasarımınız için kullanıma hazır CSS değişkenleri oluşturur.

Aracı Kullan

Mobil Mockup Üreticisi App Store İçin. iPhone ve Google Pixel

App Store ve Google Play için profesyonel sunumlar oluşturun. iPhone ve Pixel mockup'ları özel arka planlarla, panoramik düzenlerle ve yüksek çözünürlüklü toplu dışa aktarma.

Aracı Kullan

Çevrimiçi Güvenlik Hash Oluşturucu

MD5, SHA-1, SHA-256 ve SHA-512 karmalarını anında hesaplayın. Geliştiriciler için ücretsiz, özel ve ultra hızlı güvenlik aracı. %100 İstemci Tarafı (Client-Side).

Aracı Kullan

Özel AI Prompt Kütüphanesi

ChatGPT, Midjourney ve Claude promptlarınızı özel olarak düzenleyin, etiketleyin ve kaydedin. Kendi prompt bankanız localStorage'da.

Aracı Kullan

Online Renk Dönüştürücü RGB HEX ve HSL

RGB, HEX ve HSL arasında anında renk dönüşümü yapın. Tamamlayıcı renk uyumları oluşturun ve WCAG kontrastını analiz edin. %100 istemci tarafı ve özel.

Aracı Kullan

Görsel Okunabilirlik Hesaplayıcısı WCAG ve APCA

APCA (WCAG 3.0) ile tasarımlarınızın gerçek kontrastını kontrol edin. Yazı tipi ağırlığı ve boyutunun gerçek okunabilirliği nasıl etkilediğini analiz edin.

Aracı Kullan

Online SVG Temizleyici

Figma, Adobe Illustrator veya Inkscape'ten dışa aktarılan SVG dosyalarını optimize edin ve temizleyin. Meta verileri, gereksiz öznitelikleri ve boş grupları kaldırarak üretim ortamına hazır bir SVG elde edin.

Aracı Kullan

Google Analytics için UTM Parametre Oluşturucu

Dijital pazarlama kampanyalarınız için hassas izleme bağlantıları oluşturun. Google Analytics ve diğer analiz araçları için optimize edilmiştir.

Aracı Kullan

URL İzleme Temizleyicisi: UTM, FBCLID ve GCLID Kaldırın

URL'lerinizden izleme ve reklam parametrelerini otomatik olarak kaldırın. Temiz bağlantıları paylaşın ve dijital gizliliğinizi anında koruyun.

Aracı Kullan

Çevrimiçi SSL/TLS Sertifika İnceleme PEM ve CRT Dosyalarını Görüntüle

SSL sertifika dosyalarını (.pem, .crt, .der) yerel olarak analiz edin. Sona erme tarihlerini, yayımcıları, konuları ve SHA-256 parmak izlerini kontrol edin ve verileriniz tarayıcınızdan çıkmaz.

Aracı Kullan

Security.txt Oluşturucu RFC 9116

Güvenlik açığı raporlamayı kolaylaştırmak ve uluslararası web güvenliği standartlarına uyum sağlamak için profesyonel security.txt dosyası oluşturun.

Aracı Kullan

Veri Zamanı Hesaplayıcı: Web Hızının Etkisi

Kullanıcılarınızın 3G, 4G ve 5G bağlantılarında web sitenizin yüklenmesini beklerken ne kadar yaşam süresi kaybettiğini keşfedin. Sitenizin ağırlığının gerçek etkisini hesaplayın.

Aracı Kullan

Excel ve CSV'den HTML Tablosuna Dönüştürücü Kod Oluşturucu

Excel veya CSV verilerinizi anında temiz, semantik HTML tablolarına dönüştürün. Geliştiriciler ve içerik oluşturucular için ücretsiz araç.

Aracı Kullan