SVG’den HTML’e

SVG’yi çevrimiçi HTML’ye dönüştür

Bir HTML sayfası için inline SVG oluşturmak üzere bir SVG dosyası seç veya kodunu yapıştır. Sonucu önizle, optimizasyon ayarlarını düzenle ve kodu kopyala. Ayrıştırma, optimizasyon ve dönüştürme işlemlerinin tümü, SVG’ni hiçbir sunucuya göndermeden tarayıcında yerel olarak gerçekleşir.

Duyarlı inline SVG hazırla

SVG koordinat sisteminin korunması için viewBox’ı tut. SVG’de kullanılabilir bir viewBox varsa sabit genişlik ve yüksekliği kaldır, ardından boyutunu kendi CSS kodunla ayarla.

SVG boyutu ve tasarruf

“Orijinal boyut”, girdiğin SVG’nin boyutudur. “Optimize edilmiş SVG boyutu” ise yorumları kaldırma, koordinatları yuvarlama ve kodu küçültme gibi belirlediğin seçeneklerle işlendikten sonraki boyuttur. Boyutlar kB cinsinden gösterilir; 1 kB 1.000 bayta eşittir. “Tasarruf”, yüzde olarak küçülme oranıdır: 10 kB’tan 7 kB’a inmek %30 tasarruf sağlar. Çıktı daha büyükse, örneğin okunabilir biçimlendirme nedeniyle, bunun yerine “Boyut artışı” gösterilir. Bu rakamlar JSX, React, CSS Data URI veya Base64 dışa aktarımlarının boyutunu değil, SVG kodunu karşılaştırır.

Ondalık hassasiyeti ve girinti

Ondalık hassasiyeti, koordinatlarda ve sayısal özniteliklerde ondalık ayırıcıdan sonra kaç basamak tutulacağını belirler. Hassasiyet 2 olduğunda 12.34567 değeri 12.35 olur. Daha az ondalık basamak dosya boyutunu küçültebilir ama ince ayrıntıları bozabilir; varsayılan değer olan 3 yalnızca bir başlangıç noktasıdır, bu yüzden önizlemeyi kontrol et. Girinti, görseli değiştirmeden HTML ve JSX kodunu daha kolay okunur kılmak için 2 boşluk, 4 boşluk veya sekme kullanır. “SVG’yi küçült”, çıktıyı sıkıştırmak için gereksiz biçimlendirme boşluklarını kaldırır; bu nedenle küçültme açıkken girinti devre dışı kalır.

HTML, JSX, React ve SVG Data URI’leri

HTML çıktısı inline SVG kodudur ve SVG dosyası olarak indirilir. JSX, öznitelik adlarını ve satır içi stilleri React için uyarlar. React bileşeni bu kodu, standart SVG prop’larını kabul eden bir TypeScript fonksiyonunun içine sarar. CSS Data URI bir background-image bildirimi, Base64 ise kodlanmış bir SVG görsel URI’si üretir. Boyut istatistikleri, daha büyük olan kodlanmış biçimleri değil, optimize edilmiş SVG’yi gösterir. Aynı sayfada birden fazla inline kopya kullanmadan önce ID’leri gözden geçir.

Statik ve yerel bir SVG iş akışı

Önizleme, çalıştırılabilir sayfa kodu değil, yalıtılmış bir görseldir. Betikler, gömülü HTML, animasyonlar, harici görseller ve stil sayfaları kaldırılır. Desteklenen satır içi sunum stilleri ve yerel parça referansları korunur. Bu araç statik çizimler için tasarlanmıştır; desteklenmeyen özellikler çizimin görünümünü değiştirebilir. currentColor düz dolguları ve konturları değiştirir ve inline kullanıldığında rengini çevresinden devralır; görsel önizlemesi ise kendi renk bağlamını kullanır.