SVG i HTML

Du kan lägga in SVG-elementet direkt i en HTML-sida.

Embed SVG direkt i HTML-sida

Här är ett enkelt exempel på SVG-grafik:

Förlåt, din webbläsare stöder inte inbäddad SVG.

Detta är HTML-koden:

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

Prova själv

SVG-kod förklaring:

  • SVG-bilden börjar med <svg>-elementet
  • width och height egenskaperna på <svg>-elementet definierar bredden och höjden på SVG-bilden
  • <circle>-elementet används för att ritas cirkel
  • cx och cy egenskaperna definierar x- och y-koordinaten för cirkelns mittpunkt. Om cx och cy inte är inställda, sätts mittpunkten till (0, 0)
  • r egenskapen definierar cirkelns radie
  • stroke och stroke-width egenskaperna kontrollerar hur konturen på formen visas. Vi sätter cirkelns kontur till en 4 pixlar grön 'ram'
  • fill egenskapen sätter färgen inom cirkeln. Vi sätter fyllfärgen till gul
  • </svg>-taggen stänger SVG-bilden

Observera: Eftersom SVG är skriven i XML måste alla element stängas korrekt!