So extrahierst du SVG-Icons von einer Website

Q: Wie speichere ich einen ganzen Icon-Satz statt eines Icons nach dem anderen?

Öffne die Seite, die den Satz zeichnet, und klick auf Alle als ZIP laden. Die Erweiterung sammelt die auf der Seite gefundenen SVGs in ein Archiv, dublettenfrei, sodass ein Satz von ein paar Dutzend Icons mit einem Klick herunterkommt.

Ein Icon zu greifen ist leicht. Einen ganzen Satz zu greifen — jeden Pfeil, jedes Glyph und jedes Logo, das eine Seite zeichnet, nummeriert und dublettenfrei — dafür ist diese Anleitung da.

Erweiterung installieren Zu den Schritten ↓

Die Form des Problems

Ein Icon-Satz ist kein Ordner voller Dateien

Wenn eine Site einen Icon-Satz ausliefert, siehst du selten Dateien. Du siehst Komponenten. Jedes Icon ist ein vom Framework gerendertes Inline-<svg>, eine <use>-Referenz in ein verstecktes Sprite oder ein CSS-Hintergrund. Den ganzen Satz von Hand zu speichern heißt, die DevTools dutzendfach zu öffnen, Markup zu kopieren, Namensräume zu reparieren und Dateinamen zu erfinden — für einen Satz, der sechzig Icons tief sein kann.

SVG Downloader macht daraus einen einzigen Scan. Es liest die gerenderte Seite, erkennt jedes Icon als echtes SVG-Markup — siehe wie das Inline-Lesen funktioniert — und gibt dir zwei Auswege: ein Icon nach dem anderen mit selbst gewähltem Namen, oder den ganzen Satz in einem ZIP.

SVG Downloader erkennt einen kompletten Satz von Inline-SVG-Icon-Komponenten auf einer Website — Ein Scan listet jedes Inline-Icon, das die Seite zeichnet — keine DevTools, kein Copy-Paste.

Den Satz extrahieren — Schritt für Schritt

Öffne die Seite des Icon-Satzes. Geh auf die Ansicht, die die Icons tatsächlich zeichnet — eine Komponenten-Galerie, eine Navigationsleiste, ein Doku-Raster. Was die Seite noch nicht gezeichnet hat, steht nicht im DOM: Sorg dafür, dass der Satz auf dem Bildschirm ist.
Popup öffnen und scannen. Klick auf das Symbol in der Symbolleiste. SVG Downloader erkennt die Inline-SVG-Icon-Komponenten der ganzen Seite und listet jede gefundene auf.
Blättere durch den Satz. Mit Zurück und Weiter gehst du durch die isolierten Vorschauen und bestätigst, was die Seite hergibt. Das ist zugleich dein Plausibilitätscheck, dass der ganze Satz da ist, bevor du exportierst.
Benenne die, die du einzeln willst. Für ein einzelnes Icon setz den optionalen Dateinamen und klick auf Aktuelles SVG laden, damit es als chevron-left.svg landet statt als download (3).svg.
Hol den ganzen Satz als ZIP. Klick auf Alle als ZIP laden. Die Icons kommen auf einmal herunter, dublettenfrei, und die Statuszeile des Popups benennt, was sich nicht auflösen ließ — die ZIP-Anleitung beschreibt diesen Export im Detail.

Warum der Export des ganzen Satzes der schnelle Weg ist

Die ZIP-Massenfunktion ist genau dafür gebaut. Icon-Sätze stecken voller Wiederholungen — derselbe Pfeil in einem Dutzend Menüs, ein Logo im Kopf und im Fuß — und ein naiver Griff würde jede Instanz speichern. SVG Downloader entdoppelt identische SVGs, das Archiv spiegelt also den echten Satz: Aus sechzig Darstellungen können vierzig eindeutige Icons werden, und genau die bekommst du. Dateien sind in Seitenreihenfolge nummeriert — svg-1.svg, svg-2.svg —, entpacken also in derselben Folge, die du in der Vorschau durchgeblättert hast, und das Präfix svg kannst du in den Optionen der Erweiterung ändern.

Worauf du dich verlassen kannst

Originalvektoren, keine Renderings. Jede Datei ist das SVG, das in der Seite stand — seine exakten Pfade und sein viewBox —, jedes Icon bleibt also in jeder Größe scharf und bleibt editierbar.
Namensräume repariert. Das fehlende xmlns, das kopiertes Inline-SVG kaputt macht, wird ergänzt, damit jede Datei im ZIP in Figma, Illustrator und VS Code öffnet.
Nichts verlässt deinen Rechner. Die ganze Extraktion läuft auf dem Gerät — kein Server, kein Konto, kein Upload, keine Analyse.

Am besten für: Ganze Icon-Sätze — Galerien, Navigationsleisten, Doku-Raster, die als Inline-Komponenten gezeichnet werden.
Zwei Ausgänge: Aktuelles laden mit eigenem Namen, oder Alle als ZIP laden für den Satz.
Dublettenfrei: Wiederholte Icons werden einmal gespeichert, das Archiv passt also zum echten Satz.
Verwandt: Siehe Inline-SVG und ZIP der ganzen Seite.

Gut zu wissen

Häufig gefragt

Wie speichere ich einen ganzen Icon-Satz statt eines Icons nach dem anderen?

Öffne die Seite, die den Satz zeichnet, und klick auf Alle als ZIP laden. Die Erweiterung sammelt die auf der Seite gefundenen SVGs in ein Archiv, dublettenfrei, sodass ein Satz von ein paar Dutzend Icons mit einem Klick herunterkommt.

Werden doppelte Icons zweimal gespeichert?

Nein. Der ZIP-Export entdoppelt identische SVGs, ein Navigationspfeil an zehn Stellen wird also einmal gespeichert. Das hält das Archiv sauber und entspricht der wahren Größe des Satzes.

Kann ich die Dateinamen bestimmen?

Für ein einzelnes Icon tippst du den gewünschten Dateinamen, bevor du auf Aktuelles SVG laden klickst, und die Datei wird genau so gespeichert. Ein ZIP ist stattdessen nummeriert — svg-1.svg, svg-2.svg in Seitenreihenfolge — und du kannst das Präfix svg in den Optionen der Erweiterung beliebig ändern, sodass ein Satz ab acme-1.svg landen kann.

Findet es nur Inline-Icons oder auch versteckte?

Es erkennt Inline-SVG-Komponenten, Icons in CSS-Hintergründen, <use>-Sprite-Referenzen im selben Dokument und <img>- oder <object>-Quellen samt data:-URIs. Wenn das Icon auf der Seite gezeichnet ist, ist es dabei. Icons, die die Seite noch nicht geladen hat, tauchen erst danach auf.

Sind die extrahierten Icons weiterhin editierbare Vektoren?

Ja. Jede Datei ist das originale SVG-Markup mit intakten Pfaden und intaktem viewBox und repariertem xmlns-Namensraum, öffnet und bearbeitet sich also sauber in Figma, Illustrator oder einem Code-Editor.

Nimm den ganzen Satz mit einem Klick

Kostenlos, privat, und es entdoppelt den Satz, damit du behältst, was zählt.

Erweiterung installieren Alle Anleitungen →