En son web geliştirme öğreticiler
 

SVG HTML


HTML5 olarak, HTML sayfalarına doğrudan gruba dahil olan gömebilirsiniz.


Doğrudan HTML sayfaları içine yerleştir SVG

İşte size basit bir SVG grafik örneğidir:

Maalesef tarayıcınız satır içi SVG desteklemiyor.

ve burada HTML kodu aşağıdadır:

Örnek

<!DOCTYPE html>
<html>
<body>

<h1>My first SVG</h1>

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

</body>
</html>
Kendin dene "

SVG Code explanation:

  • Bir SVG resmi bir ile başlar <svg> elemanı
  • Genişlik ve yüksekliği, özellikleri <svg> SVG görüntünün genişliğini ve yüksekliğini tanımlamak elemanının
  • <circle> eleman bir daire çizmek için kullanılır
  • Cx ve Cy, özellikleri x ve daire merkezinin y koordinatlar. Cx ve Cy, ihmal edilirse, dairenin merkezi olarak ayarlanır (0, 0)
  • r özelliği, çemberin yarıçapı tanımlar
  • inme ve kontur genişliği öznitelikleri şeklin ana hatları nasıl göründüğünü kontrol eder. Biz 4 piksel yeşile çemberin taslağını set "border"
  • fill özelliği, daire içindeki renk belirtir. Biz sarıya dolgu rengini ayarlamak
  • Kapanış </svg> etiketi SVG resmini kapatır

Not: SVG XML ile yazılmış olduğu için, tüm unsurları sıkıca kapalı olmalıdır!