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

Çizgili Kağıt Oluşturucu

Ücretsiz yazdırılabilir çizgili kağıt oluşturun. Kolej, geniş veya dar çizgi seçin, satır aralığını mm cinsinden ayarlayın, kağıt boyutunu ve bir kenar boşluğu çizgisi belirleyin, ardından yazdırın veya SVG olarak indirin.

Material Design Renk Seçici

Material Design renk paletini gezin. Herhangi bir tonu (50'den A700'e kadar) tek dokunuşla HEX, RGB veya HSL biçiminde kopyalayın.

Kareli kağıt oluşturucu

Çevrimiçi yazdırılabilir kareli kağıt oluşturun: kare veya nokta ızgarası seçin, aralığı mm cinsinden ayarlayın, A4 veya Letter ile özel bir çizgi rengi belirleyin, ardından yazdırın veya net bir SVG indirin.

Kanaviçe Şablonu Oluşturucu

JPEG, PNG veya WebP görselini 10–150 ilmek, 2–40 özel renk, semboller, kesin sayımlar ve kumaş ölçüleri içeren yazdırılabilir kanaviçe şemasına dönüştürün.

Fotoğraflardaki Yüzleri Çevrimiçi Bulanıklaştırın

Yüzlerin veya hassas ayrıntıların üzerine kutular çizin, ardından bulanıklaştırın, pikselleştirin ya da siyah kutuyla kapatın. İşlem tarayıcıda yapılır ve sonuç JPEG olarak indirilir.

Görüntü Formatı Dönüştürücü

Görselleri doğrudan tarayıcıda JPG, PNG veya WebP biçimine dönüştürün; kayıplı biçimlerde kaliteyi siz kontrol edin, PNG ve WebP'de şeffaflık korunur.

Araç diğer dillerde mevcuttur