SVG dosyalarını sıkıştırın

SVG piksel değil, koddur

Bir SVG (Scalable Vector Graphics) dosyası, şekilleri tanımlayan XML biçiminde bir metin belgesidir: yollar, daireler, renk geçişleri, metin. Pikseller yerine talimatlar içerdiği için her boyutta keskin kalır; 16 piksellik bir favicon’dan bir reklam panosuna kadar. Web’deki simgeler, logolar, çizimler, grafikler ve haritalar çoğu zaman SVG’dir ve format 2001’den beri bir W3C standardıdır.

Metin olmanın bir yan etkisi vardır: dosya boyutu, resmin ne kadar büyük gösterildiğine değil, editörün onu ne kadar ayrıntılı yazdığına bağlıdır. Aynı şekilde görüntülenen iki SVG’nin boyutu birkaç kat farklı olabilir.

SVG dosyalarını gereğinden ağır yapan şeyler

• Editör meta verileri. Illustrator, Inkscape, Figma ve Sketch kendi ad alanlarını, katman adlarını, dışa aktarma yorumlarını ve bazen düzenlenebilir belgenin gömülü bir kopyasını ekler.
• Aşırı hassasiyet. Gerçekçi her boyutta 12.48 ile birebir aynı görüntülenecekken 12.483920174 gibi koordinatlar.
• Gereksiz yapı. Boş gruplar, gizli katmanlar, varsayılan öznitelik değerleri, kullanılmayan tanımlar ve daha kısa olabilecek stiller.
• Uzun yol sözdizimi. Göreli komutların daha kısa olacağı yerlerde mutlak komutlar, tekrarlanan komut harfleri, gereksiz boşluklar.
• Gömülü bitmap’ler. Bir çizime yapıştırılmış fotoğraf, SVG’nin içinde Base64 metin olarak saklanır; bu da orijinal resim dosyasından yaklaşık üçte bir daha büyüktür.

Araç SVG’yi nasıl optimize eder

Araç, yaygın olarak kullanılan açık kaynaklı SVG optimize edicisi SVGO’yu tarayıcınızda çalıştırır. Meta verileri ve yorumları siler, işe yaramayan grupları birleştirir, yol verilerini kısaltır, sayıları varsayılan olarak 3 ondalık basamağa yuvarlar (0 ile 6 arasında seçebilirsiniz) ve stilleri birleştirir; bu geçişleri hiçbir şey değişmeyene kadar tekrarlar. Sonuç, her editörde açabileceğiniz veya HTML’ye yapıştırabileceğiniz normal bir SVG’dir. Elle optimize edilmiş simgelerden editör verileriyle dolu bir Inkscape dışa aktarımına kadar sekiz SVG üzerinde yaptığımız testlerde tasarruf %8 ile %42 arasında değişti.

Optimizasyon teknik olarak dar bir anlamda kayıplıdır: yuvarlama koordinatları çok küçük miktarlarda değiştirir ve editöre özgü veriler gider; bu yüzden dosyayı tüm orijinal katmanlarıyla yeniden açamazsınız. Tasarım aracınızdaki kaynak dosyayı saklayın ve optimize edilmiş SVG’yi yayımlanan sürüm olarak görün.

Sunucular SVG’yi genellikle gzip veya Brotli sıkıştırmasıyla gönderir; bu da metni tarayıcıya giderken yeniden küçültür. Optimizasyon ve sunucu sıkıştırmasının etkileri toplanır, çünkü silinen verinin hiç sıkıştırılması gerekmez.

Optimize edilmiş bir SVG ne zaman bozulur

• CSS veya JavaScript bir öğeyi artık bulamıyor. Optimize ediciler, dosya içinde kullanılmıyor gibi görünen kimlikleri ve sınıf adlarını kısaltır veya siler. Sayfanızın stilleri veya betikleri bunları hedefliyorsa, yayımlamadan önce sonucu kontrol edin.
• Simge artık ölçeklenmiyor. Bir SVG’nin düzgün yeniden boyutlanması için viewBox özniteliğine ihtiyacı vardır. Araç bunu korur; bu yüzden orijinalde olup olmadığını kontrol edin. Yalnızca sabit genişlik ve yüksekliği olan bir SVG hiçbir zaman iyi ölçeklenmedi.
• Küçük şekiller bozuk görünüyor. Büyük bir tuval üzerine çizilmiş çok küçük simgeler yuvarlamadan etkilenebilir. Varsayılan hassasiyetle bu nadirdir.
• Dosya büyük ölçüde gömülü bir fotoğraftan oluşuyor. Fotoğrafı ayrı bir JPG veya WebP olarak dışa aktarıp bağlantı verin ya da grafiğin tamamını bir bitmap’e dönüştürün.

SVG hakkında sorular

İlgili sayfalar

Bitmap resimler resim sıkıştırıcı tarafından işlenir. Neyin neden yerel olarak çalıştığına dair arka plan bilgisi için nasıl çalışır sayfasına bakın.