SVG Optimize Edici

Kaynak dosyaya göre önemli ölçüde değişir. Adobe Illustrator'dan dışa aktarılan SVG dosyaları genellikle büyük miktarda Illustrator'a özel meta veri, katman verisi, font referansları ve temizlenen XML ad alanlarını içerir. Inkscape dışa aktarımları kendi düzenleyici ad alanlarını ve yorumlarını taşır. Figma SVG'leri genellikle daha temizdir. Tipik tasarruf: Halihazırda temiz olan SVG'ler için %20-40, yoğun meta veri içeren Illustrator veya Inkscape dışa aktarımları için %40-70. Araç, önce ve sonraki kesin bayt sayılarını gösterir, böylece sonucu her zaman bilirsiniz.

Tasarım araçları, kendi düzenleme özelliklerini korumak için SVG dosyalarının içine özel veriler gömer: Inkscape, sodipodi: ve inkscape: ad alanlarında katman adlarını ve kılavuz konumlarını saklar; Illustrator, i: ve dc: ad alanlarına veri gömer; eski araçlar ise Sketch veya Adobe meta verilerini içerir. Bunların hiçbiri SVG'nin bir tarayıcıda işlenmesi için gerekli değildir. Düzenleyici verilerini kaldırmak, özellikle karmaşık Illustrator dosyaları için en büyük boyut küçültme miktarını üretir.

Ondalık hassasiyeti, koordinat değerlerindeki (örneğin, d="M 10.3456789 20.1234567") ondalık noktadan sonra kaç basamağın tutulacağını kontrol eder. 6'dan 2'ye düşürmek bunları d="M 10.35 20.12" haline getirir ve hafif koordinat yuvarlaması pahasına bayt tasarrufu sağlar. İkonlar ve basit illüstrasyonlar için 2-3 hassasiyeti görünmezdir. Detaylı teknik çizimler veya ince eğrileri içeren illüstrasyonlar için 4-5'te kalın. Yuvarlama hatalarını yakalamak için hassasiyeti azalttıktan sonra %100 yakınlaştırmada önizlemeyi kontrol edin.

SVG öğeleri genellikle tasarım araçları tarafından oluşturulan uzun ID'lere sahiptir: id="rect_123456789" veya id="Layer_1_xA0_Background". ID'leri temizlemek, bunları id="a" veya id="b" gibi daha kısa isimlerle değiştirerek çok sayıda referanslı öğe içeren büyük SVG dosyalarında bayt tasarrufu sağlar. Bu, bağımsız SVG dosyaları için güvenlidir. Eğer SVG ID'leriniz web sayfanızdaki harici CSS seçicileri veya JavaScript tarafından referans alınıyorsa (örneğin, document.getElementById("myIcon")), bu seçeneği devre dışı bırakın veya optimizasyondan sonra referanslarınızı güncelleyin.

Evet. Kod giriş paneline geçmek için "Veya SVG kodunu yapıştır" seçeneğine tıklayın ve SVG işaretlemenizi doğrudan yapıştırın. Bu, bir HTML dosyasına gömülmüş, bir tasarım aracından kopyalanmış veya bir grafik kütüphanesi tarafından oluşturulmuş bir SVG'ye sahip olduğunuzda yararlıdır. Optimize ettikten sonra, Copy Code düğmesiyle sonucu kopyalayın ve ihtiyacınız olan yere tekrar yapıştırın.

Hayır. Araç, SVG'yi tamamen tarayıcı sekmenizde ayrıştırmak ve temizlemek için tarayıcının yerleşik DOMParser API'sini kullanır. Herhangi bir dosya yüklemesi gerçekleşmez, hiçbir sunucu SVG'nizi işlemez ve hiçbir şey cihazınızdan dışarı çıkmaz. Bu durum, ürün diyagramları veya marka varlıkları gibi mülkiyetli veya hassas SVG varlıklarını optimizelemek için güvenlidir.

Göndermeden önce optimize edin. Daha küçük SVG dosyaları daha hızlı git işlemleri, daha küçük depo boyutu ve daha temiz diff'ler (çünkü düzenleyici meta verileri genellikle her Illustrator kaydında değişir) anlamına gelir. İyi bir iş akışı: tasarım aracınızdan SVG'yi dışa aktarın, bu optimizer üzerinden geçirin, önizlemeyi inceleyin ve ardından optimize edilmiş versiyonu gönderin. Daha sonra tekrar düzenlemeniz gerekirse orijinal kaynak dosyasını ayrı bir tasarım varlıkları klasöründe tutun.