Web Sitelerinde SVG Kullanımı ve Vektörel Performans Optimizasyonu

1. Gereksiz Metadata ve Katmanları Temizleme

Figma ve Illustrator dosya içine gereksiz XML etiketleri, editör verileri ekler. Dosya boyutu şişer, DOM yavaşlar.

SVGO CLI ile tek komutta temizle:

npx svgo dosya.svg -o dosya.min.svg --multipass

Temizlenenler: metadata, doctype, comments, boş gruplar (<g>).

2. SVG Sprite Mimarisi Kurma

Her ikon için ayrı HTTP isteği atma. Birden fazla inline SVG kopyalamak HTML şişirir. Çözüm: <symbol> ve <use> yapısı.

<svg style="display: none;">
  <symbol id="icon-check" viewBox="0 0 24 24">
    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
  </symbol>
</svg>

<!-- Kullanım -->
<svg class="icon">
  <use href="#icon-check"/>
</svg>

Avantaj: Tarayıcı sembolü tek kez parse eder. Bellek tüketimi düşer.

3. Koordinat Hassasiyeti (Precision) Düşürme

Vektör noktalarında virgülden sonra 4-5 basamak gereksiz CPU yükü üretir. 1 veya 2 basamak yeterli.

Kötü: d="M 10.48573 20.38472 ..."
İyi: d="M 10.5 20.4 ..."

SVGO ayarında floatPrecision: 1 ata. Boyut %30-%50 düşer, görüntü bozulmaz.

4. Inline SVG vs <img> vs CSS Background

• Inline SVG: CSS ile manipülasyon (renk değişimi, hover) ve animasyon gereken kritik alanlarda kullan.
• <img src="ikon.svg">: Statik içerik, dekoratif görseller. Tarayıcı önbelleğinden tam yararlanır. loading="lazy" ekle.
• CSS mask-image: Tek renkli dinamik ikonlar için ideal native yöntem:

.icon {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  mask: url(icon.svg) no-repeat center / contain;
}

5. SVG Güvenliği (XSS Koruması)

Kullanıcı yüklediği SVG dosyaları <script> ve zararlı XML entity içerebilir.

Çözüm: Güvenilmeyen SVG dosyalarını inline basma. <img> etiketiyle yükle (scriptler otomatik devre dışı kalır) ya da DOMPurify ile sanitize et.