Scalable Vector Graphics (SVG – Ölçeklenebilir Vektör Grafikleri) XML tabanlı iki boyutlu grafikleri tanımlamak için W3C tarafından önerilen bir dildir.
1990 yılında HTML diliyle başlayan internet her geçen yıl W3C tarafından geliştirilmeye devam etmiştir. Örneğin html, body, p gibi etiketleri ile başlayan süreç table, img, div gibi birçok etiket, CSS gibi HTML’e yardımcı yapılar ve Javascript gibi bir programlama dili internet standartı olarak dünyaya sunulmuştur. Bu etiket, yapılar ve javascript yenilikleri W3C tarafından standartları olarak dünyaya tanıtılmaktadır. Web tarayıcıları bu standartları kullandığı için internet dünyasına kod geliştiren bir geliştiricide bu standartlara uymak zorundadır. Bu blog yazımda grafik çizimleri için kullanılan dillerden biri olan SVG standardı hakkında bilgi verilecektir.
img etiketi ortaya çıktıktan sonra gif ve jpg gibi resim türleri ile görsel resim ve grafik gibi olaylar web sayfalarına gömülebilir duruma gelmiştir. Ancak, sayfa çözünürlüğü büyütüldüğünde kalite azaltmakta ve daha kaliteli resim sayfaya bağlandığında ise sayfa yüklemesi yavaşlamaktaydı. Bu durumu çözüm olarak W3C HTML kodları yazar gibi standart grafikleri çizebileceğimiz SVG ve Canvas dillleri önerdi. Bu diller sayesinde gif ve jpg gibi resim formatlarına göre çok az yer kaplayan ve SVG sayesinde çözünürlük arttığında dahi resim kalitesi azalmayan bir grafik ortamı elde edildi. Bu blog yazısında SVG dili üzerinde durulacaktır.
SVG üç tip grafik nesnesinin kullanımına olanak sağlar:
Vektör grafik şekilleri: düz çizgilerden ve eğrilerden oluşan yollar, resimler ve metinler
Grafik nesneleri: Yaratılmış nesneleri gruplama, stil, döndürme, birleştirme
SVG özellik seti: içiçe döndürmeler, kırpma, alfa maskeleri ve şablon nesneleri
Bir SVG elementi:
Bir SVG grafiği çizmek için HTML içinde <svg> etiketleri arası kullanılır. <svg> başlangıç etiketine svg genişlik (width) ve yükseklik (height) bilgileri girilir. Ardından SVG dünyası içindeki çizim etiketleri kullanılabilir. Bu örnekte bir dikdörtgen (Rectangle) çizilmiştir. (Özellikle İngilizce karşılıklarını da yazıyorum çünkü SVG kullanırken az da olsa İngilizce bilmek gerekiyor. Bu blog yazılarında konunun mantığı anlatılmaya çalışılacaktır. Diğer çizim etiketlerine derslerimde her zaman önerdiğim w3schools ve W3C dokümanları üzerinden ulaşabilirsiniz.)
id özelliği HTML’de olduğu gibi bu elemente DOM üzerinden ulaşmak için kullanılabilir. x ve y dikdörtgenin başlangıç noktalarıdır. Genişlik ve yükseklik ise dikdörtgenin boyutunu belirler. Fill özelliği ile de dikdörtgen siyah renk ile boyanmıştır. Çizim sınıfları Fill özelliğine benzer kenarlık, kenarlık rengi, kenarlık genişliği vs. gibi bir çok ek özellik vardır.
Bir SVG elementine yukarıdaki gibi direkt özellikler üzerinden şekil verilebileceği gibi CLASS ve STYLE özellikleri üzerinden başka bir deyişle CSS üzerinden de şekil verilebilir. SVG elementine hiç şekil verilmediğinde geçerli özellikleri kullanır. Aşağıda 4 farklı durumu kıyaslayan bir örnek vardır.
Birinci rect elementinde hiçbir tanımlama yapılmamıştır. İkinci rect elementi bir CLASS bilgisi kullanırken, üçüncüsü STYLE içeriği kullanmaktadır. CLASS içeriği CSS bölümündeki rect.bluerect {fill:blue;} bağlıdır. Dördüncü örnekte ise direkt özellik olarak görselleştirme işlemi yapılmaktadır. HTML olduğu gibi ID ve CLASS özellikleri CSS üzerinden erişilebildiği görülmektedir. Şimdi karenin üzerine gelindiğinde bir renk değiştirme işlemi yapmaya çalışalım. CSS bilen arkadaşlar hover özelliğini hatırlarlar. Aşağıda CSS bölümüne hover özelliği eklenmiş bir örnek vardır.
CSS bölümüne sadece rect:hover {fill:yellow;} tanımlanması yeterlidir. Ancak id değeri myRect3 olan etiket içindeki STYLE etiketi sebebiyle bu CSS kodu çalışmaz. Hover tanımlamasının direkt STYLE içine yapılması gerekmektedir.