SVG nedir?
SVG (Scalable Vector Graphics), XML tabanlı bir vektör grafik dosya formatıdır. .svg dosya uzantısını kullanır; metin tabanlı yapısı sayesinde kodla okunabilir ve düzenlenebilir. Vektörel olduğu için çözünürlükten bağımsızdır; ikonlar, logolar, diyagramlar ve haritalar herhangi bir pikselasyon olmadan büyütülüp küçültülebilir. Web standartlarının bir parçası olarak W3C tarafından tanımlanır ve tarayıcılar tarafından yerel olarak desteklenir. SVG’nin resmi MIME türü image/svg+xml’dir; gzip ile sıkıştırılmış varyantı .svgz olarak saklanabilir.
Tarihçe ve standartlaşma
SVG 1.0, 2001’de W3C Tavsiyesi olarak yayımlandı; 1.1 sürümü 2003’te stabil hale geldi. SVG 2 ile birlikte modern tarayıcı davranışları, metin işleme, çizim modeli ve etkileşim alanlarında iyileştirmeler hedeflenmiştir. Formatın açık standart olması, farklı araçlar ve platformlar arasında sürdürülebilirliğini sağlar.
Temel özellikler
- Şekiller ve yollar: path, rect, circle, line, polygon gibi temel öğeler.
- Stil ve düzen: CSS ile renk, strok, dolgu, yazı tipleri ve medya sorguları.
- Filtreler ve efektler: blur, drop-shadow, gradient ve pattern desteği.
- Metin ve erişilebilirlik: Seçilebilir, indekslenebilir metin; title ve desc ile erişilebilirlik.
- Etkileşim: DOM, olaylar ve JavaScript ile dinamik içerik; CSS animasyonları.
- Görünüm alanı: viewBox ve preserveAspectRatio ile duyarlı (responsive) ölçekleme.
Destek ve uyumluluk
SVG; Chrome, Firefox, Safari ve Edge başta olmak üzere modern tarayıcılarda yerel olarak desteklenir. Windows, macOS, Linux, iOS ve Android üzerinde görüntülenebilir. Düzenleme için Adobe Illustrator, Inkscape, Affinity Designer, Sketch ve Figma gibi araçlar yaygındır. Sunucu tarafında dönüştürme ve görüntüleme için librsvg, rsvg-convert ve ImageMagick gibi araçlar kullanılabilir.
Yaygın kullanım alanları
- Arayüz ikonları ve logolar: Küçük dosya boyutu ve keskin görünüm.
- Diyagramlar ve veri görselleştirme: Etkileşimli grafikler, haritalar.
- Web entegrasyonu: img etiketi, background-image ya da inline svg ile gömme.
- Baskı ve ihracat: PDF, PNG, WebP gibi formatlara dönüştürme.
Güvenlik ve en iyi uygulamalar
- Kullanıcı yüklemelerini mutlaka sanitize edin; script, on* olayları ve foreignObject kullanımını kısıtlayın.
- Doğru Content-Security-Policy tanımlayın; yalnız güvenilir kaynaklardan yükleyin.
- İhtiyaç duymuyorsanız inline SVG yerine harici dosya kullanın.
- SVGO gibi araçlarla gereksiz öznitelikleri kaldırıp boyutu optimize edin.
Dönüştürme ve çalışma akışı
Inkscape veya Illustrator ile SVG’yi PNG, PDF ya da EPS’e dışa aktarabilirsiniz. Komut satırında rsvg-convert veya ImageMagick ile raster çıktılar üretmek mümkündür. Tasarım-tabanlı projelerde sembol-sprite yaklaşımı, tek bir dosyada birden çok ikon barındırarak ağ isteklerini azaltır ve bakımı kolaylaştırır.