Giriş: Modern Web İçin Vektörel Grafikler

Modern web sitelerinde SVG kullanımı standart. Çözünürlük bağımsızlığı sağlar, dosya boyutunu düşürür. Yanlış kullanım render yavaşlatır, DOM şişirir. Bu rehber ile vektörel varlıkları optimize edin.

Adım 1: Gereksiz Meta Verileri Temizleme (SVGO)

Vektör editörleri (Figma, Illustrator) gereksiz XML düğümleri üretir. Bunları temizleyin.

npm install -g svgo
svgo input.svg -o output.svg --multipass

Temizlenen öğeler:

<metadata> ve <title> etiketleri
Kullanılmayan ID ve sınıflar
Gereksiz hassasiyette ondalık basamaklar (precision: 2-3 yeterli)
Görünmeyen gruplar (<g>)

Adım 2: Doğru Gömme (Embed) Yöntemini Seçme

Kullanım amacına göre embed yöntemi seçin:

Inline SVG: CSS/JS ile dinamik renk ve animasyon kontrolü gereken durumlar. DOM'a yük bindirir.
<img src="dosya.svg">: Statik ikonlar ve logolar. DOM temiz kalır, tarayıcı önbellekler. CSS ile manipüle edilemez.
SVG Sprite (<use>): Tekrarlayan ikon setleri. Ağ isteklerini azaltır, DOM maliyeti düşüktür.
CSS Mask / Background: UI dekorasyonları. DOM oluşturmaz.

Adım 3: SVG Sprite Mimarisi Kurma

Her ikonu inline basmak yerine sprite kullanın.

<svg style="display:none;">
  <symbol id="icon-arrow" viewBox="0 0 24 24">
    <path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" fill="none"/>
  </symbol>
</svg>

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

Adım 4: Path Sayısını ve Node Karmaşıklığını Azaltma

Dijital ajans ekiplerinin tasarım aşamasında dikkat etmesi gereken kurallar:

Path birleştirin (Compound Path / Flatten). 100 ayrı <path> yerine tek <path d="..."> render maliyetini düşürür.
İhtiyaç dışı vektör detaylarını silin. 24x24 ikon için 500 node gereksizdir.
Gereksiz filtreleri (<filter>, Gaussian Blur) kaldırın. CPU yerine GPU tüketen ağır renderlara neden olur.

Adım 5: Güvenlik ve Sanitization

Kullanıcı yüklemeli SVG dosyaları XSS riski taşır. DOMPurify veya sunucu taraflı temizleme uygulayın.

Inline SVG içinde <script> veya inline JS event (onload, onclick) barındırmayın.

Son Trendler ve İpuçları

CSS currentcolor: SVG dolgu/çizgi renklerini tema rengine bağlayın.
Responsive SVG: Sabit width/height kaldırın, viewBox koruyun. CSS ile boyutlandırın.
Lazy Loading: Ekran dışı SVG img etiketlerine loading="lazy" ekleyin.