Sen Ne Güzel Şeysin Svg

Zamanında grafik üretebilmek için Gimp adlı şeker cihazı öğrenmiş ; hatta Özgürlük İçin'de bir kaç eğitim yazısı hazırlamıştım [1][2][3]. Gimp bilindiği üzere piksel tabanlı grafik üreten bir yazılım. Fotoğraf işlemek için harika, ancak iş bir web sitesi ya da logo tasarlamaya gelince vektörlere ihtiyaç duyuyoruz. Vektör grafiklerin bu tip konular ile ilgili avantajlarını merak edenler için wikipedia makalesini incelemek yeterince aydınlatıcı olabilir.

Vektör grafikler kullanmam gerektiğine karar verdiğimde ise Inkscape adlı programa dalış yaptım ve ardından svg denen şey ile tanıştım. Svg bildiğiniz aşina olduğunuz XML yazımını kullanarak grafikler üretmenizi sağlıyor. Kullanmaya başladığımda oldukça hoşuma gitti. Sizle paylaşmak istedim.

Öncelikle foo.svg adında bir dosya oluşturup kaydedin, ardından bunu xml renklendirmesi yapabilen editörünüzle açın ve aşağıdaki satırları ekeyin.



Farkedildiği üzere bir svg etikenin width ve height özelliklerine çalışma alanımızın enini ve boyunu yazıyoruz. Bu arada resmi görüntülemek için firefox ile açın, kodu değiştirdikçe sayfayı yenileyerek değişimleri görebiliriniz. Şimdi bir kare ekleyelim bu yüzeyimizin içine...



Bu hareket ile birlikte 0,0 pozisyonuna, eni boyu sayfanın tamamını kaplayan bir kare koymuş oluyoruz. Şimdi sayfayı yenilelim... hiç bir şey göremeyeceğiz. Çünkü bu koyduğumuz kare ile ilgili hiç bir görünüm tanımlaması yapmadık. Peki o zaman ne yapıyoruz? svg etiketimizin içerisinde defs adında bir etiket açıyoruz ve bunun içine css dosyamızı yazıyoruz ! :)



Tekrar firefox'a gidelim, kırmızı karemiz karşımızda. Buradaki defs etiketi içerisinde Css tanımlamaları yapabildiğimiz gibi, gradyanlar, efektler ve filitreler ile ilgili tanımlamaları da yapabiliyoruz. Örneğin çizdiğimiz kare düz kırmızı olmak yerine siyahtan beyaza giden bir gradyana sahip olsun dedik diyelim. Bu durumda kendimize bir gradyan tanımlar ve karemizin fill değerini düz renk olarak göstermek yerine gradyan tanımlamamızı gösteririz. Hadi yapalım..




Burada gradient1 adında bir gradyan tanımlaması yaptık ve css bölümündeki doldurma (fill) tanımına bu gradyanı göstererek. Karenin düz renk ile değil bir gradyan ile doldurulmasını sağlamış olduk. Gradyan tanımlaması nispeten karışık gibi. Şöyle tarif edeyim ; normalde elinizde bir grafik programı olduğunu ve gradyan oluşturak için fareyi bir noktada tutup diğerine sürükleyip bıraktığınızı düşünün. Burada x1,y1 farenin tuşuna bastığınız noktayı, x2,y2 de bıraktığınız noktayı temsil ediyor. Yani gradyanın başlangıç ile bitiş noktalarını.

linearGradient etiketi içerisindeki stop etiketleri ise hangi noktda hangi rengin bulunacağını ifade ediyor. Biz burada gradyanın başlangıç noktasında #000000 (siyah) ve bitiş noktasında ise #ffffff (beyaz) rengini kullandık. Bu sayede başlangıçtan uca kadar siyahtan beyaza giden bir geçiş elde ettik.

Bu kadarlık bilgi ilginizi svg konusuna çekmeye yetmiştir diye tahmin ediyorum. Son bir kıyak olarak ise bilsin için yaptığım logo çalışmasının kodunu veriyorum aşağıda. İnceleyip kendinize göre modifiye edebilir kendi logolarınızı oluşturabilirsiniz.



Çıktısı şu şekilde :



Svg ile ilgili bulabileceğiniz bazı kaynaklar:

http://www.w3.org/Graphics/SVG/
http://tr.wikipedia.org/wiki/SVG
http://www.w3schools.com/svg/default.asphttp://wiki.svg.org/index.php/Main_Page