Speichere das echte SVG.

Keinen Screenshot davon.

Rechtsklick → Bild speichern unter… gibt dir ein PNG, oder gar nichts. SVG Downloader findet jeden Vektor der Seite — Inline-Icons, Bild- SVGs, CSS-Hintergründe, Sprite-Sheets —, zeigt jeden in der Vorschau und gibt dir die Originaldatei.

Erweiterung installieren In Aktion sehen ↓

Kostenlos, ohne Konto Nichts verlässt deinen Browser Inline, Bild, CSS & Sprites

Das Ganze, in einer Aufnahme

aufn. · vectorly.io/icons
Eine Sitzung auf einer echten Seite: öffnen, scannen, 24 SVGs gefunden, durch die Vorschauen blättern, star.svg laden und dann alle vierundzwanzig als ZIP holen. Keine Mockups — das ist die Erweiterung, im Betrieb.

01 — Das Problem

Der Browser rückt es nicht einfach heraus

Ein SVG ist Text — ein paar hundert Byte Koordinaten. Das Einzige, was du willst, ist genau das, was die Seite am schwersten herausgibt.

Inline-<svg> hat kein eigenes Rechtsklick-Menü. Ein Icon- Satz hinter einem CSS-background-image lässt sich nicht ziehen. Ein Sprite- Sheet versteckt vierzig Glyphen in einer Datei. Also macht man einen Screenshot des Icons und zeichnet ihn nach oder wühlt in den DevTools nach dem Knoten — und endet mit einem Raster eines Vektors, unscharf in dem Moment, in dem er skaliert wird.

star.svg — was du willst

Scharf bei 16 px oder 1600 px. Umfärbbar. Ein paar hundert Byte.

star.png — was du bekommst

Ein Screenshot. Unscharf außerhalb seiner einen Größe. Nicht umgestaltbar.

Der Vektor sitzt bereits in der Seite. Du solltest ihn nicht nachzeichnen müssen, um ihn zu behalten.

02 — So funktioniert es

Vier Handgriffe, ein Popup

Alles passiert in einem 360-px-Panel, das aus der Symbolleiste fährt. Das sind die vier Takte der Demo oben, einer nach dem anderen — jede Aufnahme zeigt die echte Erweiterung auf derselben Live-Seite.

  1. Öffne es, und es zählt, was es findet

    Klick auf einer beliebigen Seite auf das Symbol, und das Panel scannt beim Öffnen das DOM — Inline-<svg>, <img>-Vektoren, CSS- background-images und <use>-Sprite-Referenzen gleichermaßen. Der Zähler läuft hoch auf das, was es findet: 0 → 24 SVGs gefunden.

    01 · erkennen
    Das Panel fährt ein und der Zähler bleibt bei 24 SVGs gefunden stehen.

  2. Jedes in der Vorschau ansehen und durchblättern

    Jeder erkannte Vektor bekommt eine saubere, isolierte Vorschau — für sich, fern der überladenen Seite, sodass du genau das siehst, was du gleich speicherst. Zurück und Weiter gehen den ganzen Satz durch: Lupe, Herz, Stern und die einundzwanzig dahinter.

    02 · Vorschau
    Durch die Vorschauen blättern — der Dateiname zieht mit: search-24, heart-24, star-24.

  3. Lade das Original, mit einem Klick

    Benenne es, wenn du magst, klick auf Aktuelles SVG laden, und die echte Datei landet in deinen Downloads — das tatsächliche Markup, von der Seite abgehoben, mit repariertem xmlns, damit es überall öffnet. Ein Haken star.svg gespeichert bestätigt es.

    03 · Download
    Ein Klick, und star.svg gespeichert — der Originalvektor, kein Screenshot.

  4. Oder nimm die ganze Seite als ZIP

    Alle als ZIP laden bündelt die gefundenen SVGs — hier alle vierundzwanzig — in ein Archiv, dublettenfrei und ab svg-1.svg nummeriert, mit änderbarem Präfix. Was nicht geholt werden konnte, wird in der Statuszeile benannt statt still übersprungen. Ein ganzer Icon-Satz, mit einem Klick.

    04 · bündeln
    Jeder Vektor der Seite, gebündelt: 24 SVGs gespeichert.

fertig Die Vektoren waren immer in der Seite. Jetzt sind sie in deinen Downloads.

03 — Die Details

Was es erwischt und was es bewahrt

Vier Aussagen über sein Verhalten — von der Art, die einem erst auffällt, wenn ein einfacheres Werkzeug sie falsch macht.

Jede Quelle

Inline, Bild, Hintergrund, Sprite

Vier Arten, wie eine Seite einen Vektor tragen kann, und es liest alle vier — Daten-URIs, <object>, CSS-Hintergründe und <use>-Sprite-Referenzen, die die meisten Extraktoren komplett verpassen.

Treue

Das Original-Markup, kein neues Rendering

Gespeichert wird das SVG, das in der Seite stand — seine Pfade, sein viewBox, seine eigene Präzision. Scharf in jeder Größe und weiterhin editierbarer Text zum Umfärben.

In Serie

Eines oder alle auf einmal

Benenne und speichere ein einzelnes Icon oder nimm die ganze Seite als dublettenfreies ZIP. Einen Satz von vierzig Icons zu holen kostet denselben einen Klick wie eines.

Auf dem Gerät

Kein Server, kein Konto, kein Upload

Alles läuft in deinem Browser auf der Seite vor dir. Nichts wird irgendwohin geschickt — es gibt kein Wohin. Vorher umfärben? Ein Link übergibt an den SVG Color Changer.

04 — Wie diese Seite gemacht ist

Jedes Bild hier ist Remotion

Nichts auf dieser Seite ist eine Bildschirmaufnahme. Das Hero-Video, die vier Clips, jedes Poster und jeder Store-Screenshot werden aus einem einzigen React-Projekt gerendert.

Ein kleines Kit in motion/src/kit baut das Popup, den Browser- Rahmen und einen menschlich wirkenden Cursor als Komponenten nach, alle aus einem Theme — derselben monochromen Palette, die die echte Erweiterung ausliefert. Eine 24-Sekunden- Promo-Komposition choreografiert den ganzen Ablauf; die Clips oben sind direkt daraus geschnittene Bildbereiche, und die Standbilder sind Einzelbilder aus eigenen Kompositionen. Ändere ein Wort, und jedes Asset rendert synchron neu, mit einem einzigen Befehl.

05 — Datenschutz

Es gibt keinen Server

Kein Backend, keine Analyse, kein Konto, kein Upload. Die Erweiterung liest die Seite, auf der du bist, nur wenn du sie öffnest, und schreibt Dateien auf deinen eigenen Rechner.

Ein SVG muss deinen Browser nie verlassen, um gespeichert zu werden — es ist schon da, und du auch. Das ist das ganze Vertrauensmodell: Es gibt nichts dazwischen, weil es kein Dazwischen gibt. Der eine ausgehende Link ist optional und deiner zum Klicken: eine Übergabe an den SVG Color Changer, wenn du vor dem Speichern umgestalten willst.