SVG: nedir, temel kavramlar ve web geliştirmede kullanımı

SVG nedir?

SVG, 2001 yılında W3C tavsiyesi olarak tanıtılan XML tabanlı bir vektör grafik formatıdır. Raster formatların aksine SVG, görüntüleri geometrik ilkeller aracılığıyla tanımlar: noktalar, çizgiler, eğriler ve çokgenler. Bir SVG dosyası, standart araçlarla okunabilen, düzenlenebilen ve sıkıştırılabilen düz metin XML belgesidir.

SVG mimarisi birkaç temel kavram içerir. viewBox, gerçek öğe boyutlarından bağımsız sanal bir koordinat sistemi tanımlar. Örneğin, viewBox="0 0 100 100", içinde tüm koordinatların sabit olduğu 100×100 kare bir ızgara oluşturur. Konteynerin genişliği veya yüksekliği değiştiğinde, içerik orantılı olarak ölçeklenir.

W3C SVG 2 Specification'a göre SVG'nin modern sürümü gradyanlar, maskeler, filtreler, rastgele konumlandırılmış metin, JavaScript ile etkileşim ve CSS ile SMIL aracılığıyla animasyonu destekler. SVG, DOM'a tam bir HTML öğesi olarak entegre edilmiştir ve her grafik ilkel öğe üzerinde programatik kontrol sağlar.

Mobil geliştirmede SVG, iOS'ta UIGraphicsImageRenderer ve Android'de VectorDrawable aracılığıyla da kullanılır — her iki format da SVG benzeri tanımları GPU'da donanım hızlandırmalı rasterlere dönüştürür.

SVG formatının tarihi ve gelişimi

SVG 1.0, 2001 yılında, SVG 1.1 2003 yılında W3C tavsiyesi haline geldi ve SVG 2.0 2012'den beri geliştirme aşamasındadır. SVG 2'nin ana yeniliği, daha derin CSS entegrasyonu, birleştirme ve karıştırma modları desteği ve ad alanı önekleri olmadan HTML'de SVG kullanma yeteneğidir.

SVG 2 henüz Tavsiye statüsüne ulaşmamış olsa da, modern tarayıcılar zaten işlevselliğinin çoğunu desteklemektedir. Chrome, Safari, Firefox ve Edge, SVG 1.1 için neredeyse tam destek ve SVG 2'nin önemli bir bölümünü sunmaktadır.

Temel SVG öğeleri

SVG, iki boyutlu grafikleri tanımlamak için bir dizi öğe sağlar. Her öğenin konumunu, boyutunu ve görsel görünümünü tanımlayan öznitelikleri vardır. Öznitelikler xml öznitelikleri olarak veya CSS özellikleri aracılığıyla ayarlanabilir.

• <rect> — x, y, width, height, rx, ry (köşe yuvarlama) özniteliklerine sahip dikdörtgen.
• <circle> — cx, cy (merkez) ve r (yarıçap) özniteliklerine sahip daire.
• <ellipse> — cx, cy, rx, ry özniteliklerine sahip elips.
• <line> — x1, y1, x2, y2 özniteliklerine sahip çizgi parçası.
• <polyline> — points özniteliğine (koordinat listesi) sahip kırık çizgi.
• <polygon> — points özniteliğine sahip kapalı çokgen.
• <path> — d özniteliğine (komutlar: M, L, C, Q, A, Z) sahip rastgele yol.
• <text> — x, y, font-size, font-family özniteliklerine sahip metin öğesi.

path öğesi en güçlü ve esnek SVG öğesidir. d özniteliği bir dizi komut içerir: M (moveTo), L (lineTo), C (kübik Bezier eğrisi), Q (kuadratik Bezier eğrisi), A (yay), Z (yolu kapat). Her komutun mutlak veya göreceli bir formu vardır (büyük veya küçük harf).

SVG ayrıca <g> aracılığıyla öğe gruplamayı da destekler. Grup, görsel öznitelikleri (fill, stroke, transform) tüm alt öğelere miras bırakır. Bu, bir dizi şeklin tamamına tek bir stil uygulamaya ve bunların konumunu tek bir transform ile kontrol etmeye olanak tanır.

SVG vs raster grafikler: format karşılaştırması

SVG ile raster formatlar (JPEG, PNG, WebP) arasındaki temel fark, bilgi depolama şeklidir. Raster, sabit boyutlu bir ızgaradaki her pikselin rengini depolar. SVG, şekilleri oluşturmak için matematiksel komutlar depolar. Bu fark, formatların tüm avantajlarını ve dezavantajlarını belirler.

HTTP Archive, 2025'e göre web sitelerinin %68'i simgeler için, %34'ü illüstrasyonlar için ve %22'si logolar için SVG kullanır. Ortalama bir SVG simgesi 0.5–2 KB iken, benzer kalitede bir raster simge PNG formatında 5–20 KB'dir.

SVG, fotoğraflar ve karmaşık raster görüntüler için uygun değildir — XML tanımının boyutu eşdeğer JPEG'i aşacaktır. SVG için önerilen uygulama alanları: simgeler, logolar, illüstrasyonlar, diyagramlar, grafikler, responsive tasarıma sahip arayüz öğeleri.

SVG'yi ne zaman ve raster formatı ne zaman seçmeli

SVG, Retina ekranlarda ve tarayıcının her yakınlaştırma düzeyinde net görünmesi gereken arayüz öğeleri için en uygun seçimdir. Raster, vektör tanımının aşırı karmaşık olacağı fotoğraflar, karmaşık dokular ve milyonlarca renge sahip görüntüler içindir.

Karma yaklaşım — arayüz öğeleri için SVG ve fotoğraf içeriği için WebP/AVIF kombinasyonu — kalite ve sayfa yükleme performansı arasında en iyi dengeyi sağlar.

Inline SVG ve CSS stillendirme

Inline SVG, SVG işaretlemesini <img> veya background-image aracılığıyla ayrı bir dosya yerine doğrudan bir HTML belgesine gömmektir. Inline SVG'nin avantajı, SVG öğelerinin DOM'un bir parçası haline gelmesi ve CSS ile stillendirilebilmesi, JavaScript ile kontrol edilebilmesi ve ek sunucu istekleri olmadan canlandırılabilmesidir.

<img src="icon.svg">'nin aksine, SVG'nin shadow DOM'da izole edildiği yerde, inline SVG üst belgeden renkleri ve yazı tiplerini miras alır. Bu, örneğin, her durum için ayrı bir dosya yüklemeden CSS sınıfı :hover aracılığıyla fare üzerine geldiğinde simge rengini değiştirmeyi uygulamaya olanak tanır.

CSS-Tricks'e göre inline SVG, modern web uygulamalarında simgeleri kullanmanın önerilen yoludur. CSS özellikleri fill, stroke, stroke-width doğrudan SVG öğelerine uygulanır. CSS özelleştirmesi için, kaynak SVG'de fill ve stroke'un satir içi öznitelikler olarak ayarlanmamış olması önemlidir — aksi takdirde CSS bunları geçersiz kılamaz.

• Avantajlar: CSS stillendirme, JS kontrolü, HTTP isteği yok, viewBox uyarlanabilirliği.
• Dezavantajlar: HTML sayfa boyutunda artış, HTML'den ayrı önbelleğe alamama.
• Alternatif: SVG sprite — birden çok SVG'yi tek bir dosyada birleştirme ve <use href="#id"> kullanma.

SVG sprite'lar önbellekleme sorununu çözer: tüm simgeler tek bir dosyada toplanır, tarayıcı bunu bir kez yükler ve tek tek simgelere sprite içindeki istenen öğenin kimliği belirtilerek <use> aracılığıyla erişilir.

SVG animasyonu: CSS ve SMIL

CSS ile SVG animasyonu, tarayıcıda vektör grafikleri canlandırmanın en yaygın ve verimli yoludur. transform, opacity ve fill gibi CSS özellikleri, HTML öğelerinde olduğu gibi SVG öğelerine de uygulanır. Rastgele bir yol boyunca animasyon için CSS özelliği offset-path kullanılır.

SMIL (Synchronized Multimedia Integration Language), SVG'ye yerleşik, CSS'den bağımsız bir animasyon mekanizmasıdır. <animate>, <animateTransform> ve <animateMotion> öğeleri, JavaScript veya CSS olmadan herhangi bir SVG özniteliğini canlandırmaya olanak tanır. SMIL animasyonunun tarayıcının kare hızıyla senkronize olması garanti edilir.

MDN Web Docs'a göre SMIL tüm modern tarayıcılarda desteklenir, ancak CSS animasyonunun daha öngörülebilir ve verimli olduğu düşünülür. SMIL'in ana kullanım durumu, CSS aracılığıyla erişilemeyen öznitelikleri canlandırmaktır, örneğin <path> öğesinin d (path) özniteliği.

JavaScript + requestAnimationFrame, SVG animasyonu üzerinde maksimum kontrol sağlar. Web geliştiricileri, saf CSS ile uygulanması zor olan zaman çizelgeleri ve yumuşatma işlevlerine sahip karmaşık animasyon dizileri için GSAP ve Anime.js gibi kütüphaneler kullanır.

Kod örnekleri: SVG grafikleri oluşturma

İlk örnek, temel SVG öğelerini kullanan basit bir ev simgesidir. Tüm şekiller rect ve polyline'dır:

<!-- Inline SVG icon -->
<svg viewBox="0 0 100 100" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="50" width="60" height="40" fill="#4A90D9" />
  <rect x="35" y="65" width="30" height="25" fill="#fff" />
  <polyline points="10,50 50,15 90,50" fill="none" stroke="#4A90D9" stroke-width="6" />
</svg>

İkinci örnek, CSS ile dönen bir yükleyici animasyonunu gösterir. Kesikli bir anahat oluşturmak için stroke-dasharray özniteliğine sahip <circle> kullanır:

<!-- CSS animated spinner -->
<svg class="spinner" viewBox="0 0 50 50" width="40" height="40">
  <circle cx="25" cy="25" r="20" fill="none"
    stroke="#4A90D9" stroke-width="4"
    stroke-dasharray="125.6 31.4" />
</svg>

<style>
  .spinner circle {
    animation: spin 1.5s linear infinite;
    transform-origin: center;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>

Üçüncü örnek, düzgün kontur çizimi için bir yolu canlandırmak üzere GSAP kütüphanesini kullanır. GSAP, stroke-dashoffset özniteliğiyle çalışarak çizginin belirme efekti oluşturur:

// GSAP ile yol çiz
import gsap from "gsap";

const path = document.querySelector("#myPath");
const length = path.getTotalLength();

gsap.set(path, {
    strokeDasharray: length,
    strokeDashoffset: length
});

gsap.to(path, {
    strokeDashoffset: 0,
    duration: 2,
    ease: "power2.out"
});