SVG Optimizasyonu Bir Dosyayı Gerçekte Nasıl Küçültür

Bir tasarım aracından çıkan bir SVG ile optimizasyondan sonraki aynı SVG görsel olarak aynı ve dosya boyutunda %60-80 farklı olabilir. Nasıl render edildiğine dair hiçbir şey değişmez — kaldırılan şey, tasarım aracının bir tarayıcının render motorunun hiç bakmadığı kendi defter tutması için eklediği her şeydir.

Gerçekte orada olan ama olmasına gerek olmayan şey

Bir avuç kategori tasarrufların çoğunu oluşturur:

• Editör metadata'sı — Illustrator, Figma ve Sketch hepsi bir dışa aktarıma kendi namespace'li özniteliklerini ve <metadata> bloklarını damgalar, hiçbiri render'ı etkilemez.
• Yorumlar — <!-- Generated by ... --> ve benzerleri, saf ölü ağırlık.
• Fazla koordinat hassasiyeti — 4. ondalık basamağın zaten alt-piksel olduğu bir boyutta render edilen bir görsel için 10 ondalık basamağa tanımlanmış bir path.
• Gereksiz gruplama — kendi dönüşümü veya stili olmayan, tek bir çocuğu saran bir <g>, tasarım aracının katman panelinin nasıl organize edildiğinden kalma.
• Ayrıntılı renk gösterimi — #f00 aynı şekilde render edilirken ve karakterlerin çeyreğini alırken rgb(255, 0, 0).

Bunların hiçbiri tahmin değildir — SVGO gibi bir araç dosyayı bir sözdizimi ağacı olarak ayrıştırır (canlı, render edilebilir bir DOM değil — saf veri olarak okunur, bu da optimizasyon sırasında dosyaya gömülü hiçbir şeyin hiç çalıştırılmadığı anlamına da gelir) ve her sadeleştirmeyi ayrı, tek tek iyi tanımlanmış bir dönüşüm olarak uygular, ki bu onu ham metin üzerinde riskli bir regex geçişi yerine güvenilecek bir şey yapan şeydir.

Görünür şekilde nerede yanlış gidebilir

Bilinmeye değer başarısızlık modu bozulma değil, normalde güvenli bir optimizasyonla etkileşime giren alışılmadık bir kaynak dosyadaki bir uç durumdur. Belirli bir fill rule'a dayanan bir şekil, tanımlanma şeklinde editöre özgü bir tuhaflığı olan bir gradient, ya da ince bir görsel detay için tam koordinat hassasiyetine bağlı bir path, optimizasyondan sonra çok hafifçe kayabilir. SVG Optimize Edici tam olarak bu yüzden boyut karşılaştırmasının yanında canlı bir önizleme gösterir — çıktıya güvenmeden önce görsel bir kontrol, ve tek bir sadeleştirme geçişi ikinci bir geçişin temizleyeceği daha fazla gereksizlik bıraktığında bir çoklu geçiş anahtarı.

Rakip değil, tamamlayıcı bir teknik

Dosya boyutunu optimize etmek ve istek sayısını azaltmak farklı sorunlardır. Bir düzine küçük SVG ikonunu ayrı dosyalar olarak kullanan bir sayfa, her biri ne kadar küçük olursa olsun bir düzine istek için bedel öder — SVG Sprite Üretici bunları <use> ile referanslanan tek bir <symbol> tabanlı sayfada birleştirir, byte'ları değil istekleri azaltır. İki teknik üst üste konur: önce her ikonu optimize edin, sonra optimize edilmiş sürümleri tek bir sprite'ta birleştirin.

Bir raster görsel için — bir fotoğraf, bir ekran görüntüsü, başlangıçta çizgi sanatı veya ikon olmayan herhangi bir şey — bunların hiçbiri geçerli değildir, çünkü sadeleştirilecek işaretleme yoktur; Resim Sıkıştır o durum için eşdeğer araçtır, vektör path'lerini sadeleştirmek yerine piksel verisini yeniden kodlayarak çalışır.