SVG Nedir? Web İçin Vektör Grafik Rehberi

SVG (Scalable Vector Graphics), XML tabanlı bir vektör grafik formatıdır. Piksel tabanlı görsellerden (PNG, JPG) farklı olarak, SVG dosyaları matematiksel formüllerle tanımlanır ve bu sayede herhangi bir boyuta ölçeklendiğinde kalite kaybı yaşanmaz. Logolar, ikonlar, illüstrasyonlar ve veri görselleştirmeleri için ideal bir formattır.

Neden SVG Kullanmalı?

• Sonsuz ölçeklenebilirlik: Retina ekranlarda bile keskin görünür, pikselleşme olmaz.
• Küçük dosya boyutu: Basit grafikler için PNG/JPG'den çok daha küçüktür.
• CSS ile stillenebilir: Renk, boyut ve diğer özellikleri CSS ile değiştirebilirsiniz.
• Animasyon desteği: CSS veya JavaScript ile animasyon eklenebilir.
• Erişilebilirlik: Metin tabanlı olduğu için ekran okuyucular tarafından okunabilir.
• DOM erişimi: JavaScript ile her elemanına ayrı ayrı erişilebilir.

SVG Temel Yapısı

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
  <circle cx="50" cy="50" r="40" fill="#3b82f6" />
</svg>

xmlns niteliği XML ad alanını, viewBox ise SVG'nin iç koordinat sistemini tanımlar.

viewBox Nedir?

viewBox="min-x min-y width height" formatında yazılır ve SVG'nin "görüş alanını" belirler. Bu sayede SVG'yi herhangi bir boyuta ölçekleyebilirsiniz.

<!-- 0,0'dan başlayan 100x100'lük bir alan -->
<svg viewBox="0 0 100 100">
  <!-- Bu dairenin merkezi (50,50), yarıçapı 40 -->
  <circle cx="50" cy="50" r="40" />
</svg>

width ve height nitelikleri SVG'nin HTML'deki boyutunu, viewBox ise iç koordinat sistemini belirler. viewBox ile width/height farklı olabilir — SVG otomatik olarak ölçeklenir.

Temel SVG Şekilleri

<!-- Dikdörtgen -->
<rect x="10" y="10" width="80" height="40" rx="5" fill="#10b981" />

<!-- Daire -->
<circle cx="50" cy="50" r="30" fill="#f59e0b" />

<!-- Elips -->
<ellipse cx="50" cy="50" rx="40" ry="25" fill="#8b5cf6" />

<!-- Çizgi -->
<line x1="10" y1="10" x2="90" y2="90" stroke="#ef4444" stroke-width="2" />

<!-- Çokgen -->
<polygon points="50,5 90,90 10,90" fill="#06b6d4" />

<!-- Metin -->
<text x="50" y="55" text-anchor="middle" font-size="16">Merhaba</text>

Path Komutları

<path> elemanı, SVG'nin en güçlü ve esnek şekil aracıdır. Tüm karmaşık şekiller path ile çizilir.

<path d="M 10 80 Q 50 10 90 80" stroke="#3b82f6" fill="none" stroke-width="2" />

Temel path komutları:

• M x y — Kalemi konumlandır (Move to)
• L x y — Düz çizgi çiz (Line to)
• H x — Yatay çizgi (Horizontal)
• V y — Dikey çizgi (Vertical)
• Q x1 y1 x y — İkinci dereceden Bézier eğrisi
• C x1 y1 x2 y2 x y — Üçüncü dereceden Bézier eğrisi
• A rx ry rotation large-arc sweep x y — Yay (Arc)
• Z — Yolu kapat

Küçük harfler (m, l, q vb.) göreli koordinat, büyük harfler mutlak koordinat kullanır.

CSS ile SVG Stillendirme

/* Inline SVG stilleri */
svg .icon-path {
  fill: var(--primary-color);
  transition: fill 0.3s ease;
}
svg .icon-path:hover {
  fill: var(--hover-color);
}

/* Stroke animasyonu */
.draw-line {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: draw 1s ease forwards;
}
@keyframes draw {
  to { stroke-dashoffset: 0; }
}

SVG Erişilebilirliği

SVG'leri erişilebilir yapmak için şu adımları izleyin:

<svg role="img" aria-labelledby="title desc">
  <title id="title">Pasta Grafiği</title>
  <desc id="desc">2026 yılı satış dağılımını gösteren pasta grafiği</desc>
  <!-- grafik içeriği -->
</svg>

SVG Optimizasyonu

SVG dosyalarını küçültmek için şu teknikleri uygulayın:

• Gereksiz meta verileri ve editör bilgilerini temizleyin
• Ondalık hassasiyetini azaltın (ör. 50.000000 yerine 50)
• Kullanılmayan grupları ve boş elemanları kaldırın
• SVGO gibi otomatik optimizasyon araçları kullanın
• Tekrarlayan stilleri CSS sınıflarına taşıyın