So lädst du ein SVG von jeder Website

Die vier Verstecke

Wo SVGs auf einer Seite wirklich leben

Vor der Methode hilft es zu wissen, warum der naheliegende Weg scheitert. Ein SVG auf einer Webseite ist fast nie eine schlichte bild.svg, die du in einem neuen Tab öffnen kannst. Es ist meist eines von vier Dingen, und jedes hebelt das Speichern-Menü des Browsers auf seine Art aus.

• Inline-<svg>. Das Markup ist direkt ins HTML gezeichnet. Kein src, keine Bild-URL, das Kontextmenü bietet also nichts. So werden heute die meisten Icon-Systeme ausgeliefert. Siehe Inline-SVG.
• CSS-background-image. Der Vektor steht in einem Stylesheet — mal als Datei, oft als eingebetteter data:-URI. Der Browser behandelt ihn als Dekoration, nicht als speicherbares Bild. Siehe SVG im CSS-Hintergrund.
• <use>-Sprite-Referenzen. Ein verstecktes Sprite hält viele Icons; jede Stelle, an der sie auftauchen, ist nur ein <use>-Zeiger. Den Zeiger zu speichern bringt nichts Brauchbares. Siehe Sprite-Extraktor.
• <img>- und <object>-Quellen. Der freundlichste Fall — doch selbst hier kann die Quelle ein data:-URI sein, den das Speichern-Menü verstümmelt, oder eine Cross-Origin-URL, die unter falschem Namen landet.

Die universelle Methode — fünf Schritte

SVG Downloader ignoriert den Unterschied zwischen diesen vier Fällen. Es liest die lebende Seite, löst jede Quelle zu echtem SVG-Markup auf und gibt dir eine Datei. Der ganze Durchlauf dauert beim ersten Mal etwa zwei Minuten und danach ein paar Sekunden.

1. Erweiterung installieren. Füge SVG Downloader zu Chrome, Edge oder Brave hinzu (Chrome 88+). Kostenlos, MIT-lizenziert, und nichts daran funkt nach Hause.
2. Popup auf der Seite öffnen. Geh auf die Seite mit dem gewünschten SVG und klick auf das Symbol in der Symbolleiste, um das Popup zu öffnen.
3. Lass es scannen. Die Erweiterung durchläuft das DOM und sammelt die gefundenen Vektoren — Inline-Elemente, CSS-Hintergründe, Sprite-Referenzen im selben Dokument und Bildquellen samt data:-URIs.
4. Vorschau ansehen und wählen. Jedes SVG erscheint in einer isolierten Vorschau, sauber und fern der überladenen Seite. Blättere mit Zurück und Weiter und tipp einen Dateinamen, wenn dir der Name wichtig ist.
5. Laden. Klick auf Aktuelles SVG laden für das auf dem Bildschirm — unter dem getippten Namen oder als nummeriertes svg-1.svg, wenn du das Feld leer gelassen hast — oder auf Alle als ZIP laden, um den ganzen Satz auf einmal zu nehmen, dublettenfrei und nummeriert, mit allem Unauflösbaren in der Statuszeile des Popups benannt.

Vorschau

Warum nicht einfach Rechtsklick?

Das Bild speichern unter… des Rechtsklicks erscheint nur für das, was der Browser als Bild mit abrufbarer Adresse einstuft: ein <img> mit URL, ein Canvas, manchmal ein CSS-Hintergrund. Drei der vier obigen Quellen sind das nicht. Inline-SVG hat keine URL. Ein Sprite-<use> löst zu einem Dokumentfragment auf. Ein Hintergrund mit data:-URI ist eine Zeichenkette in einem Stylesheet. Und selbst wenn das Menü doch erscheint, speichert es oft ein neu gerastertes Bild oder eine Datei namens download.svg mit kaputtem Namensraum. Das DOM zu lesen umgeht all das und liefert den echten Vektor.

Zwei Dinge, über die alle stolpern

Zwei Ergebnisse überraschen Erstnutzer, und beide sind erwartetes Verhalten, keine Fehler.

• Die Datei ging vorher nicht auf — jetzt schon. Inline-SVG lässt den Namensraum xmlns="http://www.w3.org/2000/svg" meist weg, weil der HTML-Parser ihn liefert. In eine nackte Datei kopiert, öffnet dieses SVG nicht. SVG Downloader repariert das fehlende xmlns beim Speichern, sodass seine Dateien in Figma, Illustrator, VS Code und jedem Browser öffnen.
• Das Icon sieht schwarz aus. Viele Icons erben ihre Farbe per currentColor aus dem CSS, die eigenständige Datei hat also keine eigene Farbe und wird schwarz gezeichnet. Das ist das echte Markup. Brauchst du eine bestimmte Farbe fest, nimm den optionalen Sprung zum SVG Color Changer, färb um und speichere dann.

Läuft auf

Chrome 88+, Edge und Brave. Jede Seite, die du öffnen kannst — Inline-, CSS-, Sprite- und Bildquellen.

Ergebnis

Das originale Vektor-Markup, Namensraum repariert, auflösungsunabhängig und umfärbbar.

Datenschutz

100 % auf dem Gerät. Kein Server, kein Konto, kein Upload, keine Analyse.

Weiter

Du willst einen ganzen Satz? Sieh dir SVG-Icons extrahieren und Alle als ZIP laden an.

Gut zu wissen

Häufig gefragt