SVG in HTML
U kan SVG-elemente direk in u HTML-bladsye insluit.
Sluit SVG direk in HTML-bladsye in
Hier is 'n voorbeeld van 'n eenvoudige SVG-grafika:
en hier is die HTML-kode:
Voorbeeld
<!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-kode verduideliking:
- 'n SVG-prent begin met 'n <svg>-element
- Die breedte- en hoogte-kenmerke van die <svg>-element definieer die breedte en hoogte van die SVG-prent
- Die <sirkel> element word gebruik om 'n sirkel te teken
- Die cx- en cy-kenmerke definieer die x- en y-koördinate van die middelpunt van die sirkel. As cx en cy nie gestel is nie, is die sirkel se middelpunt gestel op (0, 0)
- Die r-kenmerk definieer die radius van die sirkel
- Die streep- en streepwydte-kenmerke beheer hoe die buitelyn van 'n vorm verskyn. Ons stel die buitelyn van die sirkel op 'n 4px groen "grens"
- Die vul-kenmerk verwys na die kleur binne die sirkel. Ons stel die vulkleur op geel
- Die sluiting </svg> merker maak die SVG-beeld toe
Let wel: Aangesien SVG in XML geskryf is, moet alle elemente behoorlik toegemaak word!