Ein SVG aus einem CSS-Hintergrund laden

Wenn ein SVG über background-image gemalt wird, ist es kein Element, auf das du zeigen kannst. Es gibt nichts zu ziehen und nichts für den Rechtsklick. SVG Downloader liest den berechneten Stil, löst die Quelle auf und speichert die Originaldatei.

Erweiterung installieren Anleitung lesen →

Das Problem

Warum sich ein SVG im CSS-Hintergrund nicht speichern lässt

Ein Hintergrundbild ist kein Inhalt — es ist Dekoration an der Box eines anderen Elements. Wenn jemand background-image: url("chevron.svg") schreibt oder den Vektor als data:-URI einbackt, malt der Browser ihn, behandelt ihn aber nie als speicherbares Bild. Fahr darüber, und der Cursor sitzt auf einem <div>, nicht auf dem Icon. Rechtsklick, und du bekommst das Menü des Elements dahinter. Bild speichern unter… erscheint nie, denn für den Browser gibt es dort kein Bild zum Speichern.

Es von Hand zu erreichen ist schlimmer, als es klingt. Du öffnest die DevTools, findest das Element, liest sein berechnetes background-image — und starrst dann entweder auf eine relative URL, die du gegen die Seite auflösen musst, oder auf eine URL-kodierte data:image/svg+xml-Zeichenkette mit lauter maskierten spitzen Klammern. Das in eine saubere Datei zu übersetzen ist Copy-Paste-Arbeit, die du mindestens einmal falsch machst.

Was SVG Downloader stattdessen tut

Öffne das Popup, und es prüft die berechneten Stile der Elemente der Seite, nicht nur der sichtbaren. Überall, wo ein background-image auf ein SVG hinausläuft — eine verlinkte .svg-Datei oder ein eingebetteter Daten-URI —, zieht es die Quelle heraus und gibt ihr eine isolierte Vorschau neben allen anderen gefundenen SVGs. Blättere mit Zurück/Weiter, wähle das gewünschte, und es schreibt den Originalvektor in eine .svg-Datei.

URLs für dich aufgelöst. Ein relatives url(../img/logo.svg) wird zu einer echten Adresse und geholt; die Datei, die ankommt, ist die, auf die das Stylesheet zeigte, keine Vermutung.
Daten-URIs sauber dekodiert. Ein eingebetteter data:image/svg+xml-Hintergrund — URL-kodiert oder Base64 — wird zurück in schlichtes SVG-Markup entpackt, sodass das Gespeicherte als lesbarer, editierbarer Text öffnet.
Der Namensraum repariert. Fehlt dem extrahierten SVG die Deklaration xmlns="http://www.w3.org/2000/svg", ergänzt SVG Downloader sie, damit die Datei ohne Nacharbeit in Figma, Illustrator und jedem Browser öffnet.

Was du zurückbekommst

Format: Eine standardkonforme .svg-Datei — exakt der Vektor, auf den das CSS verwies, dekodiert und mit repariertem Namensraum.
Gelesene Quellen: Sowohl url()-Links als auch eingebettete data:-URIs, ob URL-kodiert oder Base64. Auf Seiten mit über 10.000 Elementen ausgelassen.
Wo es läuft: Vollständig in deinem Browser. Berechnete Stile werden lokal gelesen — kein Upload, kein Server, kein Konto.
Kann außerdem: Inline-SVG, Sprite-Referenzen und ZIP der ganzen Seite.

Gut zu wissen

Fragen zum SVG im CSS-Hintergrund

Warum fehlt Bild speichern unter… bei einem CSS-Hintergrund?

Weil ein Hintergrundbild kein Dokumentelement ist. Der Browser bietet Bild speichern unter… nur für echte Bildknoten an — <img>, <object>, Canvas. Ein CSS-Hintergrund wird auf die Box eines anderen Elements gemalt, dein Rechtsklick landet also auf diesem Element, und es gibt keinen Bild-Eintrag zur Auswahl.

Kann es einen data:-URI-Hintergrund, nicht nur eine verlinkte Datei?

Ja. Eingebettete data:image/svg+xml-Hintergründe sind verbreitet und meist URL-kodiert mit lauter maskierten Klammern — von Hand schwer zu dekodieren. SVG Downloader entpackt URL-kodierte wie Base64-Daten-URIs vor dem Speichern in sauberes SVG-Markup.

Prüft es jedes Element, egal wie groß die Seite ist?

Berechnete Stile zu lesen heißt, Elemente einzeln anzufassen, und das wird schnell teuer. Deshalb gibt es eine Obergrenze: Hat eine Seite mehr als 10.000 Elemente, wird der Hintergrund-Scan komplett ausgelassen und du siehst nur die anderen drei Quellen. Das Popup sagt es, statt still eine kurze Liste zurückzugeben. Unterhalb dieser Schwelle wird jedes Element geprüft, sichtbar oder nicht.

Der Hintergrund nutzt ein Sprite oder zeigt nur einen Ausschnitt eines größeren SVG. Was wird geladen?

Geladen wird die Quelle, auf die das Stylesheet verweist — die ganze SVG-Datei, auch wenn CSS sie mit background-position und background-size auf einen Bereich zuschneidet. Liegen die Icons stattdessen in einem echten <use>-Sprite, ist der Sprite-Extraktor das Werkzeug, das sie trennt.

Speichere den Hintergrund, den die Seite nicht herausrückt

Kostenlos, privat, und es liest das SVG, das in deinem Stylesheet steckt.

Erweiterung installieren Alle Funktionen →