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
Grundlegende Zugänglichkeit:
Beschreibende title-Elemente
Aussagekräftige desc-Elemente
ARIA-Labels wenn nötig
Semantische Gruppierung
Sinnvolle Reihenfolge im DOM
Bei Interaktivität eine Tastaturbedienung
