SVG: Was es ist, Schlüsselkonzepte und Verwendung in der Webentwicklung

Was ist SVG?

SVG ist ein XML-basiertes Vektorgrafikformat, das 2001 als W3C-Empfehlung eingeführt wurde. Im Gegensatz zu Rasterformaten beschreibt SVG Bilder durch geometrische Primitive: Punkte, Linien, Kurven und Polygone. Eine SVG-Datei ist ein reines Text-XML-Dokument, das mit Standardwerkzeugen gelesen, bearbeitet und komprimiert werden kann.

Die SVG-Architektur umfasst mehrere Schlüsselkonzepte. viewBox definiert ein virtuelles Koordinatensystem, das unabhängig von den tatsächlichen Elementabmessungen ist. Beispielsweise erstellt viewBox="0 0 100 100" ein 100×100-Quadratraster, in dem alle Koordinaten festgelegt sind. Wenn sich die Breite oder Höhe des Containers ändert, skaliert der Inhalt proportional.

Laut der W3C SVG 2 Specification unterstützt die moderne Version von SVG Farbverläufe, Masken, Filter, Text mit beliebiger Positionierung, Interaktivität über JavaScript und Animation über CSS und SMIL. SVG ist als vollwertiges HTML-Element in das DOM integriert, was die programmgesteuerte Kontrolle über jede Grafikprimitive ermöglicht.

In der mobilen Entwicklung wird SVG auch unter iOS über UIGraphicsImageRenderer und unter Android über VectorDrawable verwendet — beide Formate konvertieren SVG-ähnliche Beschreibungen in hardwarebeschleunigte Raster auf der GPU.

Geschichte und Entwicklung des SVG-Formats

SVG 1.0 wurde 2001 zur W3C-Empfehlung, SVG 1.1 2003, und SVG 2.0 befindet sich seit 2012 in der Entwicklung. Die wichtigste Neuerung von SVG 2 ist die tiefere CSS-Integration, die Unterstützung von Compositing- und Blending-Modi sowie die Möglichkeit, SVG in HTML ohne Namespace-Präfixe zu verwenden.

Obwohl SVG 2 noch nicht den Status einer Empfehlung erreicht hat, unterstützen moderne Browser bereits den größten Teil seiner Funktionalität. Chrome, Safari, Firefox und Edge bieten nahezu vollständige Unterstützung für SVG 1.1 und einen bedeutenden Teil von SVG 2.

Grundlegende SVG-Elemente

SVG bietet eine Reihe von Elementen zur Beschreibung zweidimensionaler Grafiken. Jedes Element verfügt über Attribute, die seine Position, Größe und sein visuelles Erscheinungsbild definieren. Attribute können als XML-Attribute oder über CSS-Eigenschaften festgelegt werden.

• <rect> — Rechteck mit den Attributen x, y, width, height, rx, ry (Eckenabrundung).
• <circle> — Kreis mit den Attributen cx, cy (Mittelpunkt) und r (Radius).
• <ellipse> — Ellipse mit den Attributen cx, cy, rx, ry.
• <line> — Liniensegment mit den Attributen x1, y1, x2, y2.
• <polyline> — Polylinie mit dem Attribut points (Koordinatenliste).
• <polygon> — geschlossenes Polygon mit dem Attribut points.
• <path> — beliebiger Pfad mit dem Attribut d (Befehle: M, L, C, Q, A, Z).
• <text> — Textelement mit den Attributen x, y, font-size, font-family.

Das path-Element ist das leistungsstärkste und flexibelste SVG-Element. Das Attribut d enthält eine Folge von Befehlen: M (moveTo), L (lineTo), C (kubische Bezier-Kurve), Q (quadratische Bezier-Kurve), A (Bogen), Z (Pfad schließen). Jeder Befehl hat eine absolute oder relative Form (Groß- oder Kleinbuchstabe).

SVG unterstützt auch die Gruppierung von Elementen über <g>. Die Gruppe vererbt visuelle Attribute (fill, stroke, transform) an alle untergeordneten Elemente. Dies ermöglicht es, einen einheitlichen Stil auf eine ganze Gruppe von Formen anzuwenden und ihre Position über eine einzige Transformationsanweisung zu steuern.

SVG vs. Rastergrafiken: Formatvergleich

Der Hauptunterschied zwischen SVG und Rasterformaten (JPEG, PNG, WebP) ist die Art der Informationsspeicherung. Raster speichert die Farbe jedes Pixels in einem festgroßen Raster. SVG speichert mathematische Befehle zur Wiedergabe von Formen. Dieser Unterschied bestimmt alle Vor- und Nachteile der Formate.

Laut HTTP Archive, 2025 verwenden 68% der Websites SVG für Symbole, 34% für Illustrationen und 22% für Logos. Die durchschnittliche Größe eines SVG-Symbols beträgt 0.5–2 KB, während ein Rastersymbol ähnlicher Qualität 5–20 KB im PNG-Format benötigt.

SVG ist nicht geeignet für Fotografien und komplexe Rasterbilder — die Größe der XML-Beschreibung würde das äquivalente JPEG übersteigen. Empfohlene Anwendungsbereiche für SVG: Symbole, Logos, Illustrationen, Diagramme, Grafiken, Oberflächenelemente mit responsivem Design.

Wann SVG und wann Rasterformat wählen

SVG ist die optimale Wahl für Oberflächenelemente, die auf Retina-Displays und bei jeder Zoomstufe des Browsers scharf aussehen müssen. Raster ist für Fotografien, komplexe Texturen und Bilder mit Millionen von Farben geeignet, bei denen eine Vektorbeschreibung unverhältnismäßig komplex wäre.

Hybrider Ansatz — Kombination von SVG für Oberflächenelemente und WebP/AVIF für Fotocontent — bietet die beste Balance zwischen Qualität und Seitenladeleistung.

Inline-SVG und CSS-Styling

Inline-SVG bedeutet, SVG-Markup direkt in ein HTML-Dokument einzubetten, anstatt als separate Datei über <img> oder background-image. Der Vorteil von Inline-SVG ist, dass SVG-Elemente Teil des DOM werden und über CSS gestaltet, über JavaScript gesteuert und ohne zusätzliche Serveranfragen animiert werden können.

Im Gegensatz zu <img src="icon.svg">, wo SVG im Shadow DOM isoliert ist, erbt Inline-SVG Farben und Schriftarten vom übergeordneten Dokument. Dies ermöglicht es beispielsweise, die Farbe eines Symbols beim Überfahren mit der Maus über die CSS-Pseudoklasse :hover zu ändern, ohne eine separate Datei für jeden Zustand zu laden.

Laut CSS-Tricks ist Inline-SVG die empfohlene Methode zur Verwendung von Symbolen in modernen Webanwendungen. Die CSS-Eigenschaften fill, stroke, stroke-width werden direkt auf SVG-Elemente angewendet. Für die CSS-Anpassung ist es wichtig, dass das Quell-SVG keine fill- und stroke-Inline-Attribute enthält — andernfalls kann CSS sie nicht überschreiben.

• Vorteile: CSS-Styling, JS-Steuerung, keine HTTP-Anfragen, viewBox-Anpassungsfähigkeit.
• Nachteile: Größere HTML-Seite, keine separate Caching-Möglichkeit vom HTML.
• Alternative: SVG-Sprites — mehrere SVGs in einer Datei zusammenfassen und <use href="#id"> verwenden.

SVG-Sprites lösen das Caching-Problem: Alle Symbole werden in einer Datei gesammelt, der Browser lädt sie einmal, und einzelne Symbole werden über <use> mit Angabe der ID des gewünschten Elements im Sprite aufgerufen.

SVG-Animation: CSS und SMIL

CSS-SVG-Animation ist die gebräuchlichste und leistungsfähigste Methode, Vektorgrafiken im Browser zu animieren. CSS-Eigenschaften wie transform, opacity und fill werden auf SVG-Elemente genauso angewendet wie auf HTML-Elemente. Für Animationen entlang eines beliebigen Pfads wird die CSS-Eigenschaft offset-path verwendet.

SMIL (Synchronized Multimedia Integration Language) ist ein in SVG integrierter Animationsmechanismus, der unabhängig von CSS ist. Die Elemente <animate>, <animateTransform> und <animateMotion> ermöglichen es, beliebige SVG-Attribute ohne JavaScript oder CSS zu animieren. Die SMIL-Animation ist garantiert mit der Bildwiederholrate des Browsers synchronisiert.

Laut MDN Web Docs wird SMIL in allen modernen Browsern unterstützt, aber CSS-Animation gilt als vorhersagbarer und leistungsfähiger. Der Hauptanwendungsfall für SMIL ist die Animation von Attributen, die über CSS nicht zugänglich sind, wie d (path) des <path>-Elements.

JavaScript + requestAnimationFrame bietet maximale Kontrolle über SVG-Animationen. Webentwickler verwenden Bibliotheken wie GSAP und Anime.js für komplexe Animationssequenzen mit Zeitachsen und Easing-Funktionen, die mit reinem CSS nur schwer zu implementieren sind.

Codebeispiele: SVG-Grafiken erstellen

Das erste Beispiel ist ein einfaches Haus-Symbol mit grundlegenden SVG-Elementen. Alle Formen sind rect und polyline:

<!-- Inline SVG icon -->
<svg viewBox="0 0 100 100" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="50" width="60" height="40" fill="#4A90D9" />
  <rect x="35" y="65" width="30" height="25" fill="#fff" />
  <polyline points="10,50 50,15 90,50" fill="none" stroke="#4A90D9" stroke-width="6" />
</svg>

Das zweite Beispiel zeigt eine rotierende Loader-Animation über CSS. Es verwendet <circle> mit dem Attribut stroke-dasharray, um eine gestrichelte Kontur zu erzeugen:

<!-- CSS animated spinner -->
<svg class="spinner" viewBox="0 0 50 50" width="40" height="40">
  <circle cx="25" cy="25" r="20" fill="none"
    stroke="#4A90D9" stroke-width="4"
    stroke-dasharray="125.6 31.4" />
</svg>

<style>
  .spinner circle {
    animation: spin 1.5s linear infinite;
    transform-origin: center;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>

Das dritte Beispiel verwendet die Bibliothek GSAP, um einen Pfad für glattes Konturzeichnen zu animieren. GSAP arbeitet mit dem Attribut stroke-dashoffset und erzeugt einen Linien-Erscheinungseffekt:

// Pfad mit GSAP zeichnen
import gsap from "gsap";

const path = document.querySelector("#myPath");
const length = path.getTotalLength();

gsap.set(path, {
    strokeDasharray: length,
    strokeDashoffset: length
});

gsap.to(path, {
    strokeDashoffset: 0,
    duration: 2,
    ease: "power2.out"
});