CSS <img> Sprite Generator – SVGs und Bilder bündeln

Dein Sprite Generator

Viele Bilder. Eine Datei.

SVG, GIF, JPG und PNG hinzufügen oder einen bestehenden Sprite weiterbearbeiten.

Ein Sprite für den <img>-Tag. Dieses Tool erzeugt keinen klassischen CSS-Hintergrund-Sprite. Du bindest jedes Motiv als eigenes HTML-Bild ein. Die Vorteile ansehen ↓

SVGs und Bilder hier hineinziehen

SVG, GIF, JPG, PNG und bestehende icons-sprite.svg werden automatisch erkannt.

Gleiche Namen ohne Dateiendung ersetzen vorhandene Icons. GIF, JPG, PNG: je 15 MB · SVG und fertiger Sprite: 75 MB.

Hier entsteht dein Sprite

Füge deine SVGs oder Bilder hinzu. Die Vorschauen und fertigen HTML-Tags zum Kopieren erscheinen automatisch.

Kurzanleitung

So verwendest du deinen Sprite

Das Download-Paket enthält icons-sprite.svg, icons-sprite.css und eine HTML-Beispielseite.

1. CSS-Datei im <head> einbinden

Kopiere icons-sprite.css zum Beispiel in deinen Ordner css/. Ergänze diesen Eintrag im vorhandenen <head>-Bereich deiner HTML-Seite:

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

2. Sprite ablegen

Kopiere icons-sprite.svg zum Beispiel in deinen Ordner img/.

3. Bild-Tag einsetzen

Den gewünschten Bild-Tag setzt du anschließend an der passenden Stelle im <body> ein. Über width bestimmst du die Anzeigegröße:

<img src="img/icons-sprite.svg#home-icon" width="24" alt="Haus">

Beide Dateipfade müssen zu deiner Ordnerstruktur passen. Der Name hinter # muss der angezeigten Icon-Kennung entsprechen. Die fertigen Bild-Tags kannst du direkt unter den Vorschauen kopieren. Für die Sprite-Anzeige ist kein zusätzliches JavaScript nötig.

Die Pfade führen von index.html zur CSS-Datei und zum Sprite. #home-icon wählt darin das Haus aus.

GIF, JPG und PNG werden als Originaldateien in den SVG-Sprite eingebettet. Transparenz und GIF-Bildfolgen bleiben in der Datei erhalten; die Wiedergabe animierter GIFs hängt vom Zielbrowser ab. Die Bilder werden nicht vektorisiert.

Deine Dateien bleiben in diesem Browser-Tab. Nach dem Neuladen ist die Arbeitsfläche leer. Lade dein Ergebnis vorher herunter.

DIE TECHNIK DAHINTER

Was ist ein SVG-Sprite?

Eine gemeinsame Datei, viele einzeln nutzbare Bilder. CSS <img> Sprite Generator bündelt deine Motive und gibt jedem eine eigene Adresse innerhalb der Datei.

Ein klassischer Bild-Sprite: Motive nebeneinander

Bei einem klassischen Bild-Sprite liegen mehrere Motive neben- oder untereinander in einer gemeinsamen Bilddatei, oft als PNG. Die Website bindet diese Datei mit background-image ein. Über background-position und eine festgelegte Ausschnittgröße wird nur das gewünschte Motiv sichtbar – wie durch ein kleines Fenster auf ein großes Bild.

Dieser SVG-Sprite: Motive als einzeln wählbare Ebenen

CSS <img> Sprite Generator verwendet eine andere Anordnung: Die Motive liegen in getrennten SVG-Bereichen an derselben Position, ähnlich wie Ebenen in Photoshop. Jedes Motiv erhält eine eindeutige Kennung. Du bindest es als HTML-Bild ein, zum Beispiel mit <img src="img/icons-sprite.svg#home-icon" width="24" alt="Haus">.

Der Name hinter # wählt das Motiv aus. Die CSS-Regel :target im Sprite zeigt die passende Ebene; die übrigen bleiben ausgeblendet. Das heißt SVG-Sprite mit Fragment-IDs und CSS-:target. Du brauchst dafür keine Pixelpositionen auszurechnen.

Die mitgelieferte CSS-Datei gehört dazu: Binde icons-sprite.css auf deiner Website ein. Sie setzt die Originalbreite und das richtige Seitenverhältnis für jedes Motiv. Die Ebenenauswahl übernimmt das CSS innerhalb der SVG-Datei; zusätzliches JavaScript ist dafür nicht nötig.

Ein SVG-Sprite kann auch anders aufgebaut sein, zum Beispiel mit <symbol> und <use>. Dieser Generator erzeugt gezielt die Variante für den <img>-Tag.

Zum Vergleich: Klassische Bild-Sprites bei MDN ↗ · CSS-:target bei MDN ↗

Stell dir den Sprite wie eine Photoshop-Datei mit Ebenen vor

In Photoshop kann eine Datei mehrere Bilder auf getrennten Ebenen enthalten. Ähnlich organisiert dieser Sprite seine Motive: Jedes Bild liegt in einem eigenen SVG-Bereich an derselben Anzeigeposition. Du kannst dir diese Bereiche wie einen Stapel übereinanderliegender Ebenen vorstellen. Jede hat einen Namen – etwa sonne, mond oder landschaft.

#sonnespricht die passende Ebene an

Sichtbar: SonneDie übrigen Ebenen sind ausgeblendet.

Für die Skizze sind die Ebenen auseinandergezogen. Im fertigen Sprite teilen sie sich dieselbe Bildfläche. Klicke oder tippe direkt auf eine Ebene, um das sichtbare Motiv zu wechseln. Mit der Tastatur: Tab und Enter.

Das Rautezeichen # wählt die Ebene aus. Beim Bildaufruf demo-sprite.svg#sonne bezeichnet der Teil vor # die gemeinsame Datei. Der Teil danach ist ein URL-Fragment und verweist auf den SVG-Bereich mit id="sonne". Die CSS-Pseudoklasse :target erkennt diesen Bereich. Die eingebauten Regeln zeigen ihn an und lassen alle anderen Bereiche ausgeblendet.

/* Zuerst alle Bildebenen ausblenden */
svg.icon { display: none; }

/* Nur die per #name angesprochene Ebene anzeigen */
svg.icon:target { display: inline; }

Du musst also keine Bildausschnitte oder Pixelpositionen berechnen. Für ein anderes Motiv wechselst du nur den Namen hinter #. Auf deiner Website können mehrere <img>-Elemente gleichzeitig dieselbe Sprite-Datei verwenden und jeweils eine andere Ebene zeigen. Die SVG-Datei enthält weiterhin alle Motive.

Image nicht gleich Image

Warum <img> statt background-image?

Bei einem klassischen CSS-Hintergrund-Sprite liegen mehrere Motive auf einer gemeinsamen großen Bildfläche. Über background-image und background-position wird ein bestimmter Ausschnitt gezeigt. Dieser Sprite verwendet stattdessen einzelne, benannte SVG-Bereiche. Du wählst ein Motiv über <img src="icons-sprite.svg#name"> aus.

Keine Pixelkoordinaten nachrechnen. #home-icon benennt das Motiv direkt. Du brauchst keinen Hintergrund-Ausschnitt mit festen X-/Y-Positionen.
Alternativtexte sind direkt möglich. Ein <img>-Tag kann über alt eine Beschreibung für Screenreader und nicht angezeigte Bilder mitbringen. Rein dekorative Motive erhalten alt="". Hintergrundbilder haben kein eigenes alt-Attribut.
Größe und Seitenverhältnis gezielt steuern. Du verwendest die üblichen HTML- und CSS-Möglichkeiten für Bilder. Die mitgelieferte CSS-Datei ergänzt das passende Seitenverhältnis für jedes Motiv.
Motive unkompliziert ersetzen. Bleibt die Kennung gleich, bleibt auch dein Bildaufruf gleich. Andere Motive müssen nicht neu angeordnet und ihre Hintergrundpositionen nicht angepasst werden. Bei geänderten Abmessungen lädst du die neue CSS-Datei mit hoch.
Bildinhalte stehen nachvollziehbar im HTML. Der vollständige Bildaufruf samt Beschreibung ist an der Stelle sichtbar, an der das Motiv verwendet wird. Auch <figure> und Bildunterschriften lassen sich wie bei anderen HTML-Bildern nutzen.

Ein Hintergrundbild bleibt für dekorative Flächen und wiederholende Muster sinnvoll. Der IMG-Sprite eignet sich besonders für benannte Icons und Bildmotive, die du gezielt als HTML-Bilder einsetzen möchtest.

Was passiert mit den verschiedenen Formaten?

SVG

Formen und Linien

SVG-Vektoren bleiben Vektoren. Formen, Farben und Verläufe werden eingebettet und lassen sich weiter skalieren. SVGs können selbst bereits Pixelbilder enthalten; diese werden dadurch nicht zu Vektoren.

PNG

Pixel mit Transparenz

Die PNG-Datei bleibt unverändert erhalten, einschließlich transparenter Bereiche. Das eignet sich zum Beispiel für freigestellte Logos. Die ursprüngliche Pixelauflösung bleibt die Grenze für scharfe Vergrößerungen.

JPG

Fotos und Bildmotive

JPG und JPEG werden als Originalbild eingebettet. Das Tool komprimiert sie nicht erneut. Es entstehen also keine zusätzlichen JPEG-Verluste; vorhandene Unschärfen und die ursprüngliche Auflösung bleiben bestehen.

GIF

Ein Bild oder eine Bildfolge

Auch GIFs werden unverändert eingebettet, einschließlich ihrer Einzelbilder und Zeitangaben. Ob eine Animation innerhalb eines als Bild geladenen SVGs abgespielt wird, hängt vom Zielbrowser ab. Prüfe animierte Motive deshalb in deiner fertigen Website.

SVG kann andere Bilder über ein <image>-Element einbetten. Das macht aus einer Pixelgrafik keine Vektorgrafik. Die SVG-Bildeinbettung bei MDN ↗

Wann ein Sprite sinnvoll ist

Ein Sprite bündelt oft gemeinsam verwendete Icons und vereinfacht ihre Pflege. Der Browser kann dieselbe Datei für mehrere Motive wiederverwenden. Wie viel das beim Laden spart, hängt unter anderem vom Cache und der Auslieferung ab.

Auch für ein einziges Motiv wird die gesamte Sprite-Datei geladen. Für große Fotosammlungen oder viele lange Animationen sind separate Dateien deshalb oft zweckmäßiger. Ändert sich ein Bild, musst du die gemeinsame Sprite-Datei neu bereitstellen.

So einfach wie ein <img>

So kommt dein Sprite auf die Website

Dateien hinzufügen. Ziehe SVG, GIF, JPG oder PNG in das Tool. Einen vorhandenen Sprite kannst du genauso öffnen und ergänzen.
Vorschau prüfen. Kontrolliere Motive und Namen. Ein Name ohne Dateiendung ist die spätere Kennung. Die helle und dunkle Vorschau hilft bei transparenten Bildern.
Paket herunterladen. Das ZIP enthält den SVG-Sprite, die CSS-Datei mit passenden Seitenverhältnissen, eine Beispielseite und eine kurze Anleitung.
Einbinden. Entpacke das Paket, kopiere die Dateien auf deine Website und passe die Pfade im folgenden Beispiel an. Eine Breite legt die Anzeigegröße fest.

<link rel="stylesheet" href="css/icons-sprite.css">
<img src="img/icons-sprite.svg#home-icon" width="24" alt="Haus">

Die SVG-Datei sollte unter derselben Domain wie deine Website liegen und als image/svg+xml ausgeliefert werden. Ohne #kennung bleibt dieser Sprite absichtlich leer. Die Darstellung prüfst du am besten über einen Webserver.

Mit welchen Browsern funktioniert das?

Für statische SVG-, PNG- und JPG-Motive ergeben sich aus den dokumentierten Webfunktionen die folgenden Mindestversionen. Die Angaben berücksichtigen den erzeugten Sprite einschließlich der mitgelieferten CSS-Datei:

Browser	Geräte	Ab dieser Version*
Google Chrome	Computer und Android	Version 88 (aktuell 153)
Microsoft Edge	Windows, macOS und Linux	Version 88 (aktuell 153)
Mozilla Firefox	Computer und Android	Version 89 (aktuell 155.0.1)
Apple Safari	Mac, iPhone und iPad	Version 15 (aktuell 27)

* Maßgeblich ist hier CSS aspect-ratio, das die Seitenverhältnisse im Paket festlegt: Chrome und Edge ab 88, Firefox ab 89, Safari und iOS Safari ab 15. Browser-Unterstützung für aspect-ratio auf Can I use ansehen ↗ SVG-Bildelemente, href und :target sind in diesen Versionen bereits vorhanden. Das sind aus den Einzeltechniken abgeleitete Mindeststände für den Export, keine separat getesteten Freigaben jeder Browserversion. Recherche: 15. September 2026. Die Klammer nennt den aktuell verifizierten Stable-Stand; diese Angabe wird nicht automatisch aktualisiert. Bei Firefox gilt der Mozilla-Downloadstand 155.0.1; die Dokumentation führt 156 am heutigen Veröffentlichungstag bereits als Stable.

Animierte GIFs sind ein Sonderfall: Die vollständige GIF-Datei bleibt im Sprite erhalten. Ihre Animation innerhalb eines SVG-Bildelements ist jedoch nicht einheitlich festgelegt. Für eine zuverlässig browserübergreifende GIF-Animation verwende die GIF-Datei direkt als <img>.

Für das Online-Tool selbst empfehlen wir die aktuelle Browserversion. Das Beispiel oben hilft dir beim Prüfen der Sprite-Darstellung. Bei einzelnen SVG-Filtern, Schriften oder anderen Einbettungsarten können Unterschiede bestehen.

Technische Referenzen: MDN-Versionsdaten zu aspect-ratio, CSS :target, SVG-Bildelement und GIF-Einschränkung, SVG als Bild.

Browser-Logos aus der Sammlung Browser Logos.

FRAGEN & ANTWORTEN

FAQ – kurz erklärt

Werden meine Bilder irgendwo hochgeladen?

Nein. Das Tool verarbeitet deine Dateien in deinem Browser. Import, Vorschau und Download benötigen keine Übertragung deiner Bilddateien an einen Server. Die Arbeitsfläche wird nicht dauerhaft gespeichert.

Kann ich SVG, GIF, JPG und PNG gemeinsam verwenden?

Ja. Du kannst die Formate mischen und zusätzlich einen bestehenden Sprite aus diesem Tool öffnen. GIF, JPG und PNG dürfen jeweils bis zu 15 MB groß sein, eine SVG-Datei bis zu 75 MB. Der fertige Sprite ist auf 75 MB begrenzt.

Werden Fotos dadurch zu Vektorgrafiken?

Nein. Die SVG-Datei dient als gemeinsamer Behälter. PNG, JPG und GIF behalten ihre ursprünglichen Bilddaten und ihre Pixelauflösung. Bereits vorhandene SVG-Vektoren bleiben skalierbar. Das Tool zeichnet Fotos nicht als Vektoren nach.

Wie aktualisiere ich ein einzelnes Motiv?

Öffne zuerst deinen bisherigen icons-sprite.svg im Tool. Füge danach das neue Bild mit demselben Namen ohne Dateiendung hinzu. Es ersetzt das bisherige Motiv. Lade das neue Paket herunter und ersetze Sprite und CSS auf deiner Website. Prüfe bei einer geänderten Darstellung auch den Browser-Cache.

Was passiert bei gleichen Dateinamen?

Gleiche Namen ohne Dateiendung bezeichnen dieselbe Ebene. logo.png und logo.svg werden beide unter #logo angesprochen. Die zuletzt hinzugefügte Datei ersetzt die vorherige. Für zwei getrennte Motive brauchst du zwei verschiedene Namen.

Warum wird beim Öffnen des Sprites nichts angezeigt?

Diese Sprite-Variante blendet zunächst alle Ebenen aus. Erst ein gültiger Aufruf wie icons-sprite.svg#logo macht die passende Ebene sichtbar. Achte auf den vollständigen Namen und die Groß- und Kleinschreibung. Verwende am besten den angezeigten HTML-Tag.

Wie kopiere ich den fertigen Bildaufruf?

Unter jedem Motiv steht ein vollständiger <img>-Tag. Mit „HTML-Tag kopieren“ übernimmst du ihn direkt. Passe den Bildordner bei Bedarf an und schreibe einen passenden Alternativtext in alt. Die gewünschte Anzeigegröße legst du über width oder deine eigene CSS-Regel fest.

Brauche ich die CSS-Datei und zusätzlich JavaScript?

Nein, die mitgelieferte CSS-Datei setzt die richtigen Seitenverhältnisse der Bilder. Binde sie zusammen mit dem Sprite ein. Die Ebenenauswahl funktioniert über #name und das CSS im Sprite selbst; dafür benötigt deine Website kein zusätzliches JavaScript.

Bleiben GIF-Animationen erhalten?

Die GIF-Datei wird mitsamt allen Einzelbildern eingebettet. Die Wiedergabe einer Animation innerhalb eines SVGs ist jedoch browserabhängig. Wenn die Animation in allen Zielbrowsern zuverlässig laufen muss, binde das ursprüngliche GIF direkt als Bild ein.

Was passiert, wenn ich die Seite neu lade?

Die Arbeitsfläche ist danach leer. Lade dein Sprite-Paket vor dem Neuladen oder Schließen herunter. Später kannst du die gespeicherte SVG-Datei wieder öffnen und weiterbearbeiten.

Bleiben die Originalgrößen erhalten?

Ja. Die ursprünglichen Bilddaten und Abmessungen bleiben im Sprite erhalten. Mit der mitgelieferten CSS-Datei wird jedes Bild standardmäßig in seiner Originalgröße angezeigt. Eine eigene Angabe wie width="24" verkleinert nur die Darstellung auf deiner Website; das Seitenverhältnis bleibt erhalten. Die kleinen Vorschauen im Generator verändern die Exportgröße nicht.

Auch kommerziell nutzbar. Du darfst den CSS <img> Sprite Generator und die erstellten Sprites auch für kommerzielle Projekte verwenden. Voraussetzung ist, dass du die erforderlichen Nutzungsrechte an den verwendeten Bildern hast.