SVG-Code verstehen

Kurz erklärt

SVG ist eine Vektorgrafik, die als Text vorliegt: XML mit Elementen für Formen, Linien und Text. Der Browser zeichnet sie in jeder Größe scharf. Weil es Code ist, kann man SVG lesen, von Hand anpassen und, wenn es direkt im HTML steht, mit CSS gestalten.

<svg viewBox="0 0 24 24" width="24" height="24">
  <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
  <path d="M8 12 L11 15 L16 9" fill="none" stroke="currentColor" stroke-width="2"/>
</svg>

Das ist ein Kreis mit Häkchen: ein circle und ein path mit drei Punkten.

Hintergrund

Die meisten SVGs entstehen in Grafikprogrammen wie Affinity, Illustrator oder Figma und werden exportiert. Pfade von Hand zu schreiben, empfiehlt nicht einmal MDN.¹ Lesen können sollte man den Code trotzdem: um Exporte aufzuräumen, Farben auf CSS umzustellen, Fehler zu finden oder kleine Icons anzupassen.

Wichtige Aspekte

Koordinatensystem

Der Ursprung (0,0) liegt oben links. x wächst nach rechts, y wächst nach unten, also andersherum als im Matheunterricht, aber genau wie bei HTML.²

Zahlen ohne Einheit sind User Units. Ohne viewBox ist eine User Unit ein CSS-Pixel.²

viewBox: das innere Koordinatensystem

viewBox="min-x min-y breite höhe" legt fest, welcher Ausschnitt der Zeichenfläche auf die tatsächliche Größe des SVG abgebildet wird.³

<svg width="200" height="200" viewBox="0 0 100 100">
  <rect x="10" y="10" width="40" height="40"/>
</svg>

↗ Beispiel in neuem Tab öffnen

Das SVG ist 200 × 200 Pixel groß, innen wird aber mit 0 bis 100 gerechnet. Jede User Unit wird also zu 2 Pixeln, und das Rechteck erscheint 80 × 80 Pixel groß.² (In Chrome 155 nachgemessen.)

Genau das macht SVG skalierbar: Die Zeichnung rechnet in ihrem eigenen System, die Größe bestimmt man von außen.

preserveAspectRatio: wenn das Format nicht passt

Ist der Platz anders proportioniert als die viewBox, entscheidet preserveAspectRatio, was passiert.⁴

Wert	Wirkung	entspricht ungefähr
xMidYMid meet (Standard)	ganze Grafik sichtbar, mittig, eventuell Rand	object-fit: contain
xMidYMid slice	ganzer Platz bedeckt, Grafik eventuell abgeschnitten	object-fit: cover
none	Grafik wird verzerrt, bis sie genau passt	object-fit: fill

↗ Beispiel in neuem Tab öffnen

Statt xMid/YMid gibt es auch xMin/xMax und YMin/YMax für die Ausrichtung. Die Vergleiche mit object-fit sind meine eigenen.

Grundformen

Element	Wichtige Attribute
rect	x, y, width, height, rx/ry für runde Ecken
circle	cx, cy, r
ellipse	cx, cy, rx, ry
line	x1, y1, x2, y2
polyline / polygon	points (offen bzw. geschlossen)
path	d (beliebige Form)

Quelle: MDN.⁵

Pfade lesen

Im Attribut d steht eine Folge von Befehlen, jeweils ein Buchstabe mit Zahlen. Großbuchstaben meinen absolute Koordinaten, Kleinbuchstaben relative, also vom letzten Punkt aus.¹

Befehl	Bedeutung
M x y	zum Punkt springen, ohne zu zeichnen
L x y	Linie zum Punkt
H x / V y	waagerechte bzw. senkrechte Linie
C x1 y1, x2 y2, x y	kubische Bézierkurve mit zwei Kontrollpunkten
S x2 y2, x y	Fortsetzung einer Bézierkurve
Q x1 y1, x y / T x y	quadratische Bézierkurve und ihre Fortsetzung
A rx ry drehung groß richtung x y	Ellipsenbogen
Z	Pfad zum Startpunkt schließen

Beispiel: M 10 10 h 80 v 80 h -80 Z heißt „bei 10,10 anfangen, 80 nach rechts, 80 nach unten, 80 nach links, zurück zum Start“. Das ergibt ein Quadrat.¹

↗ Beispiel in neuem Tab öffnen

Gruppieren und wiederverwenden

• <g> fasst Elemente zusammen. Styles am g werden vererbt.⁶
• <defs> enthält Dinge, die nicht direkt gezeichnet werden, etwa Verläufe.⁶
• <symbol> ist eine Vorlage mit eigener viewBox. Es wird selbst nicht gezeichnet, nur über <use>.⁷
• <use href="#id"> setzt ein Element oder Symbol an anderer Stelle ein. Der Inhalt ist ein Klon in einem versteckten Shadow DOM.⁸

Damit baut man Icon-Systeme, siehe SVG-Icons barrierefrei einbinden.

Einbindung: was CSS erreicht

Wie man ein SVG einbindet, entscheidet, was man damit machen kann:⁹

Einbindung	Seiten-CSS wirkt hinein	Skripte im SVG	Externe Ressourcen im SVG
Inline <svg> im HTML	ja	ja (Teil der Seite)	ja
<svg><use href="datei.svg#id">	nur über Vererbung	–	–
<img src="datei.svg">	nein	nein	nein, nur data:-URLs
CSS background-image	nein	nein	nein, nur data:-URLs
<object>, <iframe>, <embed>	nein (eigenes Dokument)	ja	ja

Die Spalte „Seiten-CSS“ habe ich aus dem Unterschied zwischen eingebettetem Dokument und Inline-Code abgeleitet und in Chrome 155 für <img> geprüft: Eine Regel circle { fill: red } auf der Seite färbte das Inline-SVG rot, das SVG im <img> nicht. Ein @media (prefers-color-scheme: dark) innerhalb der SVG-Datei griff dagegen auch im <img>, und zwar abhängig von color-scheme der Seite bzw. des <img> (Details in SVG mit CSS gestalten).

↗ Beispiel in neuem Tab öffnen

flowchart TD
  A["SVG einbinden"] --> B{"Soll CSS der Seite<br/>Farben oder Zustände steuern?"}
  B -- nein --> C{"Inhaltsbild oder Deko?"}
  C -- Inhalt --> D["img mit alt"]
  C -- Deko --> E["CSS background-image<br/>oder img mit alt=''"]
  B -- ja --> F{"Mehrfach auf der Seite,<br/>z. B. Icons?"}
  F -- ja --> G["symbol + use"]
  F -- nein --> H["Inline-svg"]

Das Diagramm ist eigene Einordnung aus der Tabelle oben.

Beispiele

Ein exportiertes Icon aufräumen (eigenes Beispiel):

<!-- Export aus dem Grafikprogramm -->
<svg xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 48 48" version="1.1">
  <title>Created with Sketch</title>
  <g id="Page-1" stroke="none" fill="none">
    <path d="…" fill="#1A1A1A"/>
  </g>
</svg>
 
<!-- aufgeräumt für Inline-Einsatz -->
<svg viewBox="0 0 48 48" aria-hidden="true">
  <path d="…" fill="currentColor"/>
</svg>

• width/height raus, die Größe kommt aus dem CSS. Aber Vorsicht, siehe Fallstricke.
• Den nutzlosen Titel raus, er wäre sonst der zugängliche Name.¹⁰
• Leere Gruppen und version raus.
• Die feste Farbe durch currentColor ersetzen, dann übernimmt das Icon die Textfarbe (siehe SVG mit CSS gestalten).

Fallstricke

• Inline-SVG ohne Größe wird riesig. In Chrome 155 nachgemessen: Ein <svg viewBox="0 0 24 24"> ohne width und height wurde in einem 400px breiten Container 400 × 400 groß, ein <svg> ganz ohne Angaben 300 × 150. Deshalb immer eine Größe setzen, im HTML oder per CSS (width: 1em; height: 1em).
• viewBox fehlt. Ohne viewBox skaliert der Inhalt nicht mit, wenn man die Größe ändert. Dann ist nur der Rand größer.
• y zeigt nach unten. Wer Koordinaten aus einem Diagramm übernimmt, bei dem y nach oben wächst, bekommt die Grafik auf den Kopf gestellt.
• Gleiche IDs. Steht dasselbe SVG zweimal inline auf der Seite, gibt es auch jede id (Verläufe, Clip-Pfade) zweimal. Verweise wie fill="url(#verlauf)" treffen dann womöglich das falsche Element. (Eigene Ableitung, nicht getestet.)

Browsersupport

Laut web-features 3.43.0 (abgefragt 2026-10-18): SVG insgesamt Baseline widely available seit 2022-07-15, currentColor seit 2018-01-29. <use>, <symbol> und <title> nennt MDN „available across browsers since July 2015“.

Siehe auch

• SVG mit CSS gestalten
• SVG-Icons barrierefrei einbinden

Quellen

• SVG-Koordinatensystem (MDN) — Ursprung, User Units, Wirkung von viewBox
• viewBox Attribut (MDN) und preserveAspectRatio Attribut (MDN) — Skalierung und Einpassen
• SVG-Grundformen (MDN) und SVG-Pfade (MDN) — Formen und Pfadbefehle
• symbol-Element (MDN) und use-Element (MDN) — Wiederverwendung
• SVG als Bild (MDN) — Einbindungsarten und Einschränkungen
• Styling SVG use Content with CSS (Sara Soueidan) — g, defs, symbol, use im Überblick
• Contextually Marking up accessible images and SVGs (Scott O’Hara) — exportierte Titel

Eigene Ergänzungen: die Einbindungstabelle in dieser Form, das Diagramm, das Aufräumbeispiel, die Vergleiche mit object-fit und die Fallstricke. Die Messungen zu viewBox, zur Größe ohne Angaben und zum Seiten-CSS im <img> habe ich am 2026-10-18 in Chrome 155 gemacht, Firefox und Safari nicht.

Footnotes

1. SVG-Pfade (MDN), Einleitung, „Line commands“, „Curve commands“, Stand 2026-08-31. ↩ ↩² ↩³

2. SVG-Koordinatensystem (MDN), Abschnitte „The grid“ und „Pixels, user units, and the SVG user coordinate system“, Stand 2026-07-24. ↩ ↩² ↩³

3. viewBox Attribut (MDN), Einleitung, Stand 2026-04-07. ↩

4. preserveAspectRatio Attribut (MDN), Abschnitt „Syntax“, Stand 2026-04-07. ↩

5. SVG-Grundformen (MDN), Stand 2026-08-27. ↩

6. Styling SVG use Content with CSS (Sara Soueidan), Abschnitt „Quick Overview of SVG Structuring, Grouping and Referencing“, 2015-07-16. ↩ ↩²

7. symbol-Element (MDN), Einleitung, Stand 2025-07-01. ↩

8. use-Element (MDN), Einleitung, Stand 2026-08-14. ↩

9. SVG als Bild (MDN), Abschnitte „Features supporting SVG“ und „Restrictions“, Stand 2025-05-13. ↩

10. Contextually Marking up accessible images and SVGs (Scott O’Hara), Abschnitt „SVGs that convey information“, 2019-05-22. ↩