SVG dosyası çok mu büyük? Kompresyon ve optimizasyon için 8 ipucu

Yüzlerce KB, hatta birkaç MB ağırlığındaki bir SVG genellikle çok fazla düğüm noktası, gereksiz yollar, editör metadatası ve aşırı ondalık hassasiyetten kaynaklanır. Aşağıdaki sekiz teknik kaynaktan teslimata doğru sıralanmıştır ve hepsi uygulanabilirdir.

1. Yol düzeyinde: daha az düğüm noktası, birleştirilmiş yollar

İpucu 1: Düğüm noktalarını azaltın (yolları sadeleştirin)

Bir yolda ne kadar çok düğüm noktası varsa dosya o kadar büyük, işleme o kadar yavaş olur. Dönüştürme sırasında yumuşatmayı artırarak bunları kaynakta kesin. Var olan bir SVG'de Illustrator'da Object → Path → Simplify ya da Inkscape'de Path → Simplify (Ctrl+L) ile gereksiz düğüm noktalarını kaldırın. PolySVG dönüştürma aracında yumuşatma ve renk sayısını ayarlayarak kalite ile dosya boyutu arasındaki dengeyi anında görebilirsiniz.

İpucu 2: Yolları ve katmanları birleştirin

Aynı dolguya sahip birden fazla yolu birleştirerek tekrarlanan nitelikleri kaldırın, anlamsız grup iç içeliğini düzleştirin ve gizli katmanları ile boş öğeleri silin. Tasarım yazılımında yolları birleştirme işlemini kullanın ya da dışa aktarmadan önce katmanları birleştirin.

2. Dosyanın içinde: metadatası kaldırın, hassasiyeti düşürün

İpucu 3: Editör metadatasını kaldırın

Illustrator ya da Inkscape'ten dışa aktarılan SVG'ler çoğu zaman işleme üzerinde etkisi olmayan editör ad alanlarını, <metadata> etiketini, yorumları ve dışa aktarma ayarlarını taşır; bunlar elle kaldırılabilir ya da SVGO otomatik olarak temizleyebilir. Ancak <title> ve <desc> etiketlerini bırakın — erişilebilirlik için yararlıdırlar.

İpucu 4: Ondalık hassasiyeti düşürün

Yol koordinatları çoğu zaman altı ila sekiz ondalık basamak taşırken ekranda işleme için bir ya da iki basamak yeterlidir. SVGO yapılandırmasında floatPrecision değerini 1 ya da 2 olarak ayarlamak, görünür bir fark olmadan dosyayı belirgin biçimde küçültür. Çok küçük ikonlarda koordinatları fazla sıkıştırmamaya dikkat edin, yoksa şekil bozulur.

3. Otomasyon: SVGO ile tek komut

İpucu 5: SVGO ile otomatik olarak optimize edin

SVGO, SVG optimizasyonunun fiili standardıdır ve onlarca eklentiyle gelir: yorumları ve metadatası silme, yolları birleştirme, yol komutlarını optimize etme ve sayıları temizleme. Temel kullanım:

npx svgo input.svg -o output.svg

Tipik dosyalar %30 ile %70 arasında küçülür. İki uyarı: viewBox niteliğini kaldırmayın, aksi hâlde ölçekleme bozulur; ve CSS ile renklendirmek istediğiniz ikonlarda rengi sabit yazmak yerine dolguyu devralınır bırakın.

Optimizasyondan önce ve sonra tarayıcınızın geliştirici araçlarında dosya boyutunu ve fiilen aktarılan boyutu karşılaştırarak kazancı doğrulayın. Her seferinde yalnızca bir tür parametreyi değiştirin; böylece soruna yol açan adımı kolayca bulabilirsiniz.

4. Yapı ve yeniden kullanım: semboller ve renk katmanları

İpucu 6: Tekrarlanan şekilleri defs ve use ile yeniden kullanın

Aynı ikon bir sayfada birkaç kez görünüyorsa <defs> ile bir kez tanımlayıp <use> ile başvurun ya da bir SVG sprite sheet oluşturun; dosya boyutu ve istek sayısı birlikte düşer.

İpucu 7: Renk katmanlarını denetleyin ve gömülü bitmaplerden kaçının

Katman sayısını azaltmak için vektörize etme sırasında renk sayısını düşürün ve mümkün olan yerde karmaşık bir gradyan yerine düz bir renk kullanın. En önemlisi, SVG içine base64 kodlanmış bitmap gömmekten kaçının — bu, vektörel bir dosyayı raster taşıyıcısına dönüştürür ve boyut kontrolden çıkar. Dönüştürmeden kalan yollar çevrimiçi editörde tıklayarak silinebilir.

5. Teslimat: taşıma sıkıştırması ve önbellek

İpucu 8: gzip/Brotli açın ve önbellek kullanın

SVG metin olduğu için sunucuda gzip ya da Brotli'yi etkinleştirmek genellikle aktarılan boyutu bir kez daha %60 ile %80 arasında düşürür; statik SVG dosyalarına uzun ömürlü önbellek başlıkları verin. Çok küçük ikonlar doğrudan HTML içine gömülebilir; bu da bir isteği tamamen ortadan kaldırır. Arkasındaki ilkeler SVG'nin avantajları yazısında ele alınıyor; boyutu dönüştürme aşamasında denetlemek için Bir görseli SVG'ye çevirme yolları rehberini okuyun.

Sıra önemlidir: düğüm noktalarını ve renk katmanlarını kaynakta denetleyin, dosya içinde metadatasını ve hassasiyeti temizleyin, ardından SVGO'yu çalıştırın ve en sonunda taşıma sıkıştırmasını açın. Dört katmanın tamamı yerinde olduğunda SVG dosyaları genellikle bir büyüklük mertebesi küçülür.