Ein SVG aus einem CSS-Hintergrund holen

Q: Kann es data:-URIs und url()-Referenzen gleichermaßen?

Ja. SVG Downloader löst ein eingebettetes background-image mit data:-URI durch Dekodieren auf und ein url(), das auf eine .svg-Datei zeigt, durch Lesen dieser Datei. So oder so bekommst du den Originalvektor zurück.

Ein background-image-SVG wird direkt aus dem Stylesheet auf ein Element gemalt. Es gibt kein Bild für den Rechtsklick und keine Datei, die in der Seite liegt. SVG Downloader liest die berechneten Stile, löst die Referenz auf und speichert den Originalvektor.

Erweiterung installieren Funktion ansehen →

Das Problem

Warum Hintergrund-SVGs dem Rechtsklick widerstehen

Viele dekorative Zeichen, Muster und Icons werden als CSS-background-image aufgetragen statt als <img> gesetzt. Das ist eine verbreitete, saubere Art, einen Button oder eine Bühne zu gestalten. Es heißt aber auch, dass das SVG vom Stylesheet auf den Hintergrund eines Elements gezeichnet wird und der Browser dieses Element nicht als Bild behandelt. Rechtsklick, und es gibt kein Bild speichern unter… — nichts, was das Menü als speicherbar erkennt.

Schlimmer noch: Das SVG kann sich in zwei verschiedenen Gestalten verstecken. Es kann ein data:-URI sein, direkt ins CSS gestopft, URL-kodiert und unleserlich. Oder ein url(), das auf eine separate .svg-Datei irgendwo auf dem Server zeigt. Beides über die DevTools zu verfolgen heißt, berechnete Stile von Hand zu lesen, zu dekodieren oder zu laden und dann eine Datei zu reparieren, die nicht öffnet.

Wie SVG Downloader es liest

Die Erweiterung erledigt diese Lauferei für dich. Sie durchgeht die berechneten Stile der Seite, erkennt background-image-Deklarationen mit einem SVG und löst die gefundene Form auf — dekodiert einen data:-URI an Ort und Stelle oder liest die Datei, auf die ein url() zeigt. Gespeichert wird das Original-Markup, kein Bild davon.

Schritt für Schritt: vom Hintergrund zur Datei

Installieren und Popup öffnen. Füge die kostenlose Erweiterung zu Chrome, Edge oder Brave hinzu, öffne die Seite und klick auf das Symbol in der Leiste. Alles passiert lokal.
Lass es die berechneten Stile lesen. SVG Downloader prüft die Stile der Seite und sammelt die Hintergrund-SVGs neben den Inline-, <img>- und Sprite-Quellen im selben Dokument, die es ebenfalls erkennt. Auf Seiten mit über 10.000 Elementen wird dieser Scan aus Tempogründen ausgelassen, und das Popup sagt es.
Vorschau ansehen und wählen. Jedes Hintergrund-SVG erscheint in einer isolierten Vorschau, fern der überladenen Seite. Mit Zurück/Weiter landest du beim gewünschten.
Originalvektor laden. Klick auf Aktuelles SVG laden. Du bekommst eine echte .svg-Datei mit intaktem viewBox und intakten Pfaden und repariertem xmlns, bereit für Figma, Illustrator oder VS Code.

SVG Downloader zeigt die Vorschau eines aus den berechneten Stilen aufgelösten CSS-background-image-SVG — Jedes Hintergrund-SVG wird aus dem berechneten Stil aufgelöst und in einer isolierten Vorschau gezeigt, bevor du `Aktuelles SVG laden` klickst.

Was du zurückbekommst

Beide Formen: Eingebettete data:-URIs und url()-Verweise auf .svg-Dateien werden gleich aufgelöst.
Original-Markup: Der Vektor, der das Element gestaltet hat — Pfade und viewBox erhalten, Namensraum repariert. Kein Screenshot.
Auf dem Gerät: Liest berechnete Stile in deinem Browser. Das SVG verlässt die Seite nie; nichts wird hochgeladen.
Kann außerdem: Inline-SVG, Sprite-Referenzen und ZIP der ganzen Seite.

Gut zu wissen

Fragen zu SVGs im CSS-Hintergrund

Warum kann ich ein SVG im CSS-Hintergrund nicht per Rechtsklick speichern?

Weil ein CSS-Hintergrund vom Stylesheet gemalt und nicht als Bildelement gesetzt wird. Der Browser bietet Bild speichern unter… nur für das an, was er als Bild behandelt — ein <img>, ein Canvas. Ein background-image lebt im berechneten Stil eines Elements, im Kontextmenü gibt es also nichts zu speichern.

Kann es data:-URIs und url()-Referenzen gleichermaßen?

Ja. SVG Downloader löst ein eingebettetes background-image mit data:-URI durch Dekodieren auf und ein url(), das auf eine .svg-Datei zeigt, durch Lesen dieser Datei. So oder so bekommst du den Originalvektor zurück.

Ist die gespeicherte Datei das echte SVG oder ein Screenshot?

Das echte SVG. Die Erweiterung speichert das Original-Markup — Pfade und viewBox intakt, Namensraum repariert —, kein gerendertes Raster. Es bleibt in jeder Größe scharf und bleibt editierbar.

Hol das Zeichen aus dem Stylesheet

Kostenlos, privat, und es liest das Hintergrund-SVG, das der Browser nicht herausrückt.

Erweiterung installieren Alle Anleitungen →