SVG-Icons: Inline-Markup, ein Sprite mit use, oder ein img-Element

Worum es geht

Drei Möglichkeiten, ein SVG-Icon zu platzieren. Inline: Das <svg>-Markup steht im HTML, sodass fill="currentColor" der Textfarbe folgt und CSS jeden Pfad erreichen kann. Sprite: Eine Datei definiert jedes Icon als <symbol id="check">…</symbol>, und jedes Vorkommen ist <svg><use href="/icons.svg#check"></use></svg>; die Datei wird einmal abgerufen und gecacht, und der Klon erbt color aus seinem Kontext. Bild: <img src="icon.svg"> oder ein CSS-Hintergrund ist am einfachsten und cachebar, aber das SVG ist ein undurchsichtiges Bild, dessen Innenleben CSS nicht stylen kann.

Warum es wichtig ist

Icons sind zahlreich, wiederholen sich und werden je nach Kontext eingefärbt. Inline-Markup gibt volle Kontrolle, wiederholt aber Bytes auf jeder Seite und in jeder Tabellenzeile; das Sprite bietet Caching und eine einzige Definition unter strengeren Laderegeln; das Bild bietet Caching und kein Styling. Die Wahl entscheidet, ob Icons Textfarbe, Hover-Zuständen und Dark Mode ohne zusätzliche Assets folgen.

So wird es angewendet

• Standardmässig ein Sprite vom gleichen Origin mit <use href> verwenden. MDN merkt an, dass Browser bei <use> die Same-Origin-Policy anwenden und Cross-Origin-URLs ablehnen können, daher das Sprite vom Origin der Seite ausliefern oder den <symbol>-Block einmal am Anfang des Dokuments inline setzen.
• fill="currentColor" (und wo relevant stroke) auf Symbolen setzen; MDN definiert currentColor als den Wert der color-Eigenschaft des Elements, sodass color auf dem Button oder Link das Icon stylt.
• Dekorative Icons mit aria-hidden="true" und focusable="false" markieren. Einem alleinstehenden Icon einen Namen geben: ein <title>-Element innerhalb des SVG (das Element für den zugänglichen Namen, meist auch als Tooltip angezeigt) oder ein aria-label auf dem umgebenden Button.
• width und height (Attribute oder CSS) auf jedem Icon setzen, damit sich das Layout nicht verschiebt, bevor das Sprite eintrifft.
• Die zwei oder drei für den ersten Render benötigten Icons (Logo, Menü) inline setzen und den Rest im Sprite belassen; die Sprite-URL wie jedes andere Asset versionieren.
• Icons durch einen Optimierer laufen lassen und die viewBox normalisieren, damit alle Icons ein gemeinsames Koordinatensystem teilen.

Stolpersteine

Seitenklassen reichen nicht in den geklonten <use>-Inhalt hinein; nur vererbbare Eigenschaften und Custom Properties dringen hindurch, daher brauchen mehrfarbige Icons currentColor plus Custom Properties, keine Klassenselektoren. Der Klon steht für Skripte nicht im DOM. Ein Sprite, das id-Namen ändert, bricht jede Seite, die die alten referenziert, bis Caches ablaufen. Icon-Fonts, die ältere Alternative, werden hier nicht verglichen.