HTML `<svg>`-Tag

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, die Animationen und Interaktivität unterstützt. Zum Zeichnen von Bildern werden einfache geometrische Formen (Kreis, Linien, Polygon usw.) verwendet.

svg example

DANGER

Das xmlns-Attribut ist nur für das äußere <svg>-Element von eigenständigen SVG-Dokumenten erforderlich. Es ist nicht für verschachtelte <svg>-Elemente oder in HTML-Dokumenten erforderlich.

Syntax `<svg>`

Das <svg>-Tag wird immer paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<svg>) und dem schließenden (</svg>) Tag geschrieben.

Beispiel für das HTML `<svg>`-Tag:

HTML <svg>-Tag

html

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

Try it Yourself »

Beispiel für das HTML `<svg>`-Tag zum Zeichnen einer Ellipse:

Beispiel für das HTML <svg>-Tag zum Zeichnen einer Ellipse:

html

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

Try it Yourself »

Unterschiede zwischen SVG und Canvas

Auf den ersten Blick scheinen SVG und Canvas dasselbe zu tun: das Zeichnen von Vektorgrafiken anhand von Koordinatenpunkten. Es gibt jedoch Unterschiede zwischen beiden. Werfen wir einen Blick darauf.

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

SVG funktioniert wie ein „Zeichen“-Programm. Die Grafik besteht aus Zeichenanweisungen für jede Form, und jeder Teil einer Form kann geändert werden. Die Darstellung ist formorientiert.

Canvas funktioniert wie ein „Maler“-Programm. Sobald die Pixel auf dem Bildschirm erscheinen, ist die Grafik fertig. Formen können nur durch das Überschreiben mit anderen Pixeln geändert werden. Die Darstellung ist 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. Im Canvas vergisst der Browser die gezeichnete Form sofort nach dem Zeichnen. Wenn Änderungen an der Grafik vorgenommen werden müssen, muss sie neu gezeichnet werden.

Attribute

Attribute	Value	Description
baseProfile	none (default), full, basic, tiny	Beschreibt das minimale SVG-Sprachprofil, das der Autor für die korrekte Darstellung des Inhalts für notwendig hält. Nicht unterstützt nach SVG2.
contentScriptType	content-type	Gibt die Standardskriptsprache für das angegebene Dokumentfragment an. Nicht unterstützt nach SVG2.
contentStyleType	content-type	Gibt die Standardsprache der Stylesheet-Sprache an, die vom SVG-Fragment verwendet wird. Nicht unterstützt nach SVG2.
height	length, percentage	Definiert die Höhe des SVG-Elements.
preserveAspectRatio	none, xMinYMin, xMidYMin, xMaxYMin, xMinYMid, xMidYMid, xMaxYMid, xMinYMax, xMidYMax, xMaxYMax, meet (default), slice	Definiert, wie das SVG-Fragment deformiert werden muss, wenn es in einen Container mit einem anderen Seitenverhältnis eingebettet wird.
version	number	Definiert die Version von SVG, die für den inneren Inhalt des Elements verwendet wird. Nicht unterstützt nach SVG2.
viewBox	list-of-numbers	Definiert die Grenzen des SVG-Viewport für das aktuelle SVG-Fragment.
width	length, percentage	Bestimmt die Breite des SVG-Elements.
x	length, percentage	Bestimmt die x-Koordinate des SVG-Containers. Hat keine Auswirkung auf äußerste SVG-Elemente.
y	length, percentage	Bestimmt die y-Koordinate des SVG-Containers. Hat keine Auswirkung auf äußerste SVG-Elemente.

Praxis

Was ist der Zweck des SVG-Tags in HTML?

Das SVG-Tag wird verwendet, um vektorbasierte Grafiken in HTML zu definieren.Das SVG-Tag wird verwendet, um Bilder einer Webseite hinzuzufügen.SVG-Grafiken verlieren KEINE Qualität, wenn sie vergrößert oder skaliert werden.SVG-Grafiken sind pixelbasiert.

HTML <svg>-Tag ​

Syntax &lt;svg&gt; ​

Beispiel für das HTML &lt;svg&gt;-Tag: ​

Beispiel für das HTML &lt;svg&gt;-Tag zum Zeichnen einer Ellipse: ​

Unterschiede zwischen SVG und Canvas ​

Attribute ​