HTML Tutorial

HTML-tagg: <svg>

Användning av <svg>

<svg>-taggen används för att skapa skalbar vektorgrafik (SVG) i HTML. SVG är ett XML-baserat format som möjliggör skapandet av interaktiva och responsiva bilder.

Attribut för <svg>

  • width och height: Anger bredd och höjd på SVG-bilden.
  • viewBox: Anger visningsområdet för SVG-bilden.
  • preserveAspectRatio: Anger hur SVG-bilden ska anpassas till sin container.

Exempel med <svg>

Följande exempel skapar en enkel SVG-bild av en kvadrat:

<svg width="100" height="100">
  <rect width="100%" height="100%" fill="red" />
</svg>

Utforska <svg>-taggen

<!DOCTYPE html>
<html>
<body>
  <svg width="100px" height="100px" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid meet">
    <circle cx="500" cy="500" r="200" fill="blue" />
  </svg>
</body>
</html>

Detta exempel skapar en blå cirkel i mitten av SVG-bilden.