Scalable Vector Graphics

SVG ist ein XML-basiertes Vektorgrafikformat für das Web. Es ist verlustfrei skalierbar, hat meist ein geringes Datenvolumen und lässt sich per CSS und JavaScript ansteuern. Dadurch sind auch Animationen und interaktive Grafiken möglich. Typische Einsatzgebiete sind Icons, Logos, Diagramme, Infografiken und Bedienelemente.

Weil SVG strukturierten Text enthält, kann es zugänglich gemacht werden – anders als ein Pixelbild. Von selbst barrierefrei ist es nicht: Ein SVG ohne Bezeichnung, ohne Rolle und mit Text in Kurven bleibt für Screenreader stumm.

Grundstruktur:

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

Der wichtigste Unterschied entscheidet darüber, welche Anforderungen gelten:

• Als <img src="grafik.svg" alt="…">: Es zählt allein das alt-Attribut. Alles innerhalb der Datei wie <title>, <desc>, Rollen bleibt für assistive Technologien unsichtbar.

• Inline im HTML: Hier greifen <title>, <desc> und ARIA-Attribute. Ein alt-Attribut gibt es nicht.

Wichtige Elemente:

• <circle>, <rect>, <path>: Grundformen und komplexe Pfade

• <text>: Textinhalte

• <g>: Gruppierung

• <use>: Wiederverwendung

• <defs>: Definitionen

• <title>: der zugängliche Name der Grafik, entspricht dem Alternativtext

• <desc>: eine erweiterte Beschreibung, entspricht aria-describedby

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="" 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.