SVG-Sprite mit dem img-Tag einbinden

Funktionierendes Beispiel

Diese drei Bilder laden dieselbe SVG-Datei mit unterschiedlichen Kennungen. Für die Darstellung ist kein JavaScript nötig.

1. Dateien auf deiner Website ablegen

Entpacke das Beispielpaket. Lege index.html neben den Ordner img. Bei einem Generator-Export kopierst du zusätzlich dessen CSS-Datei und einen gegebenenfalls enthaltenen Animationsordner mit. Übernimm die Pfade aus deinem eigenen Export.

index.html
img/
  icons.svg
  css-sheet.svg

Bei einem Generator-Export ergänzt du den CSS-Verweis im <head> deiner Seite. Mit den Standardordnern:

<link rel="stylesheet" href="css/icons-sprite.css">

2. Bild-Tags einfügen

Füge diese Tags in den <body> der Beispielseite ein. Die Pfade beziehen sich auf diese HTML-Datei. Die Kennung nach # muss einschließlich Groß- und Kleinschreibung zum SVG passen.

<img src="img/icons.svg#heart" width="64" height="64" alt="Herz">
<img src="img/icons.svg#star" width="64" height="64" alt="Stern">
<img src="img/icons.svg#home" width="64" height="64" alt="Haus">

Das funktioniert mit SVG-Dateien, die für diese Auswahl vorbereitet sind. Eine beliebige SVG mit mehreren Formen oder ausschließlich <symbol>-Definitionen ist nicht dasselbe wie dieses Beispiel.

3. Größe und Alternativtext festlegen

Die Beispiel-Icons sind quadratisch. Setze beide Abmessungen auf 32, um sie mit 32 × 32 Pixeln anzuzeigen. Bei anderen Motiven behältst du deren Seitenverhältnis bei. Die Maße reservieren Platz, während die Datei lädt.

Beschreibe informative Bilder mit einem passenden alt-Text. Für rein dekorative Bilder, deren Bedeutung bereits im benachbarten Text steht, verwende alt="". Wiederhole Beschriftungen nicht unnötig.

<img src="img/icons.svg#heart" width="32" height="32" alt="Favorit">

Weiterlesen

SVG-Sprite und CSS-Sprite im Vergleich →

Häufige Fragen zum Generator

Technische Grundlagen: MDN: SVG as an image · MDN: CSS image sprites