img SVG Sprite GeneratorPraxiswissen
SVG-Sprite und CSS-Sprite im Vergleich
Beide Methoden sammeln mehrere Bilder in einer Datei. Der Unterschied: Bei diesem SVG-Generator wählst du ein Bild über seinen Namen aus. Bei einem klassischen CSS-Sprite zeigst du einen Ausschnitt aus einem großen Bild an.
Die wichtigsten Unterschiede
Stell dir den SVG-Sprite dieses Generators wie einen Stapel von Bildern vor: Jedes Bild liegt auf einer eigenen Ebene und hat einen Namen. Ein CSS-Sprite ist eher ein Bilderbogen: Die Motive liegen nebeneinander, und du zeigst nur den gewünschten Ausschnitt.
Hier vergleichen wir die SVG-Variante dieses Generators mit einem klassischen CSS-Hintergrund-Sprite. Es gibt auch andere Arten von SVG-Sprites.
| Frage | SVG-Sprite dieses Generators | Klassischer CSS-Sprite |
|---|---|---|
| Wie wähle ich ein Bild aus? | Über seinen Namen, zum Beispiel icons.svg#star für den Stern. | Über die Position des Bildausschnitts und dessen Breite und Höhe. |
| Wie binde ich es ein? | Mit einem eigenen <img>-Tag für jedes Bild. | Als CSS-Hintergrund eines HTML-Elements. |
| Wie beschreibe ich das Bild? | Mit einem passenden Alternativtext im alt-Attribut. Reine Dekoration erhält alt="". | Mit Text im HTML, zum Beispiel neben dem Icon oder als Beschriftung des Buttons. Ein CSS-Hintergrund hat kein alt-Attribut. |
| Was passiert, wenn ich Bilder ändere? | Bleiben Dateiname und Bildnamen gleich, können die Bildverweise gleich bleiben. Bei neuen Abmessungen prüfst du auch die Größenangaben. | Verschiebt sich ein Motiv im Bilderbogen, musst du seine Position im CSS anpassen. |
| Kann ich die Bildfarben per CSS ändern? | Die Farben innerhalb der SVG-Datei lassen sich über den <img>-Tag nicht direkt mit dem CSS deiner Seite ändern. | Auch hier lassen sich einzelne Bildfarben nicht direkt mit dem CSS deiner Seite ändern. |
| Welche Bilder sind möglich? | SVG-Grafiken und eingebettete Bilder, zum Beispiel PNG oder JPEG. | Eine gemeinsame Bilddatei, zum Beispiel PNG, WebP oder SVG. |
Beispiel A: Ein Bild über seinen Namen auswählen
Alle drei Bild-Tags verwenden dieselbe Datei: icons.svg. Der Zusatz hinter der Raute # bestimmt, welches Bild erscheint: heart zeigt das Herz, star den Stern und home das Haus.
Die Datei muss dafür vorbereitet sein. Ein beliebiges SVG wird durch den Zusatz #star noch nicht zum Sprite. Der Generator erstellt die nötigen Ebenen und Regeln für dich.
<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">Beispiel B: Einen Ausschnitt aus einem Bilderbogen zeigen
Hier liegen Herz, Stern und Haus nebeneinander in einem Bild. Jedes Icon ist 64 × 64 Pixel groß, zusammen sind es 192 × 64 Pixel. Das HTML-Element zeigt nur ein 64 × 64 Pixel großes Fenster. Verschiebst du das Hintergrundbild um 64 Pixel nach links, erscheint darin der Stern.
<span class="icon-label">
<span class="css-icon star" aria-hidden="true"></span>
Favorit
</span>
<style>
.icon-label { display: inline-flex; align-items: center; gap: 12px; }
.css-icon {
display: inline-block;
width: 64px;
height: 64px;
background: url("img/css-sheet.svg") no-repeat 0 0;
}
.css-icon.star { background-position: -64px 0; }
.css-icon.home { background-position: -128px 0; }
</style>Der Wert background-position: -64px 0 verschiebt das Hintergrundbild nach links. Der Text „Favorit“ beschreibt die Bedeutung des Sterns. aria-hidden="true" sorgt dafür, dass das zusätzliche Deko-Element von Screenreadern übersprungen wird.
Auch dieser Bilderbogen ist eine SVG-Datei. „CSS-Sprite“ beschreibt also die Einbindung als Hintergrund und nicht ein bestimmtes Dateiformat. Wenn du die CSS-Regeln in eine eigene Datei auslagerst, gilt der Bildpfad relativ zu dieser CSS-Datei.
Welche Methode passt zu dir?
- SVG-Sprite mit img-Tags: Du möchtest mehrere Bilder in einer Datei sammeln und jedes wie ein normales Bild einbinden. Genau dafür ist dieser Generator gedacht.
- CSS-Sprite als Hintergrund: Du nutzt bereits Hintergrund-Icons mit festen Größen und möchtest dieses System weiterverwenden. Der Generator erzeugt diese klassische Variante nicht.
- SVG direkt im HTML: Du möchtest zum Beispiel die Farbe eines Icons beim Darüberfahren ändern. Dafür eignet sich eine direkt eingebundene SVG-Grafik eher als die Einbindung per img-Tag.
- Einzelne Bilddateien: Große Fotos oder Animationen werden nur auf bestimmten Seiten gebraucht. Dann kann es sinnvoll sein, sie einzeln zu laden.
Wird meine Website dadurch schneller?
Nicht automatisch. Eine gemeinsame Datei kann die Zahl der Bilddateien verringern, die der Browser abrufen muss. Brauchst du aber nur ein einziges Icon daraus, lädt der Browser trotzdem die ganze Sprite-Datei. Eingebettete Fotos können diese Datei zusätzlich vergrößern.
Fasse deshalb vor allem Bilder zusammen, die du häufig gemeinsam verwendest. Große Fotos, die nur auf einer einzelnen Seite erscheinen, bleiben oft besser separat. Ändert sich der Sprite, muss der Browser unter Umständen die gesamte Datei neu laden.
Wenn du es genau wissen möchtest: Vergleiche dieselben Bilder einmal als Einzeldateien und einmal als Sprite. Im Bereich „Netzwerk“ der Browser-Entwicklertools siehst du, wie viel übertragen wird und wie lange das Laden dauert. Prüfe auch einen erneuten Seitenaufruf, bei dem der Browser bereits gespeicherte Dateien verwenden kann.
Wichtig bei Bildern und Animationen: Ein eingebettetes PNG oder JPEG wird durch die SVG-Datei nicht zur Vektorgrafik und beim Vergrößern nicht schärfer. Animierte GIFs und AVIFs exportiert der Generator als separate Dateien. AVIF braucht weiterhin einen Browser, der das Format unterstützt. SVG-Animationen müssen auch ohne zusätzliches JavaScript und externe Dateien als Bild funktionieren.
Weiterlesen
SVG-Sprite mit dem img-Tag einbinden →
Technische Grundlagen: MDN: SVG as an image · MDN: CSS image sprites