SVG Optimize Edici
-
Original Size
-
Optimized Size
-
Savings
SVG Dosyaları Neden Optimize Edilir?
Illustrator, Figma ve Inkscape'ten dışa aktarılan SVG'ler çok sayıda gereksiz veri içerir — yorumlar, editör meta verileri, yedek nitelikler, aşırı ondalık hassasiyet ve boş kapsayıcılar. Optimizasyondan sonra dosya boyutu %30-70 azalır ve yükleme hızlanır.
8 Optimizasyon Stratejisi
Her optimizasyon geçişini bağımsız olarak etkinleştirin/devre dışı bırakın; neyin kaldırıldığı üzerine hassas kontrol
Boyut Azaltma İstatistikleri
Her optimizasyon sonrası özgün boyutu, optimize edilmiş boyutu ve tasarruf oranını görün
Kayıpsız Optimizasyon
Tüm optimizasyonlar SVG'nin görsel görünümünü korur — yalnızca görünmez meta veriler kaldırılır
3 Adımda SVG Optimize Etme
SVG Kodunu Yapıştırın
Tasarım aracından veya dosyadan SVG kaynak kodunu kopyalayıp giriş alanına yapıştırın
Optimizasyonları Seçin
Uygulanacak optimizasyon seçeneklerini işaretleyin — varsayılanlar maksimum azaltma için
Kopyalayın ve Kullanın
Optimize edilmiş SVG'yi kopyalayın, özgün dosyayla değiştirin veya doğrudan HTML'ye gömin
SVG Optimizasyonu Kullanım Alanları
Simge Kütüphaneleri
Figma veya Illustrator'dan dışa aktarılan simge kümelerini kitaplığa eklemeden önce optimize edin
Logolar
Web sitesi başlığı, favori simge ve marka varlıkları için SVG logoları temizleyin
Animasyonlu SVG
Animasyon verisiyle zaten büyüyen animasyonlu SVG'lerin taban boyutunu küçültün
PWA ve Mobil
Daha küçük SVG'ler mobil veri tüketimini azaltır ve Lighthouse performansını artırır
SVG Optimizasyonu En İyi Uygulamaları
✓ CSS Animasyonlarında ID Kaldırma Konusunda Dikkatli Olun
SVG, ID öğelerini hedefleyen CSS veya JS animasyonları kullanıyorsa animasyonların bozulmaması için 'ID'leri Kaldır' seçeneğini devre dışı bırakın.
✓ viewBox Tutun, Genişlik/Yüksekliği Kaldırın
Genişlik/yükseklik niteliklerini kaldırıp yalnızca viewBox bırakmak, SVG'nin CSS aracılığıyla duyarlı ölçeklenmesini sağlar.
✓ Sayıları 2 Ondalık Basamağa Yuvarlayın
5'ten fazla ondalık basamağı olan yol koordinatları görsel olarak ayırt edilemez. 2 basamağa yuvarlamak görsel fark olmaksızın dosyayı küçültür.
✓ CI/CD'de SVGO'yu Otomatikleştirin
Büyük projelerde tüm SVG'leri otomatik olarak optimize etmek için SVGO'yu derleme ardışık düzenine entegre edin.
❓ Sık Sorulan Sorular
SVG optimizasyonuyla dosya boyutu ne kadar küçülür?
Kaynağa bağlı olarak genellikle %30-70 tasarruf sağlanır. Illustrator SVG'leri en fazla tasarruf sağlar; Figma çıktıları zaten nispeten temizdir.
Optimizasyon SVG'nin görünümünü değiştirir mi?
Hayır — bu araçtaki tüm optimizasyonlar yalnızca görünmez verileri kaldırır veya sayıları algılanamayacak kadar küçük bir hassasiyetle yuvarlar. Görsel sonuç özgünüyle aynıdır.
Genişlik ve yükseklik nitelikleri neden kaldırılır?
Sabit kodlanmış genişlik/yükseklik değerleri, SVG'nin CSS aracılığıyla duyarlı ölçeklenmesini engeller. Bunları kaldırıp yalnızca viewBox tutmak CSS özellikleri üzerinden tam boyut kontrolü sağlar.
Bu araçla SVGO arasındaki fark nedir?
SVGO, SVG optimizasyonunun standartı olan Node.js komut satırı aracıdır. Bu araç, Node.js yüklemeden en yaygın optimizasyonlar için kullanışlı bir tarayıcı arayüzü sunar.