SVG-Einführung

SVG (Scalable Vector Graphics) beschreibt zweidimensionale Grafiken in XML. Anstatt ein Raster aus farbigen Pixeln zu speichern (wie JPEG, PNG oder GIF es tun), speichert eine SVG-Datei die Anweisungen zum Zeichnen von Formen — Linien, Kurven, Kreise, Rechtecke und Text. Der Browser liest diese Anweisungen und rendert das Bild in der jeweils angezeigten Größe neu, sodass das Ergebnis bei jeder Zoomstufe und Bildschirmauflösung scharf bleibt.

SVG ist eine W3C-Empfehlung und lässt sich mit anderen Standards wie dem DOM, CSS und JavaScript integrieren. Da jede Form ein echtes Element im Dokument ist, können Sie es mit CSS gestalten, animieren und auf Klicks und Hover-Ereignisse reagieren — genau wie bei jedem anderen HTML-Element.

Diese Seite erklärt, wie SVG in einer HTML-Seite funktioniert, wie das Koordinatensystem aufgebaut ist, wann SVG statt Canvas oder einer Rastergrafik verwendet werden sollte, und die drei gängigen Methoden zum Einbetten eines SVG-Dokuments.

Wie SVG in einer HTML-Seite funktioniert

Ein SVG-Bild ist selbst ein kleines XML-Dokument. Das Wurzelelement <svg> enthält untergeordnete Formelemente, und der Browser zeichnet sie in der Quellreihenfolge — spätere Elemente werden über früheren gezeichnet, genauso wie Ebenen in einem Malprogramm gestapelt werden.

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Das Koordinatensystem

SVG verwendet ein Koordinatengitter, dessen Ursprung (0, 0) in der oberen linken Ecke liegt. Die x-Achse wächst nach rechts und die y-Achse wächst nach unten — beachten Sie, dass dies von der y-oben-Konvention abweicht, die Sie möglicherweise aus dem Mathematikunterricht kennen.

• Die Attribute width und height am <svg> legen die Größe des Zeichenbereichs in Pixeln fest.
• Ein viewBox-Attribut (zum Beispiel viewBox="0 0 100 100") definiert den internen Koordinatenraum und ermöglicht es, dieselbe Zeichnung auf jede gerenderte Größe zu skalieren.

Im obigen Beispiel liegt der Mittelpunkt des Kreises bei (50, 50) — der Mitte einer 100×100-Leinwand — und sein Radius erstreckt sich 40 Einheiten in alle Richtungen.

Die <circle>-Attribute verstehen

Jedes Attribut des <circle>-Elements steuert einen Aspekt seiner Darstellung:

Erfahren Sie mehr über das Zeichnen von Umrisslinien unter SVG stroking, und sehen Sie alle Formen und Attribute in der SVG-Referenz.

SVG vs. Canvas vs. Rastergrafiken

Die Wahl der richtigen Technologie hängt davon ab, was Sie zeichnen und wie es sich verändern wird.

• SVG ist am besten geeignet für Grafiken, die bei jeder Größe scharf bleiben müssen und die Sie gestalten, animieren oder interaktiv machen möchten: Icons, Logos, Diagramme, Schaubilder und Karten. Da jede Form ein DOM-Knoten ist, ist sie zugänglich und leicht zu skripten. Bei Szenen mit Zehntausenden einzelner Elemente kann es langsam werden.
• Canvas zeichnet Pixel mit JavaScript auf eine Bitmap. Es hat kein DOM pro Form, was es effizient für sich schnell ändernde Szenen mit vielen Objekten macht — Spiele, Partikeleffekte und Echtzeit-Datenvisualisierungen — aber das Ergebnis skaliert nicht ohne Neuzeichnen und ist schwieriger zugänglich zu machen.
• Rastergrafiken (JPEG, PNG, GIF, WebP) speichern feste Pixel. Sie sind die richtige Wahl für Fotografien und komplexe Texturen, werden aber beim Vergrößern unscharf oder verpixelt und wiegen bei hohen Auflösungen mehr.

Eine einfache Faustregel: Verwenden Sie SVG für auflösungsunabhängige, skriptbare Vektorgrafiken; verwenden Sie Canvas für hochfrequentes Pixel-Rendering; verwenden Sie Rasterformate für Fotografien.

SVG in HTML einbetten

SVG-Dateien verwenden die Erweiterung .svg und werden von allen modernen Browsern unterstützt. Es gibt drei gängige Methoden, SVG auf einer Seite zu platzieren, jede mit eigenen Vor- und Nachteilen.

Inline <svg>

Schreiben Sie das SVG-Markup direkt in Ihr HTML. Dadurch erhalten Sie vollen Zugriff auf jede Form, sodass Sie es mit CSS gestalten und einzelne Elemente von derselben Seite aus animieren oder skripten können.

<body>
  <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  </svg>
</body>

<img> mit einer SVG-Quelle

Verweisen Sie ein <img>-Element auf eine externe .svg-Datei. Dies ist einfach und cachebar, aber das SVG wird als flaches Bild behandelt: Seine internen Elemente können von der Hostseite nicht gestaltet oder geskriptet werden.

<img src="circle.svg" width="100" height="100" alt="A yellow circle outlined in green" />

Das <object>-Element

Das <object>-Element lädt das SVG als separates Dokument, macht dabei aber sein DOM für Skripte zugänglich, und es ermöglicht die Bereitstellung von Fallback-Inhalten für Browser, die es nicht laden können.

<object data="circle.svg" type="image/svg+xml" width="100" height="100">
  Your browser does not support SVG.
</object>

Weitere Informationen zum Inline-Element selbst finden Sie unter HTML <svg>-Tag und SVG in HTML5.

SVG-Bilder erstellen

Sie können SVG von Hand in einem beliebigen Texteditor schreiben, was für Icons und einfache Formen praktisch ist. Für Grafiken mit vielen Kurven und Pfaden ist ein Zeichenprogramm wie Inkscape meist bequemer — es exportiert saubere .svg-Dateien, die Sie dann manuell verfeinern können. Um geschwungene Formen per Code zu zeichnen, beginnen Sie mit dem SVG-Pfad-Element, und für gerade Segmente sehen Sie das SVG-Linienelement.

SVG zugänglich machen

Wenn ein SVG Bedeutung vermittelt, geben Sie unterstützenden Technologien etwas zum Lesen. Der Ansatz hängt davon ab, wie das SVG eingebettet ist:

• Bei Inline <svg> fügen Sie ein <title> (und eine optionale längere <desc>) als erste untergeordnete Elemente hinzu und markieren Sie den Wurzel mit role="img". Das Referenzieren des Titels mit aria-labelledby verknüpft den zugänglichen Namen mit dem Element.

<svg role="img" aria-labelledby="circleTitle"
     xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <title id="circleTitle">A yellow circle outlined in green</title>
  <desc>A solid yellow disk with a four-pixel green border, used as a status indicator.</desc>
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

• Bei einem SVG, das über <img> geladen wird, verwenden Sie ein beschreibendes alt-Attribut, genau wie bei jedem anderen Bild.
• Wenn die Grafik rein dekorativ ist, verbergen Sie sie vor unterstützenden Technologien mit aria-hidden="true" (inline) oder einem leeren alt="" (bei <img>), damit Screenreader sie überspringen.

Sie können auch zugänglichen Text innerhalb einer Zeichnung mit dem SVG-Textelement hinzufügen.

Vorteile der Verwendung von SVG

Im Vergleich zu Rasterformaten wie JPEG und GIF bietet SVG mehrere Vorteile:

• SVG-Bilder können mit jedem Texteditor erstellt und bearbeitet werden.
• SVG-Bilder können geskriptet, indiziert, durchsucht und komprimiert werden.
• Sie können SVG-Bilder in hoher Qualität bei jeder Auflösung drucken.
• SVG-Bilder können ohne Qualitätsverlust skaliert und gezoomt werden.
• Jede Form ist Teil des DOM, sodass sie mit CSS gestaltet und animiert werden kann.
• SVG ist ein offener W3C-Standard.

Übungen