Ein Inline-SVG ist eine Vektorgrafik, die direkt im Dokument steht statt in einer Datei. Dadurch lässt sie sich per CSS einfärben und per Skript ändern.
- Inline-SVG
Vektorgrafik, deren Markup unmittelbar im HTML-Dokument steht statt in einer eigenen Datei.
Beispiel: „Eine Inline-SVG ist Teil des Dokuments und damit über CSS erreichbar.“
Was das ermöglicht
<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
<path d="…" fill="currentColor"/>
</svg>Mit fill="currentColor" nimmt die Grafik die Textfarbe an und folgt damit jedem Zustandswechsel und dem dunklen Modus, ohne eine zweite Datei. Das ist der Hauptgrund, Symbole inline einzubinden.
Zugänglichkeit
Rein dekorative Grafiken bekommen aria-hidden="true", damit Screenreader sie übergehen. Trägt die Grafik Bedeutung, braucht sie einen title und eine Verknüpfung über aria-labelledby. Der Nachteil der Einbettung: Das Markup wiederholt sich auf jeder Seite und wird nicht zwischengespeichert.