SVG

SVG (Scalable Vector Graphics / Ölçeklenebilir Vektör Grafikleri), XML tabanlı bir vektör görüntü biçimidir. Piksel depolamak yerine SVG talimatları saklar: "(100, 100) noktasında yarıçapı 50 olan bir daire çiz, mavi doldur." Tarayıcı görüntüleme zamanında rasterleştirir; böylece aynı dosya 16×16'dan 4K billboard'a kadar her boyutta keskin görünür.

Özellikler:

• Çözünürlükten bağımsız — retina ve standart ekranlar için aynı dosya.
• Basit şekiller için küçük dosya boyutu — tipik bir simge 500 bayttan 5 KB'a kadardır. Aynı içerik için her raster biçimi boyut açısından geride bırakır.
• Metin olarak düzenlenebilir — herhangi bir editörde açın, yol verisini düzeltin, kaydedin. Özel araç gerekmez.
• CSS ile stillendirilebilir — dolgu, kontur, dönüşüm harici CSS'ten gelebilir.
• Animasyonlanabilir CSS geçişleri ve SMIL aracılığıyla (SMIL'in CSS + WAAPI lehine kullanımdan kaldırıldığına dikkat edin).

SVG'nin kazandığı yer: logolar, simgeler, çizimler, diyagramlar, veri görselleştirmeleri. Kaybettiği yer: fotoğraflar (milyonlarca ince farklı pikseli vektör olarak temsil etmenin verimli bir yolu yoktur), karmaşık degradeler (dosya boyutu şişer), 3D oluşturma (canvas/WebGL kullanın).

Satır içi SVG (HTML'e gömülü), simgeler için modern en iyi uygulamadır — ayrı istek yok, CSS ile stillendirilir, aria-label aracılığıyla erişilebilir. Harici SVG (ayrı dosyada) daha az kritik varlıklar için uygundur.

Kimsenin uyarmadığı XSS saldırı yüzeyi: SVG, XML'dir ve <script> etiketleri içerebilir. Bir foruma, profil fotoğrafına ya da içerik yönetim sistemine yüklenen SVG, uygulamayla aynı kaynaktan Content-Type: image/svg+xml ile sunulursa rastgele kod yürütme vektörüne dönüşür. Azaltma yöntemi: kullanıcı tarafından yüklenen SVG'leri sanitize etmek (DOMPurify işe yarar) ya da onları bir korumalı alandan sunmaktır (example.com yerine img.example.com). Bazı barındırma hizmetleri, riski tamamen ortadan kaldırmak için kullanıcı SVG'lerini yüklemede PNG'ye rasterleştirir.

SVG dosya boyutunu optimize etme: SVGO, standart komut satırı aracıdır — meta veriyi çıkaran, yolları basitleştiren, dönüşümleri birleştiren ve sayısal hassasiyeti yuvarlayan ~40 eklenti çalıştırır. Sketch/Figma dışa aktarmalarında tipik tasarruflar %50-80, gizli katmanlar ve editör meta verisiyle ağır tasarımlarda %95'i aşar. Diske sıkıştırılmış SVG ayrıca gzip ile iyi sıkışır (metin içerik); bu nedenle 5 KB'lık bir SVG genellikle kablo üzerinde 1 KB'ın altına iner. Kaynak: W3C — Ölçeklenebilir Vektör Grafikleri (SVG) 2.

Çözümlü örnek

SVG'de dairesel "X" kapat düğmesi simgesi: <svg viewBox="0 0 24 24" width="24" height="24"><path d="M6 6l12 12M6 18L18 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg> — sıkıştırılmamış ~150 bayt, gzip ile ~80 bayt ve 16 px, 24 px, 48 px'te ya da 2 metrelik vinil çıkartma olarak aynı görünür. Aynı içeriğin PNG karşılığı 1x'te ~400 bayt; 2x retina'da ~1 KB; 3x'te ~1,8 KB; her biri ayrı dosya. SVG'nin currentColor özelliği, iki görüntü dosyası üretmeden tek bir simgenin hover durumları için metin rengini miras almasına izin verir. Şimdi karmaşık bir gradyan ağı ve 5.000 yol düğümü içeren bir SVG düşünün (Illustrator'dan dışa aktarılmış ayrıntılı bir çizim): dosya ~400 KB'a şişer ve çizim zamanında rasterleştirme kare başına ölçülebilir CPU maliyeti getirir. Bu noktada 25 KB'lık WebP daha iyi bir tercihtir — vektör basit geometriler için, raster karmaşıklık için kazanır.

Ne zaman ve neden önem taşır

Doğru biçim seçimi sayfa ağırlığını ve oluşturma performansını onlarca kat değiştirir. SVG şunlar için kullanın: logolar (kesme noktaları genelinde çözünürlükten bağımsız), tek renkli simgeler (sprite veya satır içi), basit grafikler ve infografikler (D3 SVG üretir) ve CSS tarafından stillendirilmesi gereken her görüntü (tema bilincindeki simgeler). Raster (PNG/WebP/AVIF) şunlar için kullanın: fotoğraflar, ekran görüntüleri, çok sayıda renk durumlanan degradeler ve bir tasarımcının yol komutları olarak ifade etmeye istekli olduğundan daha fazla görsel karmaşıklığa sahip her görüntü. SVG'nin gizli yararı erişilebilirlik: <title> ve <desc> öğeleriyle iyi işaretlenmiş bir SVG, ayrı alt metni olmadan hiçbir raster görüntünün yapamayacağı biçimde ekran okuyucu dostudur. Kaynak: MDN — SVG.