Asıl adı Scalable Vector Graphics, Türkçe’de ise Ölçeklendirilebilir Vektör Grafikleri olarak tanımlıyoruz. Grafik tasarım ile ilgilenenlerin sıkça rastladığı SVG kavramına dair detayları paylaşacağız şimdi sizinle. Gelin en basiti ile SVG nedir, konuyu biraz açalım.
SVG’yi anlamak için önce vektör kavramını anlamak gerekiyor.
Tasarımla ilgilenenlerin mutlaka bilmesi gereken bir kavram olan vektör; çözünürlükten bağımsız ve matematiksel ifadelerle oluşturulan grafik dosyasıdır. En büyük özelliği ve avantajı ise ölçeklendirilebilir olması yani hangi boyutta kullanılırsa kullanılsın herhangi bir detay kaybına uğramamasıdır. Örneğin; içerisinde ay ve yıldız simgelerini içeren bir vektör dosyamız varsa, bunu bir bina boyutuna bile getirsek herhangi bir bozulma olmayacaktır.
İşte SVG’nin mantığı da tam olarak budur. Elimizde bulunan bir SVG dosyasını, web sayfamız içerisinde hangi boyutta kullanırsak kullanalım herhangi bir bozulma meydana gelmeyecektir.
SVG hakkında bilmemiz gereken en önemli bilgi, SVG’nin XML tabanlı oluşudur. Yani aslında SVG dosyası XML yapısında yazılmış bilgileri içerir.
SVG’nin genel özelliklerini özetle şöyle sıralayabiliriz
- XML tabanlıdır.
- Vektör yapısındadır.
- XML yapısı içinde tanımlanmış çizim bilgilerini barındırır.
- SVG dosyası içinde belirtilmiş her element ve her özellik, hareketlendirilebilir yani animasyon haline getirilebilir.
- Herhangi bir metin editörü yardımıyla SVG dosyası oluşturmak mümkündür. Çünkü üçüncü maddede belirttiğim gibi SVG aslında çizim bilgilerini XML yapısında barındıran bir dosyadır. Yine Adobe Illustrator gibi programlarla, oluşturduğunuz çizimleri SVG olarak kaydedebilirsiniz.
- SVG dosyası herhangi bir boyuta ölçeklendirilebilir. Yani elinizde kalp ikonu içeren bir SVG dosyası varsa, siz bu kalp ikonunu ister 100px isterseniz 500px genişliğinde kullanabilirsiniz. Herhangi bir bozulma olmayacaktır.
- SVG dosyaları, sayfaların yazıdırılması esnasında kayba uğramaz.
- Zoom yapıldığı yani yakınlaştırıldığı zaman herhangi bir bozulma olmaz.
- Vektörel olma özelliği göz önüne alındığında kapladığı alan oldukça azdır.
SVG’yi neden kullanmalıyım
- Dosya boyutu çok küçüktür
- Farklı cihaz boyutlarında da netlik kaybetmez
- Retina (Yüksek piksel yoğunluğuna sahip) ekranlarda mükemmel gözükür
- Tasarım kontrolleri oldukça kolaydır
- Çeşitli renk seçeneklerinin olması
- Vektör tabanlı olmasından dolayı şekillendirme yaparken çözünürlük kalitesinin bozulmaması
- Yapılma sürecinde kod desteği gibi imkanlar sunmaktadır.
