SVG Formatı Nedir?

Bu başlık aslında grafik bölümü için daha uygun ancak bakıldığında webmasterların çok daha fazla ihtiyaç duyduğu bir vektörel resim formatı olduğu için webmaster bölümünde olması daha isabetli olabilir.

SVG resim formatını diğer resim formatlarından ayıran özellik ne kadar büyütülürse büyütülsün görüntü kaybı olmamasıdır. Çok kullanılan resim formatları png, jpg, gif vs resim formatlarını büyüttüğünüzde pixeller görünür hale gelirken SVG formatında bu durum yaşanmaz.

Örnek olarak kendi ihtiyacımız için forumumuzda anneler gününde otomatik olarak butonlarda gösterilmesi için hazırladığımız SVG formatındaki resimleri farklı renkleri ile eklenti dosyasından indirebilirsiniz.

Dosyanın PNG formatı...​

Alttaki eklenti dosyasından indirebileceğiniz SVG formatlı resimlerin ön izleme resmi.​

Dosya içeriğinde 4 farklı renkte svg resim ve bunların eşleri %35 oranında yoğunluğu azaltılmış resim var.

SVG’nin mantığı nasıl işler?​

downloadBasitçe şöyle anlatalım. SVG dosyasını web sayfamızın içerisine koymak istiyoruz ancak sayfa içine hangi boyutla yüklüyorsak o boyutta kalsın istiyoruz. Yani herhangi bir bozulma olsun istemiyoruz. İşte SVG tam olarak bu prensiple çalışıyor. Web sayfamızın içerisinde SVG dosyasını hangi boyutta kullanırsak kullanalım herhangi bir bozulmaya rastlamıyoruz. En iyi grafik formatlarından biri olarak karşımıza çıkıyor SVG. Özellikle ölçeklenebilirlik, etkileşim, programlanabilirlik, performans ve erişebilirlik taleplerine cevap veren en iyi formatlardan biri. SVG, XML tabanlı bir vektör grafik formatı; Web’de ve diğer ortamlarda çeşitli grafikleri görüntülemek için kullanılır. SVG aynı zamanda bir W3C standardıdır yani JavaScript, DOM, CSS ve HTML dahil açık standart diller ve teknolojilerle kolayca çalışabilir. W3C küresel endüstri standartlarını belirlediği sürece, SVG’nin tarayıcıdaki vektör grafikleri için fiili standart olmaya devam etmesi muhtemel gözüküyor. SVG’nin özelliklerinden biri modern web geliştirmedeki sorunların çoğunu çözmesi diyebiliriz. Örneğin SVG ile her türlü görselliği oluşturmak için farklı şekilleri, yolları ve metin öğelerini birleştirebilirsiniz. Üstelik herhangi bir bozulma yaşamadan.

Neden SVG kullanmalıyız?​

Bunun aslında bir değil birçok nedeni var. Küçük dosya boyutlarına sahip olması, vektörel olduğu için çözünürlük kalitesi asla bozulmadan şekillendirilebilmesi, Retina Display ekranlarında başarılı olması ve belki de en önemlisi tasarım sürecinde kod desteği imkanı sunması. SVG nerede karşıma çıkacak sorusunun yanıtı ile devam edelim. İlliustrator üzerinden ya da Photoshop programı üzerinden çizdiğiniz bir dosyanın kaydedilmesi aşamasında SVG formatında kaydet seçeneğini bulabilirsiniz.

SVG’nin genel özellikleri nelerdir?​

• Vektör alt yapısındadır ve XML tabanlıdır.
• XML yapısı içinde tanımlanan çizim bilgilerini barındırır.
• SVG dosyası içinde belirlenen her özellik, animasyon haline getirilebilir.
• SVG dosyası herhangi bir boyuta ölçeklendirilebilir. Herhangi bir bozulma olmayacaktır.
• Dosyalar, yazdırılma sırasında herhangi bir kayba uğramaz.
• Bu bozulma, ZOOM yapıldığında da yaşanmaz yani yakınlaştırmanız herhangi bir görüntü kalitesi düşüklüğüne neden olmayacaktır.
• SVG dosyası hakkında merak edilenlerden biri de kapladığı yerdir. SVG dosyalarının kapladığı alan oldukça azdır.
• Herhangi bir geleneksel çizim, SVG formatına mükemmel şekilde çevrilir.
• SVG kullanarak pek çok canlı efekt elde edebilirsiniz.
• Zorlu arabirimler oluşturabilmenizi ve HTML5, web tabanlı uygulamalar ve RIA ile birleştirebilmenize olanak sağlar.