Lade Inline-SVG von jeder Seite

Ein Inline-<svg> ist direkt ins HTML gezeichnet, hat also keine Bild-URL und kein Rechtsklick-Menü. SVG Downloader liest es direkt aus dem DOM, repariert es und gibt dir die Originaldatei.

Erweiterung installieren Anleitung lesen →

Das Problem

Warum der Browser Inline-SVG nicht speichert

Die meisten Icons einer modernen Website sind Inline-SVG — das Markup steht direkt im HTML der Seite statt in einer eigenen Datei. Großartig für Tempo und Gestaltung, furchtbar fürs Speichern. Es gibt kein src, das man in einem Tab öffnen könnte, keinen Eintrag im Kontextmenü, und Bild speichern unter… ist ausgegraut oder fehlt ganz.

Die üblichen Umwege taugen nichts. Ein Screenshot des Icons liefert ein unscharfes Raster in genau einer Größe. In den DevTools zu wühlen heißt, den richtigen <svg>-Knoten zu jagen, sein äußeres HTML zu kopieren, es in eine Datei zu setzen und dann festzustellen, dass sie nicht öffnet, weil der Namensraum fehlt. Du wolltest eine 400-Byte-Datei; bekommen hast du eine Pflichtaufgabe.

Was SVG Downloader stattdessen tut

Öffne das Popup auf einer beliebigen Seite, und es durchläuft das DOM nach jedem <svg>-Element, auch nach denen tief in Komponenten, in shadow-nahem Markup und in wiederholten Icon-Sätzen. Jedes bekommt eine isolierte Vorschau, damit du genau siehst, was du gleich speicherst, fern der überladenen Seite. Wähle eins, und es schreibt das Original-Markup in eine echte .svg-Datei.

Die echten Pfade, kein neues Rendering. Gespeichert wird das SVG, das in der Seite stand — seine exakten d-Attribute, sein viewBox, seine eigene Präzision. Es bleibt bei 16 px wie bei 1600 px scharf und bleibt editierbarer Text zum Umfärben.
Ein repariertes xmlns. Inline-SVG lässt den Namensraum xmlns="http://www.w3.org/2000/svg" meist weg, weil der Browser ihn liefert. In eine nackte Datei kopiert, öffnet dieses SVG nicht. SVG Downloader ergänzt ihn, damit die Datei in Figma, Illustrator, VS Code und jedem Browser funktioniert.
Der Dateiname gehört dir. Tipp vor dem Speichern einen Namen ins Popup, und die Datei heißt genau so — star.svg, nicht download (3).svg. Lass es leer, greift ein nummeriertes svg-1.svg mit dem Präfix aus den Optionen der Erweiterung.

Was du zurückbekommst

Format: Eine standardkonforme .svg-Datei — das originale Vektor-Markup mit repariertem Namensraum.
Treue: Jeder Pfad und jedes viewBox erhalten. Auflösungsunabhängig und weiterhin umfärbbar.
Wo es läuft: Vollständig in deinem Browser. Das Inline-SVG verlässt die Seite nie — kein Upload, kein Server.
Kann außerdem: CSS-Hintergründe, Sprite-Referenzen und ZIP der ganzen Seite.

Gut zu wissen

Fragen zu Inline-SVG

Warum kann ich ein Inline-SVG nicht per Rechtsklick speichern?

Weil ein Inline-<svg> Teil des Dokuments ist, kein Bild mit eigener Adresse. Der Browser bietet Bild speichern unter… nur für das an, was er als Bild behandelt — <img>, CSS-Hintergründe, Canvas. Inline-SVG hat keine URL zum Speichern, also erscheint die Option nie.

Das aus den DevTools kopierte SVG öffnet nicht. Warum?

Fast immer ein fehlender Namensraum. Inline-SVG verlässt sich auf den HTML-Parser, um als SVG erkannt zu werden; eine eigenständige Datei braucht ein ausdrückliches xmlns="http://www.w3.org/2000/svg". SVG Downloader ergänzt es automatisch, damit seine Dateien überall ohne Nacharbeit öffnen.

Behält das geladene Icon seine Farbe?

Es behält die Farbe, die im Markup steckt. Viele Inline-Icons erben ihre Farbe aus dem CSS (currentColor), die gespeicherte Datei kann also schwarz sein. Willst du vorher eine bestimmte Farbe festlegen, nimm den Sprung zum SVG Color Changer und speichere danach.

Schnapp dir das Icon mit zwei Klicks

Kostenlos, privat, und es liest das Inline-SVG, das der Browser ignoriert.

Erweiterung installieren Alle Funktionen →