Giriş: Modern Web ve Vektörel Render Maliyeti

SVG, çözünürlükten bağımsız vektörel grafik formatıdır. Yanlış kullanım DOM şişmesine, CPU yüküne ve layout thrashing sorunlarına yol açar. Modern web projelerinde yüksek Core Web Vitals skorları için SVG varlıklarının optimize edilmesi zorunludur. Dijital ajans standartlarında SVG iş akışı oluşturmak, sayfa yükleme sürelerini ve render gecikmelerini minimize eder.

Adım 1: SVG Kodunu Temizleme ve SVGO Kullanımı

Figma, Illustrator veya Sketch gibi tasarım araçları gereksiz metadata, gizli katmanlar, editör verileri (ör. inkscape/adobe namespace) ve hassasiyeti yüksek koordinat noktaları üretir. Bu fazlalıklar dosya boyutunu %30-80 oranında artırır.

Node CLI ile SVGO: npx svgo -f ./src/icons -o ./dist/icons --multipass komutu ile koordinat hassasiyetini düşürün, kullanılmayan grupları (<g>) ve editör namespace'lerini silin.
pathDataPrecision: Hassasiyeti 2 veya 3 basamağa sabitleyin. Fazla ondalık basamak gereksiz bayt yüküdür.
Gereksiz öğeleri budama: <defs> içindeki boş filtreleri, clipPath maskelerini ve görünmeyen düğümleri temizleyin.

Adım 2: Uygun Entegrasyon Yöntemini Belirleme

Her SVG kullanım senaryosu farklı entegrasyon yöntemi gerektirir:

1. SVG Sprite (Symbol / Use Yöntemi)

Tekrarlayan UI ikonları için en verimli yöntemdir. Tek bir HTTP isteği ile yüklenir veya gömülü tutulur; DOM'a sadece <use> referansı basılır.

<svg class="icon">
  <use href="/assets/sprite.svg#icon-search"></use>
</svg>

2. Inline SVG

CSS ile dinamik renk (ör. fill: currentColor) veya animasyon kontrolü gereken kritik LCP elemanlarında kullanılır. Uyarı: Çok sayıda büyük inline SVG, ana HTML boyutunu ve DOM düğüm sayısını artırır.

3. <img> Etiketi

Etkileşim gerektirmeyen, bağımsız vektörel illüstrasyonlar için uygundur. Tarayıcı SVG'yi ayrı bir thread üzerinde rasterize eder, DOM düğümü oluşturmaz.

Adım 3: CSS ve Donanım Hızlandırma Optimizasyonları

SVG render edilirken tarayıcı CPU'suna yük bindiren stil pratiklerinden kaçının:

currentColor Entegrasyonu: Sabit fill="#000" yerine fill="currentColor" kullanarak CSS temalama maliyetini sıfıra indirin.
vector-effect="non-scaling-stroke": Ölçeklenen ikonlarda stroke kalınlığını korumak için ek JS/CSS yerine yerel SVG özelliğini kullanın.
Ağır Filtreleri Kaldırın: <feGaussianBlur> ve karmaşık gölge filtreleri GPU/CPU render süresini uzatır. Bunları CSS filter veya box-shadow ile değiştirin.

Adım 4: Erişilebilirlik ve Semantik Standartlar

Ekran okuyucular ve arama motorları için erişilebilir SVG yapılandırması uygulayın:

Dekoratif ikonlar için: <svg aria-hidden="true" focusable="false">
Anlam taşıyan grafikler için: <title> ve <desc> etiketleri ekleyin, aria-labelledby ile bağlayın.

Adım 5: Sunucu Tarafı Sıkıştırma (Brotli & Gzip)

SVG XML tabanlı metin dosyasıdır. Nginx, Cloudflare veya CDN katmanında SVG için Brotli sıkıştırmasını aktif edin:

# Nginx yapılandırma örneği
gzip_types image/svg+xml;
brotli_types image/svg+xml;

Özet Kontrol Listesi

1. Tasarım aracından çıkan SVG'leri SVGO ile temizleyin.
2. UI ikon setlerini tek bir SVG Symbol Sprite altında toplayın.
3. DOM düğüm şişmesini önlemek için statik illüstrasyonları <img loading="lazy"> ile yükleyin.
4. Metin tabanlı sıkıştırmayı (Brotli) sunucu düzeyinde doğrulayın.