SVG Önizleme / Düzenleyici

SVG Önizleme / Düzenleyici Nasıl Çalışır

Araç Ne Yapar

SVG Önizleme / Düzenleyici, SVG işaretlemesini düzenlerken canlı olarak render eder ve hızlı inceleme için meta verileri (width, height, viewBox, öğe sayısı) çıkarır. Bir anahtar, şeffaf bölgeleri net görmek için dama desenli bir arka plan ekler. Araç ayrıca CSS background-image veya HTML src özniteliklerinde doğrudan kullanıma uygun, URL-kodlanmış bir data URI üretir.

Yaygın Geliştirici Kullanım Senaryoları

İkon tasarımcıları, farklı boyutlarda viewBox hesaplarını ve stroke kalınlıklarını test eder. Frontend geliştiriciler, elle düzenlenmiş bir SVG ikonunun optimizasyondan (manuel veya SVGO ile) sonra hâlâ doğru render edildiğini doğrular. E-posta geliştiriciler, HTML içinde inline kullanım için marka işaretlerinin kompakt data URI sürümlerini üretir. Eğitmenler, preserveAspectRatio ve overflow gibi özniteliklerin render etmeyi nasıl etkilediğini gösterir.

Veri Biçimleri, Türleri veya Varyantlar

Girdi ham SVG XML işaretlemesidir. Çıktı, sandbox’lanmış bir iframe içinde render edilen aynı SVG ile URL-kodlanmış bir data URI’dir (data:image/svg+xml;charset=utf-8,…). Öğe sayısı metriği, her açılış etiketini (defs, g, gradyanlar ve benzeri iç içe öğeler dahil) sayarak karmaşıklık hakkında kabaca bir fikir verir. Çıkarılan öznitelik değerleri ham biçimde gösterilir.

Yaygın Hatalar ve Sınır Durumları

href ile `use` veya `image` öğeleri tarafından referans verilen harici kaynaklar sandbox’lanmış iframe içinde yüklenmez. Script öğeleri içindeki satır içi JavaScript sandbox tarafından engellenir — animasyonlar SMIL veya CSS keyframes’e dayanmalıdır. Sisteminizde yüklü olmayan belirli bir yazı tipine bağlı SVG’ler varsayılan bir yazı tipine düşer; önizlemeler için fontları gömün veya sistem fontlarını kullanın.

Bu Aracı Ne Zaman Kullanmalı, Ne Zaman Kod Yazmalı

Tek seferlik ikon tasarımı, hata ayıklama veya data URI üretimi için tarayıcı aracını kullanın. Üretim varlıkları için SVG’leri, meta verileri kaldırıp işaretlemeyi küçültmek üzere ayarlanmış bir config ile SVGO’dan geçirin ve her yerde data URI inline etmek yerine uygulamanızda ikonları yüklemek için bir sprite sistemi veya uygun bundler entegrasyonu kullanın.