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

SVG (Scalable Vector Graphics) ist ein XML basiertes Vektorenbildformat für die zweidimensionale Grafik mit der Unterstützung der Interaktivität und Animation. Für das Zeichnen von Bildern werden einfache geometrische Figuren (Linien, Kreise, Polygone usw.) verwendet.

Syntax

Das Tag <svg> wird gepaart verwendet, sein Inhalt wird zwischen den Start- (<svg>) und Endtags (</svg>) geschrieben.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>

Ergebnis

svg beispiel

Unterschiede zwischen SVG und Canvas

Auf den ersten Blick machen SVG und Canvas dasselbe, indem sie Vektorgrafiken mit Koordinatenpunkten zeichnen. Allerdings gibt es Unterschiede zwischen ihnen. Lassen Sie uns einen Blick auf sie werfen.

SVG ist eine Sprache zur Beschreibung von 2D-Grafiken in XML, während Canvas verwendet wird, um 2D-Grafiken ohne Vorbereitung (mit JavaScript) zu zeichnen.

SVG ist wie ein "Draw"-Programm. Die Zeichnung ist eigentlich eine Zeichnungsanweisung. Jede Form und jeder Teil einer beliebigen Form kann geändert werden. Die Zeichnungen sind formorientiert.

Canvas ist wie ein "Malprogramm". Sobald die Pixel auf den Bildschirm treffen, ist das Ihre Zeichnung. Sie können Formen nur durch Überschreiben mit anderen Pixeln ändern. Die Bilder sind pixelorientiert.

SVG ist XML-basiert, was bedeutet, dass jedes Element im SVG-DOM verfügbar ist. In SVG wird jede gezeichnete Form als Objekt gespeichert. In Canvas vergisst der Browser die gezeichnete Form sofort nach dem Zeichnen. Wenn Sie Änderungen in der Zeichnung vorgenommen werden müssen, sollten Sie diese von Anfang an neu zu zeichnen.

Attribute

Attribut Wert Beschreibung
baseProfile
none (default)
full
basic
tiny
Es beschreibt das minimale SVG-Sprachprofil, das nach dem Ansicht des Autors notwendig ist, um den Inhalt korrekt wiederzugeben.
Es wird nach SVG2 nicht unterstützt.
contentScriptType content-type Es gibt die Standardskriptsprache für das angegebene Dokumentfragment an.
Es wird nach SVG2 nicht unterstützt.
contentStyleType content-type Es identifiziert die vom SVG-Fragment verwendete Standard-Stylesheet-Sprache.
Es wird nach SVG2 nicht unterstützt.
height length |
percentage
Es definiert die vertikale Länge des Rechtecks.
preserveAspectRatio none
xMinYMin,br/> xMidYMin
xMaxYMin
xMinYMid
xMidYMid
xMaxYMid
xMinYMax
xMidYMax
xMaxYMax
Es definiert, wie das SVG-Fragment deformiert werden muss, wenn es in einen Container mit einem anderen Seitenverhältnis eingebettet ist.
meet (default) Es definiert, dass ein Bild seinen Anteil behält und sichtbar ist.
slice Es definiert, dass ein Bild seine Proportionen beibehält und die ViewBox so weit wie möglich verkleinert wird.
version number Es definiert die Version von SVG, die für den inneren Inhalt des Elements verwendet wird.
Es wird nach SVG2 nicht unterstützt.
viewbox list-of-numbers Es definiert die Grenze des SVG-Viewports für das aktuelle SVG-Fragment.
width length |
percentage
Es bestimmt die Breite des Rechtecks.
x length |
percentage
Es ermittelt die x-Koordinate des svg-Containers. Es hat keine Auswirkung auf die äußersten SVG-Elemente.
y length |
percentage
Es bestimmt die y-Koordinate des svg-Containers. Es hat keine Auswirkung auf die äußersten SVG-Elemente.

Browser-Support

chrome firefox safari opera
4+ 3+ 4+ 10+

Übe dein Wissen

Wofür steht der SVG-Tag in HTML?
Finden Sie das nützlich?