SVG Sıkıştırın - Ve Her Baytın Nereye Gittiğini Görün
SVG iyileştiricilerin çoğu size tek bir sayı verir: %42 daha küçük. O sayı, asıl bilmeniz gerekeni gizler: bu yüzde puanlarının hangisi kimsenin özlemeyeceği girintileri silmekten, hangisi koordinatları yuvarlamaktan ya da erişilebilirlik etiketini atmaktan geldi? Bu araç, sizin dosyanız üzerinde her adım için bir bayt değeri bildirir ve herhangi birini kapatmanıza izin verir. Tümüyle kendi cihazınızda bir Web Worker içinde çalışır - SVG takımımızda bunu yapabilen tek araçtır, çünkü iyileştirme içinde hiç çizim olmayan saf metin işidir. Hiçbir şey yüklenmez ve temizleyici, siz istesiniz istemeyin her dosyada önce çalışır; çünkü bu araç size SVG kaynağını geri verir ve siz onu bir sayfaya yapıştıracaksınız.
Bu araç nasıl kullanılır
SVG dosyalarınızı bırakın
Bir ya da daha çok SVG'yi yukarıdaki kutuya sürükleyin, her biri 5 MB'a kadar. Her dosya adına göre değil içeriğine göre denetlenir; gerçekte bir SVG değilse ya da bir varlık genişletme yükü taşıyorsa belirli bir gerekçeyle geri çevrilir.
Hangi adımların çalışacağını seçin
On iki anahtar, biri dışında hepsi varsayılan olarak açık. <title> öğesini kaldırmak bilerek kapalıdır, çünkü ekran okuyucunun grafiğiniz için seslendirdiği şey odur - açtığınızda panel etiketin bedeline karşılık kırk baytı sessizce kazanmak yerine sizi yerinde uyarır.
Koordinat duyarlığını ayarlayın
Kaydırıcı, yol verisinde kaç ondalık basamağın kalacağını denetler ve varsayılanı üçtür. Düzenleyici çıktılarında bu çoğu zaman tek başına en büyük kazanımdır, çünkü Illustrator koordinatları bir matbaanın ayırt edebileceğinden daha ince konumları anlatan sekiz ondalıkla yazar.
İyileştirin ve karşılaştırın
Her dosya, özgün ve iyileştirilmiş sürümü yan yana gösterir. Bu iki küçük görüntü birbirinden ayrılıyorsa bir adım bir şeyi bozmuş demektir - o görsel denetim tam da sonucu güvene dayanarak kabul etmek zorunda kalmayasınız diye orada.
Kopyalayın ya da indirin
İyileştirilmiş kaynağı satır içi yapıştırmak için doğrudan panonuza kopyalayın ya da bir dosya olarak indirin. Birden çok dosya dönüştürdüyseniz hepsini tek bir ZIP olarak alın.
Sıkça Sorulan Sorular
Dosyam gerçekte ne kadar küçülecek?
Bu, çizimden çok daha fazla dosyanın nereden geldiğine bağlıdır. Dördünü ölçtük: Illustrator tarzı bir çıktı 1.091 bayttan 401 bayta indi, %63 küçülme. Figma tarzı bir çıktı 730'dan 525'e, %28. Lucide indirme simgesi %4 verdi ve kendi site logomuz yalnızca %2.
Simge neden neredeyse hiç küçülmedi?
Çünkü bize ulaşmadan önce zaten iyileştirilmişti. Lucide dosyası; yorumsuz, üst verisiz, düzenleyici öznitelikleri olmayan ve kısa koordinatlı 291 baytlık saf geometridir - bir iyileştiricinin resmi değiştirmeden kaldırabileceği hiçbir şey yoktur. İyi bir simge takımı zaten en alt sınırdaki dosyalarla gelir.
Hangi adım en çok kazandırıyor?
Illustrator çıktısında: üst veri bloğunu kaldırmak 216 bayt, koordinatları yuvarlamak 131, yorumlar 94, varsayılan öznitelikler 61, kullanılmayan tanımlar 51, XML bildirimi 38 ve stil özniteliklerini dönüştürmek 29 bayt kazandırdı. Figma çıktısında tablo bambaşkaydı - kazanılan 205 baytın 141'i tek başına kullanılmayan tanımlardan geldi.
Figma dosyada neden bu kadar çok kullanılmayan şey bırakıyor?
Kendi içinde kullandığı katman yapısını dışa aktarır. Çerçeve ve katman adları hiçbir şeyin gönderme yapmadığı id özniteliklerine dönüşür; çalışma yüzeyi için tanımlanan kırpma yolları ve gradyanlar da çoğu zaman onlara hiç işaret etmeyen bir dosyada yaşamaya devam eder. Bu id'ler dosyada ölü ağırlıktır ve onları kaldırmak bir Figma çıktısındaki en büyük tek kazanımdır.
ID'leri kaldırmak güvenli mi?
Bilinmesi gereken tek bir ayrık durum dışında neredeyse her zaman. Yalnızca dosyada hiçbir şeyin gönderme yapmadığı bir id'yi kaldırırız ve url(#…) değerlerini, href özniteliklerini ve <style> içindeki CSS'i denetleriz. Göremediğimiz şey, sayfanızdaki o id'yi hedefleyen dış CSS ya da JavaScript'tir - satır içi bir SVG'yi dışarıdan biçimlendiriyor ya da betikliyorsanız bu adımı kapatın.
<title> öğesini kaldırmalı mıyım?
Genellikle hayır; varsayılan olarak kapalı tek adım olmasının nedeni budur. <title>, grafiğin erişilebilir adıdır: ekran okuyucunun seslendirdiği şeydir ve o olmadan görsel, ona bakmayan herkes için adsızdır. Kazanç genellikle birkaç düzine bayttır, ki bu kötü bir takastır.
Koordinatları yuvarlamak çizimimi bozabilir mi?
Sıradan çizimlerde üç ondalıkta bozmaz. 24 birimlik bir simgede üç ondalık basamak, genişliğinin kırk binde biri kadar bir çözünürlüğe karşılık gelir; bunu hiçbir ekran ya da yazıcı gösteremez. Küçük bir viewBox'ta kaydırıcıyı sıfır ondalığa çekerseniz biçimlerin kaydığını görürsünüz - her dosyanın yanındaki önizleme tam da bunu yakalamak için orada.
İyileştirilmiş dosyanın hâlâ aynı göründüğünü nereden bileceğim?
İki yoldan. Her dosya öncesi ve sonrası küçük görüntülerini yan yana gösterir; ayrıca sınama takımımız birkaç gerçek çıktının iki sürümünü de piksele çevirip birebir karşılaştırır ve en fazla birkaç düzey kenar yumuşatma sapmasına izin verir. Resmi değiştiren bir adım, daha yayımlanmadan bu karşılaştırmada kalırdı.
Neden svgo kullanmıyorsunuz?
Tarayıcı paketi, onda birini kullanacağımız eksiksiz bir CSS ayrıştırıcı ağacını ve bir eklenti mimarisini de beraberinde getiriyor ve bu, bu sayfaya gelen her ziyaretçiye inerdi. Buradaki uygulama, gerçek dünyada en çok kazanç sağlayan adımları içerir ve başka bir şey içermez; böylece iyileştiricinin tamamı ancak siz bir dosya bıraktığınızda indirilir.
Bu araç SVG'mdeki betikleri ve izlemeyi kaldırıyor mu?
Evet ve o adım isteğe bağlı değildir. Betikler, olay işleyicileri, uzak görsel referansları ve dış stil sayfası içe aktarımları her dosyadan temizlenir ve panel neyi bulduğunu listeler. Bu, burada diğer SVG araçlarımızdakinden daha önemlidir, çünkü bu araç size kendi sayfanıza yapıştıracağınız kaynağı geri verir.
gzip bunu gereksiz kılmıyor mu?
Hayır, ama aradaki farkı daraltır. Sunucunuz SVG'yi aktarım sırasında neredeyse kesinlikle gzip ya da brotli ile sıkıştırıyor ve sıkıştırma yinelenen girintileri iyi karşılıyor. Yapamadığı şey, 216 baytlık bir üst veri bloğunu silmek ya da sekiz ondalıklı koordinatları kısaltmaktır - o içeriğin yine sıkıştırılıp açılması gerekir ve aktarımda yine bayt harcar.
Şunlara da ihtiyacınız olabilir
Bir şey çalışmıyor mu? Hata bildir