Svg

  • SVG:Scalable Vector Graphics / Ölçeklenebilir Vektör Grafikleri seklinde ifade edilir.

  • SVG Vektör tabanli grafikleri xml formatinda tanimlar
  • Bu xml tabanli grafikler web uzerinde cesitli animasyonlar eklenerek kullanilabilir ve oldukcada guzel isler cikarabilirsiniz.(her grafik ogesi icin ayri ayri animasyon tanimlanabilir)
  • SVG goruntulerini begendigniz bir metin editoru yada cizim programi ile olusturabilir,degistirebilirsiniz.
  • HTML5'te svg ogeleri dogrudan html kodlari icine dahil edilebilir/gömülebilir.
  • Svg goruntu dosyalari iframe/img/BackgroundImages/embed/object/... icin kaynak olabilir.
  • Svg kodlarinda/dosyalarinda xml isaretleme dilini kullanacagimiz icin xml hakkinda temel duzeyde bilginizin olmasi iyi olur - yoksa da dert etmeyin ornekleri takip ederken genel mantigi kavrayabilirsiniz.



Hemen kucuk bir ornek yapalim ,bu ornegin detaylarini devam eden derslerde gorecegiz.


<svg width="300" height="220" style="border:1px solid red;">
               <circle  fill="green" cx="150" cy="110" r="100" stroke="black" stroke-width="10" />
</svg>
      



Simdi yukardaki goruntunun benzerini viewBox kullanarak gosterelim.
<svg viewBox="0 0 300 250" xmlns="http://www.w3.org/2000/svg" style="border:1px solid red;">
              <circle  fill="green" cx="150" cy="110" r="100" stroke="black" stroke-width="10"  />
</svg>
Olusturulan circle ayni degerlere sahip olmasina ragmen son daire tarayici hareketlerine gore kendini duzenliyor, Bu sayede ihtiyaca gore esnek goruntuler uretmek mumkun olabiliyor.
Ders akisinda hazirlanan bazi animasyonlar IE'nin eski versiyonlarinda calismayacaktir!!

Bu derse ait gorus ve onerilerinizi yada farkettigniz hatalari Lutfen bana bildirin!
birbyte.net@gmail.com