SVG'den CSS'e Dönüştürücü
SVG kodunu CSS background-image veri URI'sine dönüştürür. URL kodlu ve Base64 formatlarını destekler.
Bu araç hakkında
SVG to CSS Converter, SVG kodunu CSS background-image özelliklerinde kullanılmak üzere veri URI biçimine dönüştürerek ayrı görüntü dosyaları veya HTTP isteklerine olan ihtiyacı ortadan kaldırır. SVG verilerini doğrudan stil sayfalarınıza gömerek dış bağımlılıkları azaltır, sayfa yükleme performansını iyileştirir ve varlık yönetimini basitleştirirsiniz. Araç hem URL kodlamalı hem de Base64 kodlama biçimlerini destekler ve her biri performans öncelikleriniz ve okunabilirlik tercihlerinize bağlı olarak farklı avantajlar sağlar.
SVG'yi CSS'ye dönüştürmek için SVG kodunuzu giriş alanına yapıştırın, tercih ettiğiniz kodlama yöntemini seçin ve Dönüştür düğmesini tıklayın. URL kodlamalı biçim daha kısa çıkış üretir ve okunması ve hata ayıklaması daha kolaydır, Base64 ise gzip'te daha iyi sıkıştırılan daha kompakt bir temsil oluşturur. Araç, CSS çıktısını ve işlenen SVG'nin canlı önizlemesini anında gösterir ve dönüştürmeyi stil sayfalarınıza kopyalamadan önce doğrulamaya yardımcı olur.
Bu yaklaşım, web uygulamalarına gömülü küçük simgeler, logolar ve basit grafikler için özellikle faydalıdır. SVG verilerini CSS içinde tutarak, önbellek geçersiz kılma sorunlarından kaçınır, toplam ağ isteklerini azaltır ve hatta :hover ve :active gibi CSS sahte sınıfları aracılığıyla SVG özelliklerini manipüle edebilirsiniz. Daha iyi bakım için karmaşık SVG'leri ayrı dosyalar olarak saklamayı düşünün, ancak satır içi veri URI'leri nadiren değişen bileşenler için iyi çalışır.
Sıkça Sorulan Sorular
Kod Uygulaması
import base64
from urllib.parse import quote
def svg_to_css_url_encoded(svg: str) -> str:
encoded = quote(svg, safe="")
return f'background-image: url("data:image/svg+xml,{encoded}");'
def svg_to_css_base64(svg: str) -> str:
b64 = base64.b64encode(svg.encode("utf-8")).decode("ascii")
return f'background-image: url("data:image/svg+xml;base64,{b64}");'
svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#6366f1"/></svg>'
print("URL encoded:")
print(svg_to_css_url_encoded(svg))
print()
print("Base64:")
print(svg_to_css_base64(svg))Comments & Feedback
Comments are powered by Giscus. Sign in with GitHub to leave a comment.