HTML'de SVG
SVG öğelerini doğrudan HTML sayfalarınıza gömebilirsiniz.
SVG'yi Doğrudan HTML Sayfalarına Gömün
İşte basit bir SVG grafiği örneği:
ve işte HTML kodu:
Ö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>
SVG Kodu açıklaması:
- Bir SVG görüntüsü bir <svg> öğesiyle başlar
- <svg> öğesinin genişlik ve yükseklik özellikleri, SVG görüntüsünün genişliğini ve yüksekliğini tanımlar.
- <circle> elemanı daire çizmek için kullanılır.
- cx ve cy nitelikleri, dairenin merkezinin x ve y koordinatlarını tanımlar. cx ve cy ayarlanmazsa, dairenin merkezi (0, 0) olarak ayarlanır
- r özelliği dairenin yarıçapını tanımlar
- Kontur ve kontur genişliği nitelikleri, bir şeklin ana hattının nasıl görüneceğini kontrol eder. Dairenin ana hatlarını 4 piksel yeşil "kenarlığa" ayarladık
- Fill niteliği, dairenin içindeki rengi ifade eder. Dolgu rengini sarıya ayarladık
- </svg> kapanış etiketi SVG görüntüsünü kapatır
Not: SVG XML'de yazıldığından, tüm öğeler düzgün bir şekilde kapatılmalıdır!