<svg>

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.

Steckbrief <svg>

Kategorie: Links & Medien
Art: Inline
Attribute: 6
Beispiele: 3
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 06.02.2026

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

index.html

Grundsyntax

<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

6 Attribute

Attribut und Beispiel	Beschreibung
`width` Number \| String width="200"	Die Darstellungsbreite des SVG-Elements. Kann als Pixelwert (z.B. 200) oder mit Einheit (z.B. '100%') angegeben werden. Ohne Angabe richtet sich die Breite nach dem viewBox-Verhältnis.
`height` Number \| String height="100"	Die Darstellungshöhe des SVG-Elements. Kann als Pixelwert oder mit Einheit angegeben werden. Ohne Angabe richtet sich die Höhe nach dem viewBox-Verhältnis.
`viewBox` String viewBox="0 0 200 100"	Definiert das interne Koordinatensystem als 'minX minY breite höhe'. Bestimmt, welcher Ausschnitt sichtbar ist und wie Koordinaten interpretiert werden. Ohne viewBox entspricht das Koordinatensystem der Darstellungsgröße.
`xmlns` String xmlns="http://www.w3.org/2000/svg"	Der XML-Namespace für SVG. Bei Inline-SVG in HTML5 ist dieses Attribut optional und kann weggelassen werden. Nur nötig, wenn das SVG als eigenständige .svg-Datei verwendet wird.
`fill` String fill="currentColor"	Setzt die Standard-Füllfarbe für alle Kind-Elemente, die kein eigenes fill haben. Kann eine Farbe, 'none' oder 'currentColor' (übernimmt die CSS-Textfarbe) sein.
`stroke` String stroke="#333"	Setzt die Standard-Randlinienfarbe für alle Kind-Elemente. Funktioniert wie fill als vererbbare Eigenschaft.

Beispiele

3 Beispiele

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:

index.html

Stern-Icon in verschiedenen Größen

<!-- 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>

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:

index.html

CSS-Styling im SVG

<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>

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:

index.html

Responsives SVG ohne feste Größe

<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

4 Fehler

01 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.

02 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.

03 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.

04 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

5 von 5

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.

Chrome

Komplett

Vollständige SVG-Unterstützung seit Version 4
Firefox

Komplett

Vollständige SVG-Unterstützung seit Version 3
Safari

Komplett

Vollständige SVG-Unterstützung seit Version 3.2
Edge

Komplett

Vollständige SVG-Unterstützung seit Version 12
Opera

Komplett

Vollständige SVG-Unterstützung seit Version 10

Email-Kompatibilität

0 von 5

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.

Apple Mail

Teilweise

Zeigt Inline-SVGs an, aber keine externen SVG-Dateien per <img>. Kein CSS-Animations-Support im SVG.
Gmail

Keine

Entfernt SVG-Elemente komplett aus dem HTML.
Outlook

Keine

Keine SVG-Unterstützung. Weder Inline noch als Bild.
Thunderbird

Teilweise

Grundlegende SVG-Darstellung möglich, aber ohne JavaScript und mit eingeschränktem CSS.
Yahoo Mail

Keine

Entfernt SVG-Elemente aus dem HTML.

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<svg>

Grundlagen

Syntax

Attribute

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter