SVG kodunu küçültme

Küçültücü kodunuza ne yapar

Araç, SVG metnini sabit bir sırayla işler: önce XML bildirimini ve doctype’ı, sonra yorumları, sonra meta veri, title ve description öğelerini kaldırır, ardından ondalık sayıları yuvarlar ve son olarak boşlukları daraltır. Boşluk, sekme ve satır sonlarından oluşan her dizi tek bir boşluğa indirgenir ve kapanış ile açılış etiketleri arasındaki boşluklar silinir, böylece tek satır elde edilir.

Önce ve sonra

Girdi, 126 bayt:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <!-- dot -->
  <circle cx="8.000" cy="8.000" r="3.500"/>
</svg>

Varsayılan ayarlarla çıktı, 97 bayt (yüzde 23 tasarruf):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle cx="8" cy="8" r="3.5"/></svg>

8.000 değerinin 8, 3.500 değerinin 3.5 olduğuna dikkat edin: yuvarlamadan sonra sondaki sıfırlar kaldırılır.

Dokunmadıkları

Bu bir metin küçültücüdür, tam bir optimize edici değildir. Öznitelik adlarını, kimlikleri, sınıfları, grupları, dönüşümleri ve yol komutlarını olduğu gibi tutar. Bu bilinçli bir tasarımdır: CSS, betik ya da gradyanlar tarafından başvurulan kimlikler çalışmaya devam eder ve dosyayı daha sonra düzenlemeniz gerekirse yapısı hâlâ tanınabilir.

Dikkat edilecekler

• Boşluk daraltma, metin öğelerinin içinde de geçerlidir, bu yüzden arka arkaya birden çok boşluk içeren bir etiket tek boşluk gösterir.
• Yuvarlama, öznitelikler içindeki sürüm dizeleri dahil her ondalık sayıya uygulanır; örneğin 1.10, 1.1 olur.
• Küçültülmüş kod okunması zor bir koddur. Özgün dosyayı sürüm kontrolünde tutun ve küçültülmüş kopyayı yalnızca çıktı olarak kullanın.

Küçültmeden sonra hızlı kontrol

Küçültülmüş satırı boş bir HTML dosyasına yapıştırın ve özgünün yanında bir tarayıcıda açın. İkisi aynı görünmelidir. Bir gradyan, maske ya da kırpma yolu çalışmayı bıraktıysa, aracın bunları yeniden adlandırmadığını bildiğiniz için bir kimliğin ya da başvurunun elle değiştirilip değiştirilmediğine bakın. Çok ince bir ayrıntı kaymışsa ondalık hassasiyetini 3 veya üzerine çıkarın ve yeniden çalıştırın.

Sonucu nerede kullanmalı

Tek satırlık bir SVG, satır sonlarının kaçış karakteriyle yazılması gerekeceği bir HTML dosyasına, bir JSX bileşenine, bir data URI’ye ya da bir CSS arka plan kuralına temiz biçimde yapıştırılır.