HTML svg Tag - HTML lernen

Das <svg>-Tag wird als Container für SVG-Grafiken verwendet.

SVG (Scalable Vector Graphics) ist eine auf XML basierende Sprache für zweidimensionale Grafiken. Im Gegensatz zu Rasterformaten wie PNG oder JPEG wird ein SVG-Bild durch Formen und Koordinaten statt durch ein festes Pixelraster beschrieben, sodass es in jeder Größe scharf bleibt und ohne Qualitätsverlust skaliert werden kann. SVG unterstützt außerdem Interaktivität, Animation und vollständigen Zugriff auf jedes Element über das DOM.

Diese Seite erklärt, wie SVG direkt in HTML eingebettet wird, das grundlegende viewBox-Koordinatensystem, die grundlegenden Zeichenformen, wie SVG barrierefrei gestaltet wird, die Attribute des <svg>-Elements und den Vergleich zwischen SVG und <canvas>.

Syntax `<svg>`

Das <svg>-Tag wird paarweise verwendet. Die zu zeichnenden Formen werden zwischen dem öffnenden (<svg>) und dem schließenden (</svg>) Tag geschrieben.

Beispiel des HTML-`<svg>`-Tags:

HTML <svg> Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <div style="display:flex; flex-flow:row wrap;">
      <svg width="180" height="180">
        <rect x="20" y="20" rx="20" ry="20" width="100" height="100" style="fill:lightgray; stroke:#1c87c9; stroke-width:4;"/>
      </svg>
      <svg width="200" height="200">
        <circle cx="100" cy="70" r="60" stroke="#1c87c9" stroke-width="4" fill="lightgray"/>
      </svg>
      <svg width="200" height="200">
        <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lightgray; stroke:#1c87c9; stroke-width:4; fill-rule:evenodd;"/>
      </svg>
    </div>
  </body>
</html>

Probier es selbst »

Gefahr

Das xmlns-Attribut ist nur für das äußerste <svg>-Element eigenständiger SVG-Dokumente (eine .svg-Datei) erforderlich. Es wird nicht für innere <svg>-Elemente oder beim Einbetten von SVG als Inline-Code in einem HTML-Dokument benötigt.

Beispiel des HTML-`<svg>`-Tags zum Zeichnen einer Ellipse:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="200">
      <ellipse cx="100" cy="50" rx="100" ry="50" fill="#1c87c9" />
    </svg>
  </body>
</html>

Probier es selbst »

Die viewBox und das SVG-Koordinatensystem

Die viewBox ist das wichtigste Konzept in SVG. Sie definiert das Koordinatensystem, in dem alle Formen gezeichnet werden, und macht ein SVG wirklich skalierbar.

Die Attribute width und height legen die Größe des SVG-Bereichs auf der Seite (in CSS-Pixeln) fest. Das Attribut viewBox hingegen definiert das interne Koordinatensystem anhand von vier Zahlen:

viewBox="min-x min-y width height"

min-x, min-y — die Koordinaten der oberen linken Ecke des Sichtbereichs.
width, height — Breite und Höhe des Sichtbereichs in Benutzereinheiten.

Der Browser ordnet diesen internen Sichtbereich dann dem auf dem Bildschirm angezeigten width/height zu und skaliert ihn entsprechend. Ein Kreis, der bei cx="50" cy="50" mit viewBox="0 0 100 100" gezeichnet wird, liegt daher immer in der Mitte, unabhängig davon, wie groß das SVG dargestellt wird.

Das folgende Beispiel zeichnet denselben Kreis in zwei SVGs. Das erste verwendet nur width/height, sodass die Koordinaten Pixelkoordinaten sind und der Kreis an diese Größe gebunden ist. Das zweite fügt eine viewBox hinzu, sodass die Zeichnung auf ein viel größeres Feld skaliert wird, während der Code identisch bleibt:

<!-- No viewBox: coordinates are pixels, fixed 100×100 drawing -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="#1c87c9" />
</svg>

<!-- viewBox: same coordinates, but the 0 0 100 100 grid is
     stretched to fill a 300×300 box on the page -->
<svg width="300" height="300" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#1c87c9" />
</svg>

Da das zweite SVG das Koordinatensystem (viewBox) von der gerenderten Größe (width/height) trennt, kann es – auch mit CSS – in der Größe geändert werden, und jede Form skaliert proportional. Deshalb ist viewBox für responsive Icons und Illustrationen unverzichtbar.

SVG-Formen

SVG-Zeichnungen werden aus einer kleinen Auswahl grundlegender Formelemente aufgebaut, die innerhalb von <svg> platziert werden. Jede verwendet eigene Koordinaten- und Größenattribute:

<rect> — ein Rechteck, positioniert mit x/y und skaliert mit width/height; rx/ry runden die Ecken ab. Siehe SVG Rectangle.
<circle> — ein Kreis, definiert durch seinen Mittelpunkt cx/cy und den Radius r. Siehe SVG Circle.
<ellipse> — wie ein Kreis, aber mit zwei Radien, rx und ry. Siehe SVG Ellipse.
<line> — eine gerade Linie von (x1,y1) bis (x2,y2). Siehe SVG Line.
<polygon> — eine geschlossene Form, definiert durch eine Liste von points. Siehe SVG Polygon.
<path> — die vielseitigste Form; das Attribut d kodiert Linien, Kurven und Bögen, um nahezu alles zu zeichnen. Siehe SVG Path.

Die meisten Formen teilen die Präsentationsattribute fill (Innenfarbe), stroke (Konturfarbe) und stroke-width (Konturbreite). Eine vollständige Liste der Elemente und Attribute finden Sie in der SVG Reference.

Barrierefreiheit

Inline-SVG ist Teil des DOM der Seite, sodass Screenreader es lesen können – aber nur, wenn Sie es mit zugänglichem Text versehen. Eine dekorativ aussehende Form ohne Beschriftung wird als nichts Nützliches vorgelesen.

Für bedeutungstragendes SVG (Icons, Diagramme, Logos) gehen Sie wie folgt vor:

Fügen Sie ein <title>-Element als erstes Kind hinzu – es dient als zugänglicher Name (und wird als Tooltip angezeigt).
Fügen Sie optional ein <desc>-Element für eine ausführlichere Beschreibung hinzu.
Setzen Sie role="img" auf das <svg>, damit Hilfstechnologien es als einzelnes Bild behandeln.
Verweisen Sie auf den Text mit aria-labelledby oder verwenden Sie direkt aria-label.

<svg width="120" height="120" viewBox="0 0 120 120"
     role="img" aria-labelledby="logoTitle logoDesc">
  <title id="logoTitle">W3Docs logo</title>
  <desc id="logoDesc">A blue circle with a light gray center.</desc>
  <circle cx="60" cy="60" r="50" fill="#1c87c9" />
  <circle cx="60" cy="60" r="25" fill="lightgray" />
</svg>

Wenn ein SVG rein dekorativ ist und keine Information enthält, blenden Sie es mit aria-hidden="true" vor Hilfstechnologien aus.

Unterschiede zwischen SVG und Canvas

Auf den ersten Blick tun sowohl SVG als auch Canvas dasselbe: Vektorgrafiken mithilfe von Koordinatenpunkten zeichnen. Es gibt jedoch Unterschiede zwischen ihnen. Sehen wir uns diese genauer an.

SVG ist eine Sprache zur Beschreibung von 2D-Grafiken in XML, während Canvas zum spontanen Zeichnen von 2D-Grafiken (mit JavaScript) verwendet wird.

SVG ähnelt einem „Zeichenprogramm". Die Zeichnung besteht aus Zeichenanweisungen für jede Form, und jeder Teil jeder Form kann geändert werden. Zeichnungen sind formorientiert.

Canvas ähnelt einem „Malprogramm". Sobald die Pixel auf dem Bildschirm erscheinen, ist das Ihre Zeichnung. Formen können nur durch Überschreiben mit anderen Pixeln geändert werden. Malereien sind pixelorientiert.

SVG basiert auf XML, was bedeutet, dass jedes Element im SVG-DOM verfügbar ist. In SVG wird die gezeichnete Form als Objekt gespeichert. In Canvas vergisst der Browser die gezeichnete Form unmittelbar nach dem Zeichnen. Wenn Sie Änderungen an der Zeichnung vornehmen möchten, müssen Sie sie von Grund auf neu zeichnen.

Attribute

Attribut	Wert	Beschreibung
height	Länge, Prozentsatz	Definiert die Höhe des SVG-Elements auf der Seite.
width	Länge, Prozentsatz	Definiert die Breite des SVG-Elements auf der Seite.
viewBox	min-x min-y width height	Definiert Position und Größe des internen Koordinatensystems (den SVG-viewport).
preserveAspectRatio	Ausrichtung + meetOrSlice (siehe unten)	Steuert, wie die `viewBox` skaliert und ausgerichtet wird, wenn ihr Seitenverhältnis vom SVG-Feld abweicht.
x	Länge, Prozentsatz	Legt die x-Koordinate eines verschachtelten SVG-Containers fest. Hat keine Auswirkung auf das äußerste `<svg>`.
y	Länge, Prozentsatz	Legt die y-Koordinate eines verschachtelten SVG-Containers fest. Hat keine Auswirkung auf das äußerste `<svg>`.

preserveAspectRatio-Werte

Wenn das Seitenverhältnis der viewBox nicht mit dem SVG-Feld übereinstimmt, entscheidet preserveAspectRatio, wie es angepasst wird. Es nimmt einen Ausrichtungswert an, optional gefolgt von einem meetOrSlice-Wert:

Ausrichtung (an welcher Kante/Mitte verankern):

none — strecken, um das Feld zu füllen, ohne das Seitenverhältnis zu berücksichtigen.
xMinYMin, xMidYMin, xMaxYMin
xMinYMid, xMidYMid (Standard), xMaxYMid
xMinYMax, xMidYMax, xMaxYMax

Meet oder Slice (wie skaliert wird):

meet (Standard) — skalieren, bis die gesamte viewBox in das Feld passt.
slice — skalieren, bis die viewBox das gesamte Feld bedeckt, wobei der Überlauf abgeschnitten wird.

Entfernte Attribute

Die Attribute version, baseProfile, contentScriptType und contentStyleType wurden in SVG 1.1 verwendet, sind aber in SVG 2 veraltet/entfernt und werden nicht mehr benötigt. SVG 2 ist die aktuelle Revision der SVG-Spezifikation, die stärker mit HTML und CSS integriert ist; moderne Browser rendern SVG ohne diese Attribute.

Übung

Welche Aussagen über das SVG-Tag sind korrekt? (Alle zutreffenden auswählen)

Das SVG-Tag ist ein Container für vektorbasierte Grafiken in HTML.SVG-Grafiken verlieren beim Zoomen oder Skalieren KEINE Qualität.SVG-Grafiken sind pixelbasiert, wie PNG oder JPEG.Das viewBox-Attribut definiert das interne Koordinatensystem des SVG.Das xmlns-Attribut ist für Inline-SVG innerhalb eines HTML-Dokuments erforderlich.

Syntax <svg>

Beispiel des HTML-<svg>-Tags:

Beispiel des HTML-<svg>-Tags zum Zeichnen einer Ellipse: