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:
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!