Tag <svg>

Tag <svg>

Definition

Status: Aktueller Standard

Das Tag <svg> steht für scalable vector graphics (skalierbare Vektor-Grafiken).

Der <svg>-Tag definiert ein SVG-Grafikcontainer-Element in HTML. SVG beschreibt vektorbasierte Grafiken, die direkt im DOM eingebettet und mit CSS sowie JavaScript manipuliert werden können. SVG ist ein XML-basiertes Grafikformat und eignet sich besonders für Icons, Diagramme, Logos, Illustrationen und interaktive Visualisierungen. Ein <svg>-Element ist ein Container für zweidimensionale Vektorgrafiken. Es kann direkt in den HTML-Code eingebettet („Inline-SVG“) oder als Datei geladen werden. Die Vorteile gegenüber pixelbasierte Grafiken sind eine verlustfrei Skalierung (kein "verpixeln"), sehr geringe Datengröße (nur etwas Text) und (da Teil des DOMs) mit CSS ansprechbar. Die SVG.Grafiken lassen sich auch mit CSS (@keyframes) oder JavaScript (z.B. GSAP) animieren.

Syntax

<svg>...</svg>

Attribute bzw. Unterelemente

Global

Globale Attribute

viewBox

Es definiert das „Koordinatensystem“ (z. B. 0 0 100 100). Es sorgt dafür, dass die Grafik unabhängig von der tatsächlichen Breite/Höhe immer korrekt skaliert wird.

width

Bestimmt die Breite des Containers

height

Bestimmt die Höhe des Containers

fill

Definiert die Füllfarbe (entspricht background-color bei HTML-Elementen)

stroke

Definiert die Linienfarbe (Rahmen)

Definiert Rechtecke

Definiert Kreis

Definiert Ellipse

Definiert Linien

Das komplexeste Element für beliebige Formen

<text>

Echter, durchsuchbarer Text innerhalb der Grafik

Beispiele

= Tag

= Attribut

= Wert

Text

= Kommentar bzw. wichtig!

Beispiel <svg>

Der Code:

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="red" stroke="black" />
</svg>

Ergebnis:

Ergebnis: <svg>-Demo 1

CSS-Tipps:

Gibt man Inline-SVG-Befehlen (circle, rect...) eine ID oder Klasse kann damit das Aussehen beschrieben werden (z.B. ein "hover"):

  
.highlight:hover {
  fill: #f0fc00;
  transform: scale(1.5);
  // Vergrößerung von Mitte ausgehend:
  transform-origin: center;
}

Ergebnis:

Ergebnis: <svg>-Demo 1
Dem Kreis über eine Klasse einen "hover" zugewiesen

Anmerkungen

Achtung! Die Tags für die Gestaltung (circle, rect...) sollten IMMER als "selbstschließendes Tag" geschrieben werden - also mit " />" am Ende. Wird SVG als Inline-SVG im Dokument genutzt dürfte es fehlen, wird es aber als externe Datei eingebunden muss es so geschrieben werden! Daher bei SVG immer verwenden dann seid ihr auf der sicheren Seite.

Inline eigebundenes SVG kann über CSS bzw. JavaScript gesteuert werden, extern eingebundene SVG-Dateien jedoch nicht!

Unterscheidung zu <canvas>: <canvas> baut Grafiken auf Pixel auf, <svg> auf Vektorbasis (verlustfrei skalierbar). Da <svg> im Gegensatz zu <canvas> in den DOM eingebunden wird ist es über CSS und/oder JavaScript steuerbar.