SVG Dosyası Nasıl Küçültülür?

Tasarım programlarından dışa aktarılan SVG dosyaları çoğu zaman gerçekte ihtiyaç duyulandan çok daha büyüktür. Çünkü program kendi meta verilerini, katman adlarını ve gereksiz ondalık basamakları dosyaya ekler.

Neler temizlenebilir?

• Düzenleyici programın eklediği meta veriler ve yorumlar
• Kullanılmayan tanımlar ve boş gruplar
• Gereğinden fazla ondalık basamak (0.000001 gibi)
• Görünmeyen katmanlar

Ne kadar kazanç sağlar?

Karmaşık çizimlerde dosya boyutunun yarıdan fazla düşmesi olağandır. Web sitelerinde çok sayıda simge kullanılıyorsa bu kazanç sayfa hızına doğrudan yansır.

SVG Optimize aracı görüntüyü bozmadan gereksiz kodu temizler ve önce/sonra boyutu gösterir.

Tasarım programları neden şişkin SVG üretir?

Illustrator, Figma veya Inkscape gibi programlar SVG'yi dışa aktarırken kendi çalışma bilgilerini de dosyaya gömer: katman adları, düzenleme geçmişi, kullanılmayan tanımlar, program sürümü, hatta bazen tasarımcının bilgisayar adı. Bunların hiçbiri görüntünün çizilmesi için gerekli değildir; yalnızca dosyayı büyütür.

İkinci büyük kaynak koordinat hassasiyetidir. Program bir noktayı 12.7382910457 olarak yazabilir, oysa ekranda 12.74 ile arasında görünür hiçbir fark yoktur. Yüzlerce noktada bu fazla haneler toplanınca dosyanın önemli bir kısmını oluştururlar.

Optimizasyon neyi siler?

• Düzenleyici üstverisi — katman adları, program bilgileri, yorum satırları.
• Kullanılmayan tanımlar — hiçbir şeklin kullanmadığı gradyan ve maskeler.
• Gereksiz ondalık haneler — görünürde fark yaratmayan hassasiyet.
• Boş gruplar ve tekrar eden öznitelikler.
• Görünmez öğeler — opacity değeri sıfır olan veya alanı bulunmayan şekiller.

Bu temizlik sonrası tipik bir logo dosyası yüzde altmış ile seksen arasında küçülür. Görüntüde hiçbir değişiklik olmaz çünkü silinen şeylerin hiçbiri çizime katılmıyordu.

Dikkat edilmesi gereken tek şey

SVG'yi sonradan animasyonlu kullanacaksanız veya JavaScript ile parçalarına erişecekseniz, öğelerin kimlik ve sınıf adlarına ihtiyacınız olur. Agresif optimizasyon bunları kısaltabilir veya silebilir; sonra kodunuz o öğeyi bulamaz. Böyle bir kullanımınız varsa optimizasyondan sonra dosyayı mutlaka yerinde test edin.

Optimizasyon tarayıcınızda yapılır; dosya hiçbir sunucuya gönderilmez. Sonuçtan memnun kalmazsanız özgün dosyanız bilgisayarınızda olduğu gibi durmaya devam eder.

Küçülttükten sonra ne kontrol edilmeli?

Optimizasyon çoğu zaman görüntüyü değiştirmez, ama her zaman değil. Kontrol etmenin en pratik yolu, optimize edilmiş dosyayı özgünüyle yan yana açıp bakmaktır. Özellikle şu üç noktaya dikkat edin: ince çizgilerin kaybolup kaybolmadığı, gradyan geçişlerinin bozulup bozulmadığı ve saydam alanların yerinde durup durmadığı.

• Animasyonlu SVG'lerde kimlik adları silinirse animasyon durur.
• Bir sayfada aynı SVG'den birden fazla varsa kimlik çakışması görünüm bozabilir.
• Çok küçük boyutta gösterilecek ikonlarda aşırı sadeleştirme detayı yok eder.
• Kırpma yolları ve maskeler agresif ayarlarda beklenmedik biçimde birleşebilir.

Ne kadar kazanç gerçekçi?

Tasarım programından çıkmış tipik bir ikonda yüzde 40 ila 70 arasında küçülme sıradandır; çünkü dosyanın önemli bir kısmı düzenleyici üst verisi ve gereksiz ondalık hanelerdir. Elle yazılmış veya daha önce optimize edilmiş dosyalarda kazanç yüzde 5'in altına iner.

Kazancı abartmamak gerekir: birkaç kilobaytlık bir ikonun yarıya inmesi sayfa hızında ölçülebilir bir fark yaratmaz. Asıl kazanç, sitede onlarca ikon kullanılıyorsa ya da SVG doğrudan sayfa kodunun içine gömülüyorsa ortaya çıkar.