SVG in HTML

U kunt het SVG-element direct in een HTML-pagina inbeden.

Embed SVG direct in een HTML-pagina

Hier is een eenvoudig voorbeeld van een SVG-figuur:

Sorry, uw browser ondersteunt geen inline SVG.

Dit is de HTML-code:

<!DOCTYPE html>
<html>
<body>
<h1>Mijn eerste SVG</h1>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>

Probeer het zelf

Uitleg van SVG-code:

  • Een SVG-beeld begint met het <svg>-element
  • De width- en height-eigenschappen van het <svg>-element definiëren de breedte en hoogte van het SVG-beeld
  • Het <circle>-element wordt gebruikt om cirkels te tekenen
  • De cx- en cy-eigenschappen definiëren de x- en y-coördinaten van het middelpunt. Als cx en cy niet worden ingesteld, wordt het middelpunt ingesteld op (0, 0)
  • De r-eigenschap definieert de straal van de cirkel
  • De stroke- en stroke-width-eigenschappen beheersen de weergave van de contouren van de vorm. We stellen de contouren van de cirkel in op een groene 'rand' van 4 pixels
  • De fill-eigenschap stelt de kleur van de binnenkant van de cirkel in. We stellen de kleur van de vulling in op geel
  • </svg> Tag sluit SVG Afbeelding

Opmerking: Omdat SVG met XML is geschreven, moeten alle elementen correct worden afgesloten!