SVG optimize edici

SVG yapıştırın veya bırakın ve SVGO ile küçültün. Her şey tarayıcınızda kalır.

SVG optimize edici nasıl çalışır

SVG Optimizer, SVG dosyalarınızı yüklemeden küçültmek ve temizlemek için tarayıcınızdaki bir Web Worker'da SVGO (SVG Optimizer) çalıştırır. SVGO, yorumları kaldıran, boşlukları daraltan, özdeş yolları birleştiren, şekilleri en kompakt temsillerine dönüştüren ve görsel etkisi olmayan öznitelikleri kaldıran yapılandırılabilir eklenti kümesi uygular. Sonuç, orijinaline özdeş şekilde oluşturulan daha küçük bir SVG'dir.

Figma, Illustrator veya Inkscape gibi tasarım araçları tarafından üretilen SVG dosyaları genellikle önemli ek yük içerir: editöre özgü meta veriler, boş gruplar, gereksiz dönüşüm öznitelikleri ve hiçbir tarayıcının ihtiyaç duymadığı namespace bildirimleri. SVGO'nun varsayılan eklenti kümesi bu yükü güvenilir biçimde kaldırır. Optimize edilmiş dosya indirme olarak sunulur ve optimizasyonun değer taşıdığını doğrulamanız için yüzde boyut azaltımı gösterilir.

Yazan: Bastien Sulyan

SVG optimize edici nasıl kullanılır, adım adım

SVG dosyanızı yükleme alanına sürükleyin veya göz atmak için tıklayın.
SVGO Web Worker, varsayılan eklenti kümesiyle optimizasyonu hemen çalıştırır.
Yüzde azalmayı ve orijinal ile optimize edilmiş dosya boyutlarını görüntüleyin.
Optimize edilmiş SVG'yi cihazınıza kaydetmek için İndir'e tıklayın.
Belirli eklentiler oluşturma sorunlarına neden olursa eklenti yapılandırmasını ayarlayın ve yeniden optimize edin.

Yaygın kullanım örnekleri

Bir ön uç geliştirici, bir üretim varlık ardışık düzenine işlemeden önce Figma'dan dışa aktarılan ikonları optimize eder ve her ikonu 4 KB'dan 1 KB'ın altına indirir.
Bir web tasarımcısı, tarayıcıda görünmez olan ancak dosyayı şişiren editör meta verisi katmanları içeren Illustrator'dan dışa aktarılan SVG illüstrasyonlarını temizler.
SVG gliflerinden ikon yazı tipi oluşturan bir geliştirici, yazı tipi oluşturma adımından önce her kaynak SVG'nin temiz ve tutarlı yapılandırılmış olduğunu sağlar.
Bir performans mühendisi, HTML'deki satır içi SVG'yi denetler ve sayfa ağırlığını iyileştirmek için şişirilmiş her orijinali SVGO optimize edilmiş sürümle değiştirir.

Sık sorulan sorular

SVGO SVG'min görünüşünü değiştirir mi?

SVGO'nun varsayılan eklentileri görsel kayıpsız olacak şekilde seçilmiştir: optimize edilmiş SVG, tüm standart tarayıcılarda orijinaline özdeş şekilde oluşturulur. Bazı agresif eklentiler (yol koordinatlarını çok fazla yuvarlayan olanlar gibi) ince oluşturma farklılıkları getirebilir. Görsel değişiklik fark ederseniz orijinal ve optimize edilmiş dosyaları bir tarayıcıda karşılaştırın ve soruna neden olan eklentiyi devre dışı bırakın.

SVG dosyası optimizasyon için sunucuya gönderiliyor mu?

Hayır. SVGO, tarayıcı sekmenizdeki bir Web Worker içinde çalışır. SVG metni yerel diskinizden okunur, JavaScript belleğinde işlenir ve çıktı indirme için sayfaya döndürülür. Dosya içeriği cihazınızdan çıkmaz.

SVG'm ne kadar küçülür?

Azalma kaynağa bağlıdır. Editör meta verisi içeren tasarım araçlarından dışa aktarılan SVG'ler genellikle yüzde 30 ila 70 oranında küçülür. Zaten yalın olan el yazısı SVG'ler yalnızca yüzde 5 ila 15 azalma görebilir. Araç, her dosyayı ayrı ayrı değerlendirebilmeniz için tam bayt sayılarını ve yüzdeyi gösterir.

Optimizasyon, SVG animasyonlarını veya dosyadaki JavaScript'i etkiler mi?

Yapılandırma animasyon öğelerini ve SMIL özniteliklerini korur. Ancak script öğelerini kaldırır: araç, SVGO varsayılan ön ayarının üzerine removeScripts eklentisini ekler, çünkü gömmek üzere olduğunuz bir SVG çalıştırılabilir kod taşımamalıdır. Öznitelikleri temizleyen bazı eklentiler, animasyon bu özniteliklere kimliğe göre başvuruyorsa animasyonlarla etkileşime girebilir; karmaşık animasyonlar kullanan dosyaları optimize ettikten sonra oluşturulan çıktıyı kontrol edin.

Birden fazla SVG dosyasını aynı anda optimize edebilir miyim?

Mevcut sürüm bir seferde bir SVG dosyası işler. Bir dosya bırakın, sonucu indirin, ardından bir sonraki dosyayı bırakın. Bu sürümde tek bir oturumda birden fazla dosya için toplu işleme mevcut değildir.

Araç SVGO'nun hangi sürümünü kullanıyor?

Araç, bir Web Worker içinde çalışan SVGO'yu paketler. Paketlenen sürüm aracın hakkında bilgisinde belirtilmiştir. SVGO aktif olarak bakımı yapılmaktadır ve eklenti API'si v1, v2 ve v3 arasında önemli ölçüde değişmiştir; mevcut araç v3 eklenti formatını kullanmaktadır.

İlgili araçlar

Her şeyi yerel tutun, tamamlayıcı araçları keşfedin.

Tüm görsel araçları