HTML-Tag <svg>

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>

Versuch es selber!

Ergebnis

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.


4+	3+	4+	10+

10+