SVG Nedir?
Kısa tanım
SVG (Scalable Vector Graphics), iki boyutlu grafikleri piksel ızgarası yerine şekiller, yollar (path) ve metin olarak tarif eden, XML tabanlı bir W3C görsel formatıdır. Matematiksel bir tarif olduğu için her boyutta ve her ekran yoğunluğunda keskin kalır; logo, ikon, diyagram ve sade illüstrasyonlarda genellikle raster formatlardan küçüktür. HTML içine doğrudan gömülebilir, CSS ile stillendirilebilir ve JavaScript ile değiştirilebilir.
Diğer adları: Scalable Vector Graphics, Ölçeklenebilir Vektör Grafikleri, vektörel görsel, .svg
Piksel yerine tarif
Bir PNG ya da JPEG dosyası, her pikselin rengini tek tek saklar. SVG ise “şu koordinatta şu yarıçapta bir daire, şu noktalardan geçen bir eğri” gibi talimatlar içerir ve tarayıcı bu talimatları ekranın o anki boyutuna göre çizer. Dosya düz metindir; bir metin editöründe açılıp okunabilir:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
<path d="M8 12l3 3 5-6" fill="none" stroke="currentColor" stroke-width="2"/>
</svg>viewBox, çizimin kendi iç koordinat sistemini tanımlar: burada 24×24 birimlik bir alan. Görsel ekranda 16 piksel de gösterilse 600 piksel de gösterilse bu koordinatlar orantılı olarak ölçeklenir. currentColor ise çizgi rengini kapsayan öğenin metin renginden alır; aynı ikon koyu ve açık temada ek dosya gerektirmeden doğru rengi kullanır.
Standart açısından son tamamlanmış W3C Önerisi 2011 tarihli SVG 1.1 Second Edition'dır; SVG 2 ise 2018'den beri Aday Öneri (Candidate Recommendation) aşamasındadır ve tarayıcılar özelliklerinin önemli bir kısmını zaten uygular.
Sayfaya eklemenin yolları
| Yöntem | Avantajı | Sınırı |
|---|---|---|
<img src="logo.svg"> | Ayrı dosya olarak önbelleğe alınır; içindeki scriptler çalışmaz | Sayfanın CSS'i SVG'nin içine erişemez |
Satır içi <svg> | CSS ve JavaScript ile tek tek parçalara müdahale edilebilir, ek istek yok | HTML'i büyütür, her sayfada tekrar gönderilir |
CSS background-image | Dekoratif desenler için pratik | Erişilebilirlik bilgisi taşıyamaz, arama motorları içerik görseli saymaz |
<use href="sprite.svg#ikon"> | Çok sayıda ikon tek dosyadan, önbellekli | Kurulumu biraz daha zahmetli |
SVG'nin doğru seçim olmadığı yerler
Fotoğraflar SVG ile ifade edilemez; bir fotoğrafı vektöre çevirmek ya devasa bir dosya ya da kaba bir yaklaşım üretir. Binlerce yol içeren karmaşık illüstrasyonlar da sorunlu olabilir: dosya küçük görünse bile tarayıcı her çizimde bu yolları yeniden hesaplar ve düşük güçlü cihazlarda kaydırma ile animasyon takılabilir. Bu tür görsellerde PNG ya da WebP gibi bir raster format çoğu zaman daha hafiftir.
Kullanıcıdan gelen SVG bir güvenlik konusudur
SVG bir belge formatıdır ve içinde script öğeleri, olay nitelikleri veya harici kaynak referansları bulunabilir. img ile gösterilen bir SVG'deki script çalışmaz; ancak kullanıcıların yüklediği bir SVG kendi alan adınızdan doğrudan açılırsa, içindeki kod sitenizin bağlamında çalışabilir ve bu XSS açığına dönüşebilir. Kullanıcı yüklemelerine izin veren sistemlerde SVG'ler ya bir temizleyiciden (sanitizer) geçirilmeli ya rastera dönüştürülmeli ya da ayrı bir alan adından, kısıtlayıcı bir içerik güvenlik politikasıyla sunulmalıdır.
Optimizasyon ve erişilebilirlik
- Tasarım araçlarından dışa aktarılan SVG'ler editör meta verisi, gereksiz gruplar ve aşırı hassas ondalıklar taşır. SVGO gibi araçlar bunları temizleyerek dosyayı çoğu zaman belirgin biçimde küçültür.
- Metin tabanlı olduğu için gzip veya Brotli ile çok iyi sıkışır; sunucunun SVG yanıtlarını da sıkıştırdığından emin olun.
imgile eklenen anlamlı bir SVG'ye diğer görseller gibi alt metni verilmelidir. Satır içi SVG'derole="img"ile birlikte birtitleöğesi kullanılır; tamamen dekoratif ikonlar isearia-hidden="true"ile ekran okuyuculardan gizlenir.- Google Görseller,
imgöğesindeki SVG dosyalarını dizine ekleyebilir. Sitenin favicon'u için de SVG kullanılabilir; yine de eski tarayıcılar için bir PNG ya da ICO yedeği bulundurmak yaygın bir uygulamadır.