SVG in HTML5 - HTML lernen

SVG (Scalable Vector Graphics) ist ein XML-basiertes Format zur Beschreibung zweidimensionaler Grafiken als Formen — Punkte, Linien, Kurven und Text — statt als Pixelraster. Da der Browser ein SVG aus einer mathematischen Beschreibung zeichnet, bleibt es bei jeder Größe und auf jeder Bildschirmdichte messerscharf. Deshalb werden Icons, Logos, Diagramme und Grafiken so häufig als SVG ausgeliefert.

HTML5 bietet mehrere Möglichkeiten, SVG in eine Seite einzubinden, wobei jede einen anderen Kompromiss zwischen DOM-Zugriff, Caching, Styling und Fallback eingeht. Diese Seite erklärt alle gängigen Einbettungsmethoden und hilft dir bei der Wahl zwischen ihnen.

Wenn du das Format noch nicht kennst, beginne mit der SVG-Einführung. Eine vollständige Liste der Elemente und Attribute findest du in der SVG-Referenz.

Inline-SVG

Die leistungsstärkste Methode ist es, das SVG-Markup direkt in dein HTML zu schreiben. Da das SVG Teil des Dokuments wird, ist jede Form ein echter DOM-Knoten: Du kannst ihn mit CSS gestalten, mit JavaScript steuern und auf Ereignisse einzelner Pfade reagieren.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="200" viewBox="0 0 300 200"
         xmlns="http://www.w3.org/2000/svg"
         role="img" aria-labelledby="circleTitle">
      <title id="circleTitle">A pink circle outlined in purple</title>
      <circle cx="150" cy="100" r="50" stroke="purple" stroke-width="5" fill="pink" />
    </svg>
  </body>
</html>

Probier es selbst »

Erläuterung des Codes:

Ein Inline-SVG beginnt immer mit einem <svg>-Tag und endet mit </svg>.
width und height legen die Größe des SVG-Bereichs auf der Seite (in CSS-Pixeln) fest.
viewBox="0 0 300 200" definiert das interne Koordinatensystem: Die Werte sind min-x min-y width height. Der Browser skaliert diese Benutzereinheiten so, dass sie zur angezeigten width/height passen. Ein viewBox macht die Grafik wirklich skalierbar und responsiv. (Ohne width/height dehnt sich das SVG aus, um seinen Container zu füllen, und behält dabei das viewBox-Seitenverhältnis bei.)
xmlns="http://www.w3.org/2000/svg" deklariert den SVG-Namespace. Er ist erforderlich, wenn das SVG als eigenständige .svg-Datei ausgeliefert wird; innerhalb von HTML5 leitet der Browser ihn normalerweise selbst ab, aber die Angabe hält das Markup portabel.
Das <circle>-Element zeichnet einen Kreis. cx und cy sind die x/y-Koordinaten seines Mittelpunkts (standardmäßig 0,0 wenn weggelassen), und r ist der Radius.
stroke und stroke-width steuern die Umrisslinie — hier ein 5px breiter lila Rahmen. fill legt die Innenfarbe fest, hier Rosa.

SVG bietet eine Reihe grundlegender Formelemente, die du kombinierst, um eine Grafik aufzubauen. Siehe die SVG-Formelemente-Liste weiter unten.

Gefahr

SVG ist XML, daher muss jedes Element ordnungsgemäß geschlossen sein. Selbstschließende Tags wie <circle ... /> benötigen den abschließenden Schrägstrich, und Container-Tags wie <svg> benötigen ein passendes </svg>.

Barrierefreiheit für Inline-SVG

Dekorative SVGs können mit aria-hidden="true" vor Hilfstechnologien verborgen werden. Wenn die Grafik eine Bedeutung trägt, mache sie zugänglich:

Füge role="img" hinzu, damit Screenreader das gesamte <svg> als einzelnes Bild behandeln.
Gib ihm einen <title> (einen kurzen zugänglichen Namen) und bei Bedarf eine <desc> (eine längere Beschreibung), und referenziere sie dann mit aria-labelledby.

<svg viewBox="0 0 100 100" role="img" aria-labelledby="t d"
     xmlns="http://www.w3.org/2000/svg">
  <title id="t">Sales chart</title>
  <desc id="d">Bar chart showing a 20% rise in Q4 sales.</desc>
  <rect x="10" y="40" width="20" height="50" fill="teal" />
</svg>

Beachte, dass <title> und <desc> spezielle SVG-Elemente sind, kein sichtbarer Text — <title> ist nicht dasselbe wie das HTML-<title> im Dokumentkopf.

Einbetten einer externen `.svg`-Datei

Inline-Markup bläht dein HTML auf und kann nicht separat gecacht werden. Wenn du ein wiederverwendbares Asset hast, bewahre das SVG in einer eigenen file.svg auf und referenziere es. Es gibt vier gängige Wege, dies zu tun.

Als Bild mit `<img>`

Der einfachste und am weitesten unterstützte Ansatz. Das SVG verhält sich wie jedes andere Bild — es wird gecacht, kann lazy-geladen werden und ist einfach zu verwenden.

<img src="logo.svg" width="120" height="40" alt="Company logo" />

Kompromisse: Du kannst nicht auf die Interna des SVG von der CSS oder JavaScript der Seite aus zugreifen, und Skripte im SVG werden nicht ausgeführt. Das ist in der Regel genau das, was man für Icons und Logos möchte. Gib immer alt-Text an. Siehe den HTML-<img>- und Bilder-Leitfaden.

Als Objekt mit `<object>`

<object> lädt das SVG als separates Dokument, sodass seine internen Skripte ausgeführt werden und du über contentDocument auf es zugreifen kannst. Es bietet auch natürlichen Fallback-Inhalt zwischen den Tags.

<object type="image/svg+xml" data="diagram.svg" width="300" height="200">
  <img src="diagram.png" alt="Diagram fallback" />
</object>

Kompromisse: Scripting über die Grenze hinweg unterliegt der Same-Origin-Policy (CORS), und das Styling des SVG vom Stylesheet der übergeordneten Seite aus funktioniert nicht. Lies mehr im Kapitel zum HTML-<object>-Tag.

Als Einbettung mit `<embed>`

<embed> lädt das SVG ebenfalls als externes Dokument. Es ähnelt <object>, kann aber keinen Fallback-Inhalt bereitstellen (es hat kein schließendes Tag und keine Kindknoten).

<embed type="image/svg+xml" src="diagram.svg" width="300" height="200" />

Bevorzuge <object> gegenüber <embed>, wenn du einen Fallback benötigst. Siehe den HTML-<embed>-Tag für Details.

Als CSS `background-image`

Wenn das SVG rein dekorativ ist, setze es als CSS-Hintergrund. Es wird gecacht und hält dein HTML sauber, ist aber für Hilfstechnologien unsichtbar und per Skript nicht erreichbar.

<style>
  .hero {
    width: 300px;
    height: 200px;
    background-image: url("pattern.svg");
    background-size: cover;
  }
</style>
<div class="hero"></div>

Du kannst sogar ein kleines SVG als Daten-URI einbetten: background-image: url('data:image/svg+xml,...').

Inline-SVG vs. externe Datei

Fähigkeit	Inline `<svg>`	Extern (`img`/`object`/`embed`/CSS)
Formen mit Seiten-CSS stylen	Ja	Nein (nur `<object>`/`<embed>` über internes CSS)
Einzelne Formen von der Seite aus skripten	Ja	Eingeschränkt / durch CORS blockiert
Separat vom HTML gecacht	Nein	Ja
Seitenübergreifend ohne Kopieren wiederverwendbar	Nein	Ja
Hält HTML klein	Nein	Ja

Faustregel: Greife auf Inline-SVG zurück, wenn du die Grafik animieren, themen oder mit ihr interagieren möchtest (Icons, die beim Hover die Farbe wechseln, interaktive Diagramme). Verwende ein externes <img src="*.svg"> für statische Logos und dekorative Bilder, die du auf der gesamten Website wiederverwendest.

SVG vs. Rasterbilder

SVG ist ein Vektor-Format; PNG, JPEG, GIF und WebP sind Raster-Formate (Pixelformate).

Auflösungsunabhängigkeit. SVG skaliert auf jede Größe ohne Unschärfe und ohne separate @2x/@3x-Dateien — ideal für Icons, Logos und Strichgrafiken auf hochauflösenden Bildschirmen.
Kleine Dateien für einfache Grafiken. Flache Grafiken mit wenigen Formen sind als SVG oft deutlich kleiner, und der Text darin bleibt auswählbar und durchsuchbar.
Editierbar und skriptfähig. SVG ist Text, daher lässt es sich in der Versionskontrolle verfolgen und animieren.

Wann SVG die falsche Wahl ist: Fotos und detailreiche Bilder. Ein als Tausende von Formen beschriebenes Foto wäre riesig und langsam zu rendern — greife stattdessen auf JPEG oder WebP zurück. SVG glänzt bei scharfer Geometrie, während komplexe pixelgenaue Effekte zu Rasterformaten oder dem <canvas>-Element gehören.

SVG-Formelemente

Inline-SVG bietet eine Reihe fertiger Formen, die du kombinierst, um Grafiken aufzubauen:

Rechteck <rect> — Rechtecke und abgerundete Rechtecke
Kreis <circle> — Kreise, definiert durch Mittelpunkt und Radius
Ellipse <ellipse> — Ovale mit separaten x/y-Radien
Linie <line> — ein gerader Abschnitt zwischen zwei Punkten
Polylinie <polyline> — eine Reihe verbundener gerader Abschnitte
Polygon <polygon> — eine geschlossene Form aus einer Punktliste
Pfad <path> — beliebige Linien und Kurven, die flexibelste Form

Siehe auch

Übung

Welche Methode ermöglicht es, einzelne SVG-Formen mit dem eigenen CSS und JavaScript der Seite zu stylen und zu steuern?

Das SVG inline mit einem <svg>-Element im HTML schreiben.Das SVG mit <img src='logo.svg'> einbetten.Das SVG als CSS background-image setzen.Die SVG-Datei mit <embed> referenzieren.