SVG Sprite Generator für den <img>-Tag

Ja. Alle Funktionen und Downloads sind kostenlos, ohne Konto und ohne Zahlung. Der gesamte Upload ist auf 5 MB begrenzt. Technische Schutzgrenzen bleiben bestehen; eine tarifbedingte Begrenzung der Bildanzahl gibt es nicht.

Beim Hinzufügen und in der Vorschau bleiben deine Bilder im Browser. Erst wenn du das Paket herunterlädst, werden die ausgewählten Bildinhalte, Abmessungen und Ebenenkennungen an unseren Server übertragen. Dort werden der Sprite und das ZIP-Paket erstellt. Die Anwendung speichert Bilder und Paket nicht dauerhaft. Deine Arbeitsfläche wird ebenfalls nicht dauerhaft gespeichert.

Ja. Du kannst die Formate mischen und bestehende Sprites aus diesem Generator öffnen. Für den gesamten Upload gelten 5 MB. Die fertige Sprite-Datei kann durch das Einbetten größer werden.

Ja. Automatisch laufende SVG-Animationen (SMIL) und CSS-Animationen mit @keyframes bleiben im Sprite erhalten. Du bindest das Motiv wie gewohnt über einen <img>-Tag ein. Zusätzliches JavaScript ist dafür nicht nötig.

Die Animation muss vollständig in der SVG-Datei enthalten sein. JavaScript, extern geladene Animationen und Animationen, die erst durch einen Klick oder Mausbewegungen starten, werden nicht unterstützt.

Animierte SVGs werden bei src, srcset, picture und CSS-Hintergründen über sprite.svg#kennung eingebunden. Separate SVG-Dateien sind dafür nicht nötig. Die gewählte Anzeigegröße einschließlich Retina/HiDPI bleibt erhalten. Bei Sprites mit SVG-Animationen werden andere Motive transparent ausgeblendet, um die beobachtete Startpause in Chrome und Brave zu vermeiden.

Statische AVIF-Bilder werden ohne erneute Komprimierung in den SVG-Sprite eingebettet. Auch dort benötigt ihre Darstellung einen Browser mit AVIF-Unterstützung. Hinweise dazu findest du im Abschnitt „Browser-Kompatibilität“.

Für statische AVIF-Bilder kannst du „AVIF-Fallback“ aktivieren. Der Download enthält dann zusätzlich separate AVIF- und PNG-Dateien: Für Bilder verwendet der Beispielcode picture, für CSS-Hintergründe und den Body image-set mit PNG als Rückfalllösung. Der Browser wählt das unterstützte Format automatisch. Transparenz bleibt erhalten; der Fallback lässt sich mit Retina/HiDPI kombinieren. Für den Formatwechsel ist kein JavaScript erforderlich. Die responsive Body-Skalierung benötigt weiterhin das mitgelieferte JavaScript. Animierte AVIF-Dateien werden vom PNG-Fallback nicht unterstützt.

Ja, als separate AVIF-Dateien. Aus technischen Gründen werden animierte AVIFs nicht im SVG-Sprite exportiert, da ihre Wiedergabe darin nicht browserübergreifend gewährleistet ist. Die Einbindung erfolgt direkt über src, srcset, picture oder CSS-Hintergründe. Kopiere den mitgelieferten Ordner mit der Endung -animiert mit.

Die Animation bleibt erhalten. Retina/HiDPI passt die Anzeigegröße an; für alle Pixeldichten wird dieselbe unveränderte Datei verwendet. Der Browser muss AVIF-Bildsequenzen unterstützen. Deaktiviere „AVIF-Fallback“, da der PNG-Fallback nur statische AVIF-Bilder unterstützt.

Die Option entfernt Metadaten ohne Qualitätsverlust, etwa Angaben zur verwendeten Software oder zum Aufnahmezeitpunkt. Bildinhalt, Bildabmessungen und Transparenz bleiben unverändert. GIF-Animationen bleiben ebenfalls erhalten. Bei AVIF werden unterstützte beschreibende XMP-Metadaten entfernt. EXIF-Daten, Farbprofile und Angaben zur Ausrichtung bleiben erhalten; nur kleinere Ergebnisse werden übernommen. Eine kleinere Datei ist nicht immer möglich: Das Bild kann bereits effizient gespeichert sein oder keine entfernbaren Metadaten enthalten. Kleine Einsparungen sind in der gerundeten KB-Anzeige möglicherweise nicht sichtbar. Der Generator übernimmt das optimierte Ergebnis nur, wenn es tatsächlich kleiner ist; andernfalls bleibt die Originaldatei erhalten. Die Pixelabmessungen werden bei der verlustfreien Optimierung nicht verkleinert.

Wähle bei Retina/HiDPI zwischen 2× und 3×. Für 100 × 50 Pixel Anzeigegröße benötigst du ein Bild mit 200 × 100 Pixeln bei 2× oder 300 × 150 Pixeln bei 3×. Der Sprite erhält passend @2x oder @3x, zum Beispiel icons-sprite@2x.svg und icons-sprite.css. Die passenden Verweise werden automatisch übernommen, auch in der Beispiel-HTML. Die Anzeigegröße wird automatisch durch den gewählten Faktor geteilt. Vektor-SVGs lassen sich optional ebenfalls skalieren.

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

Öffne zuerst deinen bisherigen icons-sprite.svg im Generator. Füge danach das neue Bild mit demselben Namen (unabhängig von 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.

Gleiche Namen (unabhängig von Dateiendung) bezeichnen die selbe 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.

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 „HTML-Tag kopieren“.

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. Nur die responsive Skalierung eines Body-Hintergrunds benötigt das mitgelieferte JavaScript.

Ja. Animierte GIFs werden mit allen Einzelbildern und Zeitangaben als separate Dateien exportiert. Aus technischen Gründen werden sie nicht im SVG-Sprite exportiert, da ihre Wiedergabe darin nicht browserübergreifend gewährleistet ist. Die Einbindung erfolgt direkt über src, srcset, picture oder CSS-Hintergründe. Kopiere den mitgelieferten Ordner mit der Endung -animiert mit. Dasselbe gilt für animierte AVIFs. Animierte SVGs können weiterhin aus dem gemeinsamen Sprite eingebunden werden.

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. Bei Retina/HiDPI wird die Anzeigegröße durch 2 oder 3 geteilt. Der optionale AVIF-Fallback erzeugt zusätzlich kleinere Dateien für niedrigere Pixeldichten. Die kleinen Vorschauen im Generator verändern die Exportgröße nicht.

Einfache SVG-Grafiken werden direkt als Vektorcode übernommen. Ihre Pfade und der ursprüngliche Bildausschnitt (viewBox) bleiben erhalten. Komplexere statische SVGs können als eingebettetes SVG-Bild gespeichert werden, damit ihre eigenen CSS-Regeln und Kennungen andere Motive nicht beeinflussen. Animierte SVGs werden direkt mit voneinander getrennten Kennungen und CSS-Regeln eingebunden.

Pixelbilder wie JPG, PNG, WebP und statische GIFs oder AVIFs werden normalerweise als Base64-Data-URI in einem image-Element gespeichert. Dabei werden sie nicht in Vektoren umgewandelt. Die Base64-Kodierung selbst verändert die Bildqualität nicht, benötigt aber ungefähr ein Drittel mehr Platz. Gzip-Komprimierung auf deinem Webserver kann die übertragene Datenmenge reduzieren. Optionale Optimierungen und Ausgabevarianten können die Bilddaten zusätzlich verändern.

Jedes Motiv erhält eine eigene Kennung und lässt sich über einen img-Tag mit einer Adresse wie icons-sprite.svg#logo anzeigen. Animierte GIFs und AVIFs sowie aktivierte AVIF-Fallbacks werden als separate Bilddateien ausgegeben.