SVG Optimize Aracı

Illustrator, Figma veya Sketch gibi tasarım araçlarından dışa aktarılan simgeler ve logolar, görüntünün görünümüyle hiçbir ilgisi olmayan bir sürü fazlalık taşır: düzenleyici meta verileri, XML yorumları, gereksiz grup sarmalayıcıları, on beş ondalık basamağa kadar yazılmış koordinatlar ve kimsenin referans vermediği kimlikler. Bunların hiçbiri görüntülemeyi etkilemez, ama her indirmeyi şişirir — ve siteniz onlarca SVG simgesi kullanıyorsa, bu fazladan yük hızla birikir.

Bu araç, SVGOMG'nin arkasındaki aynı optimizasyon motoru olan svgo'yu tamamen tarayıcınızın içinde çalıştırır. SVG kodunu yapıştırın veya bir dosya bırakın; yorumları ve düzenleyici çöplerini temizler, mümkün olduğunda yolları birleştirir, gereksiz grupları daraltır ve koordinatları sizin belirlediğiniz hassasiyete yuvarlar — tüm bunlar cihazınızdan hiç ayrılmadan olur. Yükleme adımı ve sunucu dahliyeti yoktur, bu yüzden herkese açık bir simgede olduğu kadar özel bir müşteri logosunda da aynı derecede iyi çalışır.

Varsayılan ayarlar kasıtlı olarak muhafazakârdır: viewBox'ı korurlar (böylece simge nereye yerleştirilirse yerleştirilsin doğru ölçeklenmeye devam eder) ve width/height'i olduğu gibi bırakırlar. SVG'yi satır içi (inline) olarak gömüp boyutlandırmayı CSS ile yapıyorsanız "width/height kaldır" seçeneğini açmak faydalıdır, çünkü kök öğedeki sabit boyutlar aksi halde stil sayfanızla çakışabilir. Çoklu geçiş, optimizasyon aracını birden fazla kez çalıştırarak yalnızca ilk geçiş kodu basitleştirdikten sonra ortaya çıkan ek tasarrufları yakalar — açık bırakmak neredeyse hiç zarar vermez.

Hassasiyet, yol koordinatlarında kaç ondalık basamağın korunacağını belirler; düşürmek dosyayı daha da küçültür ama çok ayrıntılı çizimlerde ufak görsel kaymalara yol açabilir, bu yüzden ayarı değiştirdikten sonra canlı önizlemeyi kontrol etmekte fayda var. Çoğu simge ve logo için yalnızca varsayılan ayarlar bile genellikle gözle görülür bir farklılık olmadan dosya boyutunu %40–60 azaltır — indirmeden önce bunu doğrulamak için önizlemeyi ve öncesi/sonrası boyut sayacını kullanın.