SVG Optimize Edici & Dosya Boyutu Küçültücü

Gereksiz meta verileri ve düzenleyici etiketlerini temizleyerek SVG kodlarını hafifletin.

SVG Optimize Edici & Dosya Boyutu Küçültücü

Gereksiz meta verileri ve düzenleyici etiketlerini temizleyerek SVG kodlarını hafifletin.

Nasıl Çalışır?

1
Dosyanızı Ekleyin
İşlemek istediğiniz dosyayı seçin; verileriniz sunucuya aktarılmadan yerel işlenir.
2
Ayarları Yapılandırın
İhtiyacınıza uygun dönüştürme, sıkıştırma veya işleme seçeneklerini belirleyin.
3
İşleyin ve İndirin
Dönüşümü tarayıcınızda çalıştırın ve hazırlanan sonucu anında indirin.
Kavram ve Bilgi Merkezi

SVG Kod Temizleyici ve Optimizatör, Gereksiz Meta Veri ve Yol (Path) Küçültücü

Vektörel grafik formatı olan SVG (Scalable Vector Graphics); Adobe Illustrator, Figma, Inkscape veya CorelDRAW gibi tasarım programlarından dışa aktarıldığında (export) devasa miktarda gereksiz XML kodu içerir. Tasarım editörlerinin kendi iç süreçleri için eklediği tescilli meta veriler, görünmeyen kılavuz çizgileri, gereksiz boşluklar, boş etiketler ve virgülden sonra 6-8 basamağa kadar uzanan aşırı hassas koordinat ondalıkları; SVG dosyasının bayt boyutunu iki üç katına çıkararak web sitesi açılış hızını olumsuz etkiler.

Örneğin bir tasarımcının web sitesi için Illustrator'dan dışa aktardığı 48 KB boyutundaki karmaşık bir vektör ikonu ele alalım. SVG kodu optimize ediciye yapıştırıldığında; <metadata>, <defs> içindeki kullanılmayan stiller, editör namespaces öznitelikleri silinir, viewBox korunarak koordinat hassasiyeti 1 veya 2 basamağa yuvarlanır ve yollar (paths) kompakt komutlarla birleştirilir. Görsel netlikte hiçbir bozulma olmadan SVG dosya boyutu 48 KB'tan tam 11,5 KB'a gerileyerek %76 oranında saf kod tasarrufu sağlanır.

Tüm SVG XML ayrıştırma, öznitelik temizleme ve kod sıkıştırma algoritmaları tamamen tarayıcınızın kendi bünyesinde işletilir. Vektör tasarımlarınız, özel şirket ikonlarınız veya tescilli grafik kodlarınız hiçbir sunucuya yüklenmez.

Temel Mimari ve Matematiksel Formüller

Optimizasyon Tasarrufu (%) = [ (Orijinal SVG Baytı - Optimize Edilmiş SVG Baytı) / Orijinal SVG Baytı ] × 100

XML DOM ağacı ayrıştırılır; gereksiz editör etiketleri, yorum satırları ve boşluklar ayıklanır; koordinat ondalık basamakları yuvarlanarak dosya boyutu küçültülür.

En İyi Uygulamalar ve Temel Yönergeler

  • viewBox Özniteliğini Asla Sildirmeyin: viewBox özniteliği SVG'nin CSS ile responsive olarak esnek ölçeklenmesini sağlar; ayarlar panelinde viewBox koruma seçeneğini daima açık tutun.
  • Koordinat Hassasiyetini 1 veya 2 Basamağa İndirin: Vektör yollarındaki ondalık basamak sayısını 8 yerine 2 yapmak gözle görülür bir fark yaratmazken dosya boyutunu %30 hafifletir.
  • Satır İçi (Inline) SVG Kullanarak HTTP İsteklerini Sıfırlayın: Temizlenmiş SVG kodunu doğrudan HTML dosyanızın içine yapıştırarak harici ağ isteklerini ortadan kaldırın ve CSS ile rengini kontrol edin.
  • Kullanılmayan Kimlik (ID) ve Grupları (g) Temizleyin: Tasarım programlarının oluşturduğu boş grup etiketlerini (<g></g>) eleyerek tarayıcının DOM ayrıştırma süresini hızlandırın.

Sıkça Sorulan Sorular (SSS)

SVG optimizasyonu çizimin kalitesini veya çözünürlüğünü bozar mı?
Hayır. SVG matematiksel vektör formüllerine dayandığı için gereksiz kodların silinmesi çizimin sonsuz ölçeklenebilir netliğini kesinlikle etkilemez.
Neden PNG yerine optimize edilmiş SVG tercih edilmelidir?
SVG her ekran çözünürlüğünde (Retina, 4K) piksellenmeden kristal netliğinde kalır, dosya boyutu çok küçüktür ve CSS ile renkleri dinamik olarak değiştirilebilir.
SVG dosyamdaki metinler neden font gibi görünmüyor?
Tasarım programında metinler 'Create Outlines' (Yola Dönüştür) yapılmamışsa, kullanıcının bilgisayarında o font yüklü değilse standart sistem fontuyla görünür; logolarda metinleri yola dönüştürmek önerilir.
Optimize edilen SVG kodunu nasıl kopyalayabilirim?
İşlem tamamlandığında 'Kodu Kopyala' butonuna basarak panoya alabilir veya '.svg' uzantılı dosya olarak bilgisayarınıza indirebilirsiniz.