HTML'deki SVG

SVG elementini doğrudan HTML sayfasına eklenebilirsiniz.

SVG'yi doğrudan HTML sayfasına ekleme

Aşağıda basit bir SVG grafik örneği verilmiştir:

Üzgünüm, tarayıcınız içe aktarılan SVG'yi desteklemiyor.

Bu HTML kodudur:

<!DOCTYPE html>
<html>
<body>
<h1>İlk SVG'ım</h1>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>

Deneyin

SVG kodu açıklaması:

  • SVG grafikleri, <svg> elementi ile başlar
  • <svg> elementinin width ve height özellikleri, SVG grafiklerinin genişliğini ve yüksekliğini tanımlar
  • <circle> elementi, daire çizmek için kullanılır
  • cx ve cy özellikleri, daire merkezinin x ve y koordinatlarını tanımlar. Eğer cx ve cy ayarlanmamışsa, daire merkezi (0, 0) olarak ayarlanır
  • r özelliği, dairenin yarıçapını tanımlar
  • stroke ve stroke-width özellikleri, şekil konturunun görüntülenme şeklini kontrol eder. Daire konturunu 4 piksel yeşil 'çerçeve' olarak ayarlıyoruz
  • fill özelliği, dairenin içindeki rengi ayarlar. Doldurma rengini sarı olarak ayarlıyoruz
  • </svg> etiketi ile SVG görseli kapatılır

Dikkat: SVG XML ile yazıldığı için tüm elemanlar doğru kapatılmalıdır!