Softonic

SVG Sıkıştır

Adım 1 / 2
Sonraki

Figma, Illustrator veya Sketch’ten dışa aktarılan bir SVG, genellikle ihtiyaç duyduğundan 2-5 kat daha fazla işaretleme taşır: düzenleyici ad alanları, yorumlar, boş gruplar, gereksiz dönüşümler ve 6 ondalık basamaklı koordinatlar. Bu araç SVG’nizi SVGO tarzı bir işlemden geçirerek gereksiz kısımları temizler ve görüntülenen çıktıyı piksel düzeyinde birebir aynı tutar.

Bir SVG nasıl sıkıştırılır?

  1. 1

    SVG'nizi yapıştırın veya yükleyin

    Ham XML metnini veya bir .svg dosyasını kabul eder.

  2. 2

    Bir optimizasyon düzeyi seçin

    Güvenli (yorumları ve düzenleyici meta verilerini kaldırır), agresif (grupları daraltır, koordinatları yuvarlar, yolları birleştirir) veya özel.

  3. 3

    Farkı inceleyin

    Önceki ve sonraki bayt sayısını karşılaştırın, görsel olarak hiçbir şeyin değişmediğini doğrulamak için görüntülenen sonucu önizleyin.

  4. 4

    Kopyalayın veya indirin

    Optimize edilmiş SVG'yi doğrudan kodunuza yapıştırın veya bir dosya olarak kaydedin.

Bir SVG dosyasını şişiren nedir?

Figma’dan dışa aktarılan bir SVG’yi bir metin düzenleyicide açtığınızda, genellikle şunu görürsünüz:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="..."
     xmlns:sketch="..." width="24.000000" height="24.000000"
     viewBox="0 0 24.000000 24.000000" ...>
  <!-- Generator: Figma ... -->
  <title>icon</title>
  <desc>Created with Figma</desc>
  <g id="Page-1" stroke="none" fill="none" fill-rule="evenodd">
    <g id="icon" transform="translate(0.000000, 0.000000)">
      <path d="M12.000000,2.000000 L..." fill="#000000"/>
    </g>
  </g>
</svg>

Neredeyse her satır kaldırılabilir. Görüntülenen çıktı için yalnızca svg, viewBox ve path gereklidir.

Optimizasyon aracı neleri kaldırır?

Kaldırılan Neden güvenli?
XML yorumları Hiçbir zaman görüntülenmez
Düzenleyici ad alanları (sketch, figma) Tarayıcılar kullanmaz
<title> / <desc> (isteğe bağlı) Erişilebilirlik metni, anlamlıysa saklayın
Boş <g> grupları Görsel etkisi yok
Varsayılan öznitelik değerleri Tarayıcılar zaten varsayılanları kullanır
Birim (identity) dönüşümleri translate(0,0) hiçbir şey yapmaz
Koordinat ondalıkları 3 ondalık basamak ekranda aynı görünür
Kullanılmayan ID’ler Yalnızca başka yerde başvurulan ID’leri saklayın

Tuzaklar

  • ID’leri kaldırmayın: dolgular, maskeler ve filtrelerde CSS veya url(#...) tarafından başvurulan ID’ler. Agresif mod gradyanları bozabilir.
  • viewBox’i koruyun. Onsuz SVG, duyarlı (responsive) şekilde ölçeklenmez.
  • <title>’i koruyun: erişilebilirlik için ona güveniyorsanız (ekran okuyucular onu seslendirir).
  • <use> örneklerini daraltmaktan kaçının. Optimizasyon aracı bunları satır içine alıp tek doğru kaynak olan kalıbı kaybedebilir.

Sıkıştırma gerçekten ne zaman bayt tasarrufu sağlar?

SVG metindir, bu da sunucudaki gzip’in fazlalığın büyük kısmını zaten kaldırdığı anlamına gelir. Sıkıştırılmamış halde 4 KB’tan 1 KB’a düşen bir SVG, hat üzerinde yalnızca 1,2 KB’tan 0,7 KB’a inebilir. Yine de buna değer, ayrıca daha küçük kaynak okumayı da kolaylaştırır.

Sık Sorulan Sorular

Güvenli mod bozmaz. Agresif mod, CSS veya SMIL animasyonları tarafından başvurulan ID’leri kaldırabilir; SVG’nizde animasyon varsa güvenli modu kullanın veya ilgili ID’leri elle izin listesine ekleyin.

Figma/Illustrator dışa aktarımları genellikle %50-80 oranında küçülür. Elle yazılmış SVG zaten derli toplu olduğundan genellikle yalnızca %10-20 azalır.

Varsayılan olarak evet, <title>, <desc> ve aria-* öznitelikleri korunur. SVG tamamen dekoratifse ve etiketi çevredeki HTML sağlıyorsa, bu öznitelikleri kaldırmayı seçebilirsiniz.

Evet. xmlns özniteliği, SVG doğrudan HTML’e yapıştırılırken gerekli olduğu için korunur. Küçük simgeler için satır içi SVG genellikle en hızlı sunum yöntemidir.

İlgili Araçlar

İsimlik Oluşturucu

Ad | ikinci satır listesinden yazdırılabilir en fazla 60 isimlik oluşturun. A4 veya US Letter üzerinde sayfa başına 8 kart ya da 15 etiket seçin ve yerel olarak yazdırın.

Fotoğrafı Eskize Dönüştürme

JPEG, PNG veya WebP fotoğrafı tarayıcıda grafit, yumuşak kalem ya da füzen tonlarında eskize dönüştürüp PNG veya JPEG olarak kaydedin.

Tier Listesi Oluşturucu

Metin ve yerel görsellerle özel bir tier listesi oluşturun. Satırları özelleştirin, sürükleyerek veya klavyeyle sıralayın; JSON, PNG ya da SVG dışa aktarın.

QR Kod Okuyucu

PNG, JPG veya WebP görüntüsünden QR kodu tarayıcıda çözün. URL, Wi-Fi, vCard, SMS, e-posta, takvim, geo veya metni kullanmadan önce görün.

Grafiti Yazı Oluşturucu

Tag, balon, blok, şablon, neon ve wild efektleriyle grafiti tarzı yazılar hazırlayın. Renkleri ayarlayıp tarayıcıda PNG veya SVG olarak dışa aktarın.

Görsel sıkıştırıcı

Görsel kalitesini koruyarak JPG, PNG ve WebP görsellerini sıkıştırın ve dosya boyutunu azaltın. Tamamen tarayıcınızda çalışır, hiçbir şey yüklenmez.