SVG Nedir?

SVG (Scalable Vector Graphic), Ölçeklenebilir Vektör Grafikleri XML tabanlı 2 boyutlu vektör grafikleridir.

.svg dosya uzantısına sahiptir ve HTML etiketi olarak oluşturulmuştur, dolayısıyla grafik editörüne ihtiyaç duymadan kod editörü üzerinde düzenlenebilir.

Ölçeklenebilir vektörel grafik kullanımında görüntünün yakınlaştırılması durumunda png ve jpeg formatlarında olduğu gibi bozulma olmaz. Ölçeklenebilir vektör grafikleri formatı düzenlendiğinde (genişlik ve yükseklik değerleri değiştirildiğinde) kalite kaybı oluşmaz. Bunun sebebi vektörel yapının kullanılıp görüntünün kodla oluşturulmasıdır.

Görsel Dosya Formatları Arasında SVG Farkı

Yukarıdaki üç farklı görsel türünden PNG ve JPG formatları farklı boyutlarda pikselleşirken Scalable Vector Graphic formatında bozulma görülmüyor.

Not : Görseller yakınlaştırıldığında bozulma miktarları daha net görülebilir.

Web sayfası üzerinde istenilen boyutta herhangi bir görüntü bozukluğu yaşanmadan kullanılabilir. Ölçeklenebilir vektör grafikleri formatı tercih edildiğinde png ve jpeg formatlarına göre daha az yük oluşturur. Ayrıca web sitelerini oluştururken ikon setleri ve logo görüntü performansı açısından .svg olarak tercih edilmelidir.

Scalable Vector Graphics Kod Yapısı

<svg></svg> etiketinin içerisinde bulunan kodlar görselin içeriğini oluşturur.

SVG Viewbox Nedir?

viewBox özelliği ile sırasıyla x düzlemindeki konumu, y düzlemindeki konumu, genişliği, yüksekliği ayarlanır. Koordinat düzlemi düşünüldüğünde örnekteki viewBox özelliğinin x ve y değerleri 0 olarak belirlendiği için tam ortada yer alır.

<circle></circle> etiketinin cx="" özelliği ile x düzlemindeki konumu, cy="" özelliği ile y düzlemindeki konumu, r="" (radius) özelliği ile de yuvarlağın yarıçapı ayarlanır.

Kaynakça :

https://developer.mozilla.org/en-US/docs/Web/SVG

https://developers.google.com/web/fundamentals/design-and-ux/responsive/images