SVG in HTML
U kunt SVG-elementen rechtstreeks in uw HTML-pagina's insluiten.
Embed SVG rechtstreeks in HTML-pagina's
Hier is een voorbeeld van een eenvoudige SVG-afbeelding:
en hier is de HTML-code:
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-code uitleg:
- Een SVG-afbeelding begint met een <svg>-element
- De attributen width en height van het element <svg> bepalen de breedte en hoogte van de SVG-afbeelding
- Het <circle> element wordt gebruikt om een cirkel te tekenen
- De attributen cx en cy definiëren de x- en y-coördinaten van het middelpunt van de cirkel. Als cx en cy niet zijn ingesteld, wordt het middelpunt van de cirkel ingesteld op (0, 0)
- Het r-attribuut definieert de straal van de cirkel
- De kenmerken streek en streekbreedte bepalen hoe de omtrek van een vorm wordt weergegeven. We stellen de omtrek van de cirkel in op een 4px groene "rand"
- Het vulkenmerk verwijst naar de kleur binnen de cirkel. We zetten de vulkleur op geel
- De afsluitende tag </svg> sluit de SVG-afbeelding
Opmerking: aangezien SVG in XML is geschreven, moeten alle elementen correct worden gesloten!