Das Popup bedienen

Schritt für Schritt

Von der Seite zur Datei

1. Popup öffnen. Geh auf die Seite mit dem SVG und klick auf den SVG-Downloader-Button. Erst dann liest er den Tab: Er scannt beim Öffnen das aktuelle DOM, lass die Seite also zuerst fertig laden.
2. Anzahl ablesen. Das Popup meldet, wie viele SVGs es gefunden hat. Diese Zahl deckt alle vier Quellen ab: Inline-<svg>, Vektoren in <img> und <object> samt data:-URIs, SVGs in CSS-background-image und <use>-Sprite-Referenzen im selben Dokument.
3. Vorschauen durchblättern. Jedes SVG wird isoliert gerendert, von der überladenen Seite abgehoben, damit du es wirklich siehst. Mit Zurück und Weiter gehst du sie durch und landest beim gewünschten.
4. Dateinamen setzen (optional). Tipp einen Namen für das aktuelle SVG, und genau so wird es gespeichert. Lass das Feld leer, greift ein nummeriertes svg-1.svg, mit dem in den Optionen der Erweiterung gesetzten Präfix.
5. Aktuelles SVG laden. Klick auf Aktuelles SVG laden, um nur das auf dem Bildschirm zu speichern. Die Datei ist das Original-Markup mit repariertem xmlns und öffnet in Figma, Illustrator, VS Code und jedem Browser.
6. Oder alle als ZIP laden. Klick auf Alle als ZIP laden, um jedes erkannte SVG auf einmal zu bündeln, ab svg-1.svg in Seitenreihenfolge nummeriert. Das Archiv ist dublettenfrei, und was nicht geholt werden konnte, steht in der Statuszeile des Popups — 8 von 10 SVGs geladen. Übersprungen: 3, 7. — statt stillschweigend zu verschwinden.

Was das Popup zusichert

• Der Originalvektor, kein Screenshot. Jeder Download ist das SVG, das in der Seite stand — seine Pfade, sein viewBox, seine Präzision — es bleibt also in jeder Größe scharf und bleibt editierbarer Text.
• Ein reparierter Namensraum. Inline-SVG lässt xmlns oft weg, weil der Browser es liefert. In einer nackten Datei würde es nicht öffnen; SVG Downloader ergänzt es automatisch.
• Nichts verlässt deinen Rechner. Erkennung, Vorschau und Download laufen auf dem Gerät. Kein Upload, kein Konto, kein Analyse-Aufruf — siehe die Datenschutzerklärung.
• Fehlschläge werden gezeigt, nicht geschluckt. Die Statuszeile benennt alles Übersprungene, damit die Zahl, die du liest, eine ist, mit der du arbeiten kannst.

Was es nicht erwischt

Drei Grenzen lohnt es zu kennen, und das Popup sagt Bescheid, wenn sie greifen. Ein <use>, das auf eine externe Sprite-Datei zeigt — <use href="/sprite.svg#cart"> — wird nicht aufgelöst, und dieses <svg> wird übersprungen; nur Referenzen im selben Dokument werden verfolgt, eine Ebene tief. Auf Seiten mit mehr als 10.000 Elementen wird der CSS-background-image-Scan aus Geschwindigkeitsgründen ausgelassen, du siehst dann nur die anderen drei Quellen. Und die Sammlung endet bei 2.000 Inline-SVGs, wobei jedes einzelne SVG mit mehr als rund 2 MB Markup wegfällt.

Nach dem Speichern umfärben

Viele Icons erben ihre Farbe per currentColor aus dem CSS, eine gespeicherte Datei kann für sich also schwarz aussehen. Willst du eine bestimmte Farbe fest eingebrannt, nutze den optionalen Sprung zum SVG Color Changer — der einzige ausgehende Link der Erweiterung, und nur wenn du klickst. Dort umfärben, dann das Ergebnis speichern.

Wohin als Nächstes

Für eine konkrete Aufgabe sind die Anleitungen direkter: ein SVG von jeder Website laden, alles als ZIP holen oder eines aus einem CSS-Hintergrund ziehen. Hakt etwas? Die FAQ deckt das schwarze Icon, die Datei, die nicht öffnet, und den Rest ab.