HTML SVG Ders_2 HTML ile SVG

SVG'yi HTML İçine Gömmek

Aşağıda basit bir SVG şekli görüyorsunuz:

Bunlar da yukarıdaki şeklin kodları:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

SVG Kodları Nasıl Yazılır?

• Bir svg resmi, <svg> elemanı ile başlar.
• Genişlik ve yükseklik özellikleri <svg> elemanının içinde, width ve height özellikleri ile tanımlanır.
• <circle> elemanı, bir daire çizmek için kullanılır.
• cx ve cy özellikleri, dairenin merkezinin koordinatlarını vermek için kullanılır. Eğer dairenin merkezi, svg elemanına göre (0,0) noktası ise (sol üst köşesi), o zaman cx ve cy özelliklerinin belirtilmesine gerek yoktur.
• r özelliği, dairenin yarıçapını ifade eder.
• stroke ve storke-width özellikleri, dairenin kenar çizgisini stillendiren özelliklerdir (border gibidir).
• fill özelliği, dairenin dolgu rengini belirler.
• Kapama tagı (</svg>) ile svg elamanı bitirilir.

sonraki ders için tıklayınız