<svg>

Zuletzt aktualisiert am 6. Februar 2026

Das <svg>-Element bettet skalierbare Vektorgrafiken (Scalable Vector Graphics) direkt in dein HTML ein. Anders als Rasterbilder (PNG, JPG) bestehen SVGs aus mathematischen Formen: Sie bleiben auf jeder Bildschirmgröße und bei jedem Zoom gestochen scharf. Du kannst SVGs per CSS stylen, per JavaScript animieren und sie direkt im HTML-Quellcode schreiben (Inline-SVG) oder als externe Datei per <img src="bild.svg"> einbinden. Inline-SVGs sind besonders praktisch, weil du vollen Zugriff auf die einzelnen Elemente hast, ideal für Icons, Logos, Illustrationen und Diagramme.

Grundlagen

Das <svg>-Element ist ein Inline-Element und gleichzeitig der Container für alle SVG-Inhalte. Es basiert auf XML und bringt sein eigenes Koordinatensystem mit, das über das viewBox-Attribut definiert wird.

• <svg> ist ein Inline-Element: Es verhält sich ähnlich wie ein <img> im Textfluss
• Das viewBox-Attribut definiert das interne Koordinatensystem: viewBox="minX minY breite höhe" legt fest, welchen Ausschnitt du siehst und wie die Koordinaten der Formen interpretiert werden
• width und height bestimmen die Darstellungsgröße im Browser
• SVG bietet zahlreiche Grundformen: <rect> (Rechteck), <circle> (Kreis), <ellipse> (Ellipse), <line> (Linie), <polyline> (Linienzug), <polygon> (Vieleck), <path> (freie Pfade) und <text> (Text)
• Formen lassen sich per CSS oder über die Attribute fill (Füllung) und stroke (Randlinie) stylen
• Inline-SVG vs. <img>: Bei Inline-SVG hast du vollen Zugriff auf alle Elemente per CSS und JavaScript. Bei <img src="bild.svg"> wird das SVG als Bild behandelt: kein Zugriff auf innere Elemente, dafür wird es gecacht und belastet nicht den DOM
• SVGs sind auflösungsunabhängig: Sie sehen auf Retina-Displays genauso scharf aus wie auf normalen Bildschirmen

Syntax

<svg width="200" height="100" viewBox="0 0 200 100">
  <rect x="10" y="10" width="80" height="80"
        fill="#4338ca" rx="8" />
  <circle cx="150" cy="50" r="40"
          fill="#059669" />
</svg>

Attribute

Beispiele

Icon mit viewBox

SVG-Icons nutzen typischerweise ein viewBox-Attribut, damit sie sich an jede Größe anpassen. Hier ein einfacher Stern als Icon. Die viewBox definiert das Koordinatensystem, width und height bestimmen die Darstellungsgröße:

<!-- Dasselbe SVG in verschiedenen Größen -->
<svg width="48" height="48" viewBox="0 0 24 24"
     fill="#eab308" stroke="#ca8a04" stroke-width="1">
  <polygon points="12,2 15.09,8.26 22,9.27
    17,14.14 18.18,21.02 12,17.77 5.82,21.02
    7,14.14 2,9.27 8.91,8.26" />
</svg>

<svg width="32" height="32" viewBox="0 0 24 24"
     fill="#eab308" stroke="#ca8a04" stroke-width="1">
  <polygon points="12,2 15.09,8.26 22,9.27
    17,14.14 18.18,21.02 12,17.77 5.82,21.02
    7,14.14 2,9.27 8.91,8.26" />
</svg>

<svg width="20" height="20" viewBox="0 0 24 24"
     fill="#eab308" stroke="#ca8a04" stroke-width="1">
  <polygon points="12,2 15.09,8.26 22,9.27
    17,14.14 18.18,21.02 12,17.77 5.82,21.02
    7,14.14 2,9.27 8.91,8.26" />
</svg>

SVG mit CSS-Styling

Bei Inline-SVGs kannst du Formen direkt per CSS stylen, entweder mit einem <style>-Block im SVG oder über externe Stylesheets. Das ist besonders nützlich für Hover-Effekte und Farbwechsel:

<svg width="280" height="120" viewBox="0 0 280 120">
  <style>
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }
    .kreis-blau { fill: #4338ca; }
    .kreis-gruen {
      fill: #059669;
      animation: pulse 2s ease-in-out infinite;
    }
    .kreis-rot { fill: #dc2626; }
    .label {
      font-family: sans-serif;
      font-size: 12px;
      fill: #666;
      text-anchor: middle;
    }
  </style>

  <circle class="kreis-blau" cx="60" cy="50" r="35" />
  <text class="label" x="60" y="100">Statisch</text>

  <circle class="kreis-gruen" cx="140" cy="50" r="35" />
  <text class="label" x="140" y="100">Animiert</text>

  <circle class="kreis-rot" cx="220" cy="50" r="35" />
  <text class="label" x="220" y="100">Statisch</text>
</svg>

Responsives SVG

Wenn du nur viewBox angibst, aber keine festen width/height-Werte, passt sich das SVG automatisch an den verfügbaren Platz an. In Kombination mit width: 100% per CSS wird das SVG vollständig responsiv:

<div style="max-width: 300px;">
  <svg viewBox="0 0 200 100"
       style="width: 100%; height: auto;">
    <rect width="200" height="100"
          fill="#4338ca" rx="12" />
    <text x="100" y="55"
          text-anchor="middle"
          fill="white"
          font-family="sans-serif"
          font-size="16">
      Responsive SVG
    </text>
  </svg>
</div>

Barrierefreiheit

SVG-Elemente sind standardmäßig nicht besonders zugänglich. Damit Screenreader und andere assistive Technologien den Inhalt verstehen, solltest du ein paar Dinge beachten:

• Verwende role="img" und aria-label bei SVGs, die eine inhaltliche Bedeutung haben (Icons mit Funktion, Logos, Illustrationen)
• Nutze <title> und <desc> innerhalb des SVG für eine ausführliche Beschreibung. <title> wird von manchen Browsern auch als Tooltip angezeigt
• Für rein dekorative SVGs (Hintergrundmuster, Schmuckelemente) setze aria-hidden="true" und focusable="false", damit Screenreader sie komplett ignorieren
• Verknüpfe <title> und <desc> per aria-labelledby mit dem SVG-Element für maximale Kompatibilität

<!-- SVG mit inhaltlicher Bedeutung -->
<svg role="img" aria-labelledby="icon-title icon-desc"
     width="24" height="24" viewBox="0 0 24 24">
  <title id="icon-title">Warnung</title>
  <desc id="icon-desc">
    Ein gelbes Dreieck mit Ausrufezeichen
  </desc>
  <path d="M12 2L1 21h22L12 2z" fill="#eab308" />
  <text x="12" y="18" text-anchor="middle"
        font-size="14" font-weight="bold">!</text>
</svg>

<!-- Rein dekoratives SVG -->
<svg aria-hidden="true" focusable="false"
     width="16" height="16" viewBox="0 0 16 16">
  <circle cx="8" cy="8" r="4" fill="currentColor" />
</svg>

Häufige Fehler

viewBox vergessen: Ohne viewBox hat dein SVG kein eigenes Koordinatensystem. Die Formen werden dann relativ zu width/height positioniert und das SVG lässt sich nicht vernünftig skalieren. Gib immer eine viewBox an: Sie ist die Grundlage für responsive SVGs.

xmlns im Inline-SVG angeben: Wenn du SVG direkt in ein HTML5-Dokument schreibst, brauchst du xmlns="http://www.w3.org/2000/svg" nicht. Der HTML-Parser erkennt <svg> automatisch als SVG-Element. Das Attribut ist nur nötig, wenn du eine eigenständige .svg-Datei erstellst oder XML-Parser verwendest.

width und height ohne viewBox: Wenn du nur width="200" height="100" setzt, aber keine viewBox angibst, funktioniert die Darstellung zwar, aber das SVG ist nicht skalierbar. Änderst du später width und height, werden die Formen nicht proportional mitskaliert. Mit viewBox definierst du das interne Koordinatensystem. Die Formen passen sich dann automatisch an jede Größe an.

fill und stroke als CSS-Properties vergessen: Viele Entwickler versuchen, SVG-Farben mit color oder background-color zu ändern. SVG-Formen verwenden aber fill (Füllfarbe) und stroke (Randfarbe). Ein praktischer Trick: Setze fill="currentColor" im SVG, dann übernimmt die Form die CSS-color des Elternelements.

Browser-Kompatibilität

SVG wird von allen modernen Browsern vollständig unterstützt. Es ist eine der am breitesten unterstützten Web-Technologien und funktioniert zuverlässig seit vielen Jahren.

Email-Kompatibilität

SVG-Unterstützung in E-Mail-Clients ist leider sehr eingeschränkt. Die meisten großen Clients entfernen SVG-Elemente komplett oder zeigen sie nicht an. Für Grafiken in E-Mails solltest du auf PNG- oder JPG-Bilder setzen, die über <img> eingebunden werden.

Verwandte Elemente