Html5 Svg Kullanımı

Merhaba arkadaşlar bu konumuzda size sitelerimizde SVG dosyalarını nasıl kullanırız onu göstermeye çalışacağım.
Svg aslında web siteleri için bulunmaz bir nimettir. Neden derseniz Mesela sitenizin logosu 200×100 px boyutunda ama temanızı değiştirdiniz 300×200 px olarak kullanmak zorundasınız. Resminizi büyüttüğünüzde bozulmalar olacaktır. Eğer çalışma dosyanız varsa çalışma dosyasından yeniden kaydederek sitenize yüklemek zorundasınız. Ama SVG sayesinde sitenizde bulunan görselleri vektörel formatta yayınlayabilirsiniz. (Vektörel: ister 5px olarak gösterin istersenizde 5000px olarak gösterin hiçbir bozulma olmadan aynı şekilde görebilirsiniz görselinizi.)
Örnek bir svg kodu yazalım(matematiksel formüllerle şekiller oluşturulmaktadır)

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
   <polygon points="100,10 40,180 190,60 10,60 160,180"
   style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>

Ekrana çıktısı;

Bu şekilde sitemizde görünmektedir. Ama şuanda eski tarayıcılarda sorun çıkmaktadır. Biraz daha beklemek daha iyi olacaktır.
Kendi SVG dosyalarınızı oluşturmak isterseniz; http://svg-edit.googlecode.com/svn-history/r1771/trunk/editor/svg-editor.html (Online)
Adobe Illustrator programı ilede bu kodu elde etmeniz mümkündür. Tek yapmanız gereken farklı kaydet diyerek SVG formatını seçmek.

More Articles for You

2014 Ajanda Tasarımı (INDD)

Merhabalar arkadaşlar, az once yabancı kaynaklı bir internet sitesinden bularak sizlere sunuyorum bunu. 2014 Ajandası hazır tasarımdır. Tamamiyle ingilizceydi Türkçeleştirme …

“Hediyem İstanbul” Desen Tasarımı Yarışması

Yarışma Amacı: “Hediyem İstanbul”un kurumsal yapısını ve konseptini temsil edecek “özgün” DESEN tasarımları ortaya çıkarmak üzere düzenlenen bir yarışmadır. İstanbul …

En Hızlı İnternete Sahip Ülkeler

Dünya nüfusunun 3’te 1’inin hızlı internet erişimine sahip olduğu günümüzde en hızlı kullanım oranları Asya ve Avrupa ülkelerinde. İnternetin doğduğu …

29 Ekim Cumhuriyet Bayramı Doodle

Google 29 Ekim Cumhuriyet bayramımızı unutmadı. Çok hoş bir görselle anlattı. Google uzun süredir bu tür olayları ve sanatçılarla ilgili …

Metrica for Apps

Yandex, ücretsiz internet ölçümleme servisiYandex.Metrica‘nın mobil uygulama geliştiricilerine özel sürümü olan Metrica for Apps‘i kullanıma sundu. iOS, Android ve Windows Phone …

Css Gradient Kodları

Merhaba arkadaşlar, css3’ün nimetleri saymakla bitmiyor. Bu dersimizde Gradient yani renk geçiş efekti koduna bakacağız. Normalde bu tarz renk geçişleri …