Modern Web Geliştirmede SVG Neden Kritik?

Vektörel grafikler (SVG), çözünürlükten bağımsız netlik sunar. Piksel tabanlı görsellere göre hafiftir. Yanlış kullanım DOM şişmesine, CPU yüküne ve düşük FPS değerlerine yol açar. Dijital ajans işlerinde yüksek Core Web Vitals skorları için SVG optimizasyonu zorunludur.

Adım 1: Düzenleme Yazılımı Artıklarını Temizleme

Illustrator, Figma veya Inkscape çıktıları gereksiz meta veriler içerir (xmlns:sketch, editor-tracking, bozuk layer adları). Bu çöpler dosya boyutunu %30-60 artırır.

Gereksiz Katmanları Silin: Çizim programında görünmeyen katmanları (hidden layers) dışa aktarmadan önce kaldırın.
SVGO ile Otomasyon: CLI üzerinden SVGO çalıştırarak gereksiz XML öğelerini atın:

npx svgo input.svg -o output.svg --multipass

Adım 2: Path ve Hassasiyet (Precision) Optimizasyonu

Koordinat noktalarındaki ondalık basamak fazlalığı bayt tüketir. 3 basamak altı insan gözüyle ayırt edilemez.

precision: 2 veya precision: 1 kullanın.
Üst üste binen path'leri birleştirin (Compound Path). Karmaşık eğrileri azaltın.

Adım 3: Entegrasyon Yöntemini Doğru Seçme

SVG ekleme yöntemi performansı doğrudan etkiler:

Inline SVG: HTTP isteği yok. CSS ile manipüle edilir. Çok fazla kullanılırsa HTML boyutunu ve DOM düğüm sayısını şişirir.
<img src="ikon.svg">: Tarayıcı önbelleğe alır. CSS/JS ile etkileşime girmez. İkon setleri için değil, statik görseller için uygundur.
SVG Sprite (<use> tag): Tek bir HTTP isteği. Çoklu kullanımda minimum DOM yükü. Modern web trendler standardı.

İpucu: Sitede 10'dan fazla ikon varsa her birini inline basmak yerine tek bir SVG Symbol Sprite dosyası oluşturun ve <use href="/sprite.svg#ikon-adi"></use> şeklinde çağırın.

Adım 4: Renk Yönetiminde currentColor Kullanımı

Aynı ikonun farklı renk varyantları için ayrı dosyalar üretmeyin. fill="currentColor" kullanarak ikona ebeveyn elementin CSS color değerini miras verin.

<svg viewBox="0 0 24 24" fill="currentColor">
  <path d="..." />
</svg>

Adım 5: Gzip / Brotli ve HTTP Caching

SVG salt metindir (XML). Sunucu tarafında Brotli veya Gzip sıkıştırması açıldığında dosya boyutu %70-80 oranında küçülür. Cache-Control: public, max-age=31536000, immutable başlığı ile statik vektörleri önbelleğe alın.