SVG i HTML

Du kan indlejre SVG-elementet direkte i en HTML-side.

Embed SVG direkte i HTML-side

Her er et simpelt SVG grafik eksempel:

Beklager, din browser understøtter ikke inline SVG.

Dette er HTML-koden:

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

Prøv det selv

SVG kode forklaring:

  • SVG-billedet starter med <svg> elementet
  • width og height egenskaberne på <svg> elementet definerer bredden og højden af SVG-billedet
  • <circle> elementet bruges til at tegne en cirkel
  • cx og cy egenskaber definerer x og y koordinaterne for cirkelens midtpunkt. Hvis cx og cy ikke er indstillet, sættes cirkelens midtpunkt til (0, 0)
  • r egenskab definerer cirkelens radius
  • stroke og stroke-width egenskaber kontrollerer visningen af konturen på formen. Vi sætter cirkelens kontur til en 4 pixels grøn 'kant'
  • fill egenskab indstiller farven inde i cirklen. Vi sætter fyldfarven til gul
  • </svg> Tag lukker SVG billede

Bemærk: Da SVG er skrevet i XML, skal alle elementer lukkes korrekt!