Scalable Vector Graphics

SVG ist ein XML-basiertes Vektorgrafikformat für das Web, das verlustfrei skalierbar ist und sowohl statische als auch animierte Grafiken ermöglicht. Als W3C-Standard ist SVG besonders für barrierefreie Webgrafiken geeignet. Einsatzgebiete sind zum Beispiel Icons, Logos, Infografiken, Diagramme, interaktive Visualisierungen, Animationen und UI-Komponenten.

Es ist verlustfrei skalierbar, hat oft nur ein geringes Datenvolumen und ist durch die XML-Struktur auch programmatisch steuerbar. Damit ist auch eine Interaktivität möglich.

Grundstruktur:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <!-- SVG-Elemente --> </svg>

Wichtige Elemente:

• <circle>: Kreise

• <rect>: Rechtecke

• <path>: Komplexe Pfade

• <text>: Textinhalte

• <g>: Gruppierung

• <use>: Wiederverwendung

• <defs>: Definitionen

• <title>: Titel für Barrierefreiheit

• <desc>: Alternativer Text für Barrierefreiheit

Damit SVGs für Screenreader und assistive Technologien zugänglich sind, sollten folgende Punkte beachtet werden:

• <title> für eine kurze, prägnante Bezeichnung (z. B. »Kreisdiagramm Umsatz 2024«).

• <desc> für eine erweiterte Beschreibung, wenn der Kontext es erfordert.

• Sowohl <title> als auch <desc> sollten das erste Kindelement im <svg> sein.

• Rein dekorative SVGs sollten auf Websites mit alt="" , role="presentation" oder aria-hidden="true" versteckt werden.

• Text nicht als Kurven, sondern mit <text> auszeichnen, um Vorlesbarkeit und Übersetzbarkeit zu sichern.

• Die Lesereihenfolge im SVG sollte der visuellen und logischen Struktur entsprechen.

• Steuerung per Tastatur muss möglich sein (z. B. tabindex="0" für fokussierbare Elemente).

• Visuelle Zustände (z. B. Hover, Focus) immer auch tastatur- und kontrastgerecht gestalten.