Was ist SVG einbinden?

Kurz-Fakten

• Als Datei über img: einfach, zwischenspeicherbar, aber von außen nicht gestaltbar
• Inline geschrieben: über CSS einfärbbar und animierbar, dafür bei jedem Seitenaufruf erneut übertragen
• Für bedeutungstragende Grafiken gehört ein title-Element in das SVG und role="img" an das Wurzelelement
• Rein dekorative SVG bekommen aria-hidden="true", damit Screenreader sie überspringen
• SVG kann Skripte enthalten – Dateien aus fremder Quelle gehören vor dem Einbinden bereinigt

Einordnung für die Praxis

Die Faustregel für die Wahl: Symbole, die die Farbe wechseln sollen – bei Fokus, im Dunkelmodus –, gehören inline. Bilder mit Detailreichtum, die überall gleich aussehen, gehören als Datei eingebunden und werden dann zwischengespeichert.

Der Sicherheitshinweis ist kein Randthema: Eine SVG-Datei ist XML und darf script-Elemente enthalten. Wo Nutzer Bilder hochladen dürfen, ist das ein Einfallstor, wenn die Dateien ungeprüft ausgeliefert werden.

Verwandte Begriffe

• Multimedia-Elemente Als Multimedia-Elemente werden die Elemente bezeichnet, mit denen sich Bild, Ton und…
• picture-Element Das picture-Element umschließt mehrere source-Angaben und ein img-Element als Rückfall.…
• Barrierefreiheit Barrierefreiheit bedeutet, dass eine Website auch mit Screenreader, Tastatur,…
• canvas-Element Das canvas-Element stellt eine Zeichenfläche bereit, auf der JavaScript Pixel für Pixel…