Bu uygulamalı örneği takip edin, ardından aynı kontrolleri kendi görselinize uyarlayın. SVG Sıkıştırıcı aç.
Statik bir SVG yükleyin veya işaretlemeyi yapıştırın
SVG Sıkıştırıcıyı açın ve bir SVG dosyası seçin veya bir örnek deneyin. Örnek, 512 × 512 viewBox, gradyan dolgusu, başlık ve açıklama içeren 985 baytlık bir yörünge işareti olan svg-compressor.svg'dir. İşaretleme zaten bir düzenleyicide veya panodaysa Yapıştır SVG kullanın.
Araç, her biri 2 MB olan en fazla 20 dosyayı kabul eder. Tam bir SVG belgesini ayrıştırır ve harici dosyaları yüklemeden standart SVG belge bildirimlerini kaldırır. Hatalı XML, özel varlık bildirimleri ve dahili belge alt kümeleri reddedilir. Çok karmaşık dosyalar da öğe veya işlem süresi sınırına ulaşabilir.
Bu iş akışı statik vektör çizimleri üretir. Komut dosyaları, olay işleyicileri, harici kaynaklar, animasyon ve gömülü tarama görüntüleri kaldırılır. Orijinal önizleme zaten temizlenmiştir, bu nedenle kaynak dosyadaki her özelliğin sınırsız bir işlemesi olarak yorumlanmamalıdır.
Orijinal SVG'ın bir kopyasını saklayın. Etkileşimli bir illüstrasyon veya fotoğraf içeren bir SVG, statik bir vektör simgesinden farklı bir kullanım durumudur.
Sonucu karşılaştırın ve ondalık hassasiyeti ayarlayın
İki önizleme paneli, temizlenmiş orijinali ve optimize edilmiş sonucu gösterir. Orijinal ve Optimize Edilmiş yanındaki boyutlar ve bayt özeti, kaynak dosyayı bitmiş çıktı ile karşılaştırır. Optimizasyon belirli bir dosyayı daha büyük hale getirdiğinde, her zaman bir azalma vaat etmek yerine bir artış bildirir.
Ayarları açın ve örnek için Ondalık hassasiyeti 2 olarak ayarlayın. Hassasiyet 1 ile 5 arasında değişir ve 3'te başlar. Daha düşük değerler sayısal geometriyi basitleştirebilir ancak ince eğrileri, küçük boşlukları veya hizalı kenarları kaydırabilir. Önizleme önemli ayrıntıları kaybettiğinde bunu artırın.
Bu örnek basit geometri kullanır, bu nedenle 2 hassasiyeti tanınabilir şeklini korur. Karmaşık ondalık koordinatlara sahip diğer SVG'ler daha fazla değişebilir. Optimize edilmiş SVG işaretlemesini görüntülemek, indirilecek gerçek metni ortaya çıkarır; orijinalin ayrı bir temsili değildir.
Bir vektörü amaçlanan görüntüleme boyutunda ve daha büyük bir görünümde kontrol edin. Küçük bir küçük resimde ince bir kaymayı görmek zor olabilir.
Bu kılavuzdaki örnek
Bir örnek deneyin: svg-compressor.svg, 985 bayt, 512 × 512 viewBox. Ondalık hassasiyet 2; erişilebilir başlıkları/açıklamaları koru ve dahili kimlikleri kısalt etkin; Duyarlı boyutlar ve Okunabilir çıktı biçimlendirmesi devre dışı. İndirilen SVG: 635 bayt.
- Kaynak SVG
- 985 bayt
- Optimize edilmiş SVG
- 635 bayt
- Ölçülen azalma
- 35.5%
- Korunan içerik
- Başlık, açıklama ve 512 × 512 viewBox
Açıklamaları koruyun ve harici kimlikleri göz önünde bulundurun
Çalışılan örnek için Erişilebilir başlıkları ve açıklamaları koru seçeneğini etkin bırakın. Bu, gereksiz düzenleyici meta verilerini kaldırırken ve uygun işaretlemeyi basitleştirirken SVG başlığını ve açıklamasını korur. Bunlar farklı bilgi türleridir ve birbirinin yerine kullanılabilir olarak görülmemelidir.
Dahili kimlikleri kısalt varsayılan olarak açıktır. Optimize edici, SVG içindeki referansları günceller, ancak harici CSS veya JavaScript yine de orijinal kimliklere güvenebilir. Dosya, öğelerini adlandıran daha büyük bir uygulamanın parçası olduğunda bu seçeneği kapatın ve bitmiş SVG'yi bu bağlamda test edin.
Örnek için Duyarlı boyutlar ve Okunabilir çıktı işaretlemesini kapalı bırakın. Duyarlı boyutlar, koordinat viewBox'ı ölçeklenebilir boyutlandırma sağlayabildiğinde sabit genişliği ve yüksekliği kaldırır. Okunabilir çıktı girinti ekler ve bakım için kullanışlıdır, ancak metin boyutunu artırabilir.
Bağımsız bir simge dosyası için dahili kimlik temizliği genellikle basittir. Harici olarak yazılmış bir diyagram için, tanımlayıcıları korumak birkaç kaydedilmiş bayttan daha önemli olabilir.
Bitmiş vektörü indirin ve doğrulayın
Başlat'ı, ardından İndir'i seçin. Çalışılan çıktı, 985 baytlık kaynağa kıyasla 635 bayttır: %35.5 azalma. Başlığı ve açıklaması kalır ve görüntülenen karşılaştırma gerçek kaynaktan oluşturulur ve SVG indirilir.
Makale, sonucun net bir illüstrasyonu için her iki vektörü de 1,024 pikselde işler; mantıksal koordinat boyutları 512 × 512 olarak kalır. Daha büyük bir önizleme, kaydedilen SVG'e tarama içeriği eklemez. Mevcut bir üretim varlığını değiştirmeden önce hedef sayfanızdaki gerçek vektörü inceleyin.
Bir dosya, orijinal temel adıyla SVG olarak indirilir. Toplu işlem, yinelenen dosya adları için numaralandırılmış soneklerle tek bir ZIP olarak indirilir. İşleme tarayıcıda gerçekleşir. Daha sonra farklı optimizasyon ayarlarını denemek isterseniz orijinal kaynağı saklayın.
Dosya boyutu tasarrufları yalnızca bu örneğe göre ölçülür. Zaten optimize edilmiş bir SVG çok az iyileşme gösterebilir veya biraz daha büyük hale gelebilir.
Sıkça sorulan sorular
Optimize edilmiş SVG tam olarak aynı mı görünecek?
Optimize edici, statik görünümü korumayı amaçlar ancak yuvarlama ve desteklenmeyen içeriğin kaldırılması dosyayı değiştirebilir. Önizlemeleri karşılaştırın ve kaydedilen SVG dosyasını projenizde test edin.
Ondalık hassasiyeti neyi değiştirir?
Sayısal geometri ve yol verileri için kullanılan hassasiyeti kontrol eder. Daha düşük değerler boyutu küçültebilir ancak ince detayları kaydırabilir. Varsayılan değer 3 şeklindedir.
Başlık ve açıklamayı korur mu?
Evet, varsayılan olarak. Bu SVG öğelerini korumak için Erişilebilir başlıkları ve açıklamaları tut seçeneğini etkin bırakın.
Neden betikler veya tarama görüntüleri eksik?
Bu araç statik bir vektör çıktısı oluşturur. Betikler, olaylar, harici kaynaklar, animasyonlar ve gömülü tarama görüntüleri temizleme sırasında kasıtlı olarak kaldırılır.
CSS tarafından referans verilen kimlikleri koruyabilir miyim?
Harici kod belirli kimliklere bağlı olduğunda Dahili kimlikleri kısalt seçeneğini kapatın. Orijinali değiştirmeden önce optimize edilmiş dosyayı hedef sayfada doğrulayın.
SVG dosyaları optimizasyon için yükleniyor mu?
Hayır. Araç, ayrıştırma ve optimizasyon işlemlerini tarayıcıda gerçekleştirir ve sonucu yerel olarak indirir.
DOCTYPE içeren bir SVG yükleyebilir miyim?
Standart bir SVG belge bildirimi kabul edilir ve harici tanımlayıcısı getirilmeden kaldırılır. Özel varlık bildirimleri ve dahili belge alt kümeleri reddedilir.
Vektörü, inceleyebileceğiniz bir sonuçla daha hafif hale getirin.
Bir örnek deneyin veya kendi dosyanızı kullanın ve paylaşmadan önce sonucu inceleyin.
