Save the real SVG.
Not a screenshot of it.

Right-click → Save image as… gives you a PNG, or nothing at all. SVG Downloader finds every vector on the page — inline icons, image SVGs, CSS backgrounds, sprite sheets — previews each one, and hands you the original file.

Free, no account Nothing leaves your browser Inline, image, CSS & sprites

The whole thing, in one take

rec · vectorly.io/icons
One session on one real page: open, scan, 24 SVGs found, page through the previews, download star.svg, then grab all twenty-four as a ZIP. No mockups — that's the extension, running.

01 — The problem

The browser won't just give it to you

An SVG is text — a few hundred bytes of coordinates. The one thing you want is the one thing the page makes hardest to get.

Inline <svg> has no right-click menu of its own. An icon set behind a CSS background-image can't be dragged. A sprite sheet hides forty glyphs inside one file. So people screenshot the icon and trace it, or dig through DevTools for the node — and end up with a raster of a vector, fuzzy the moment it's resized.

star.svg — what you want

Sharp at 16px or 1600px. Recolourable. A few hundred bytes.

star.png — what you get

A screenshot. Fuzzy off its one size. Can't restyle.

The vector is already sitting in the page. You shouldn't have to redraw it to keep it.


02 — How it works

Four moves, one popup

Everything happens in a 360px panel that drops from the toolbar. These are the four beats of the demo above, one at a time — each recording is the real extension on the same live page.

  1. Open it, and it counts every SVG

    Click the icon on any page and the panel scans the DOM as it opens — inline <svg>, <img> vectors, CSS background-images and <use> sprite references alike. The counter runs up to what it finds: 0 → 24 SVGs found.

    01 · detect
    The panel drops in and the counter settles on 24 SVGs found.
  2. Preview each one, and page through

    Every detected vector gets a clean, isolated preview — on its own, off the busy page, so you can see the exact thing you're about to save. Previous and Next walk the whole set: search, heart, star, and the twenty-one behind them.

    02 · preview
    Paging the previews — the filename tracks along: search-24, heart-24, star-24.
  3. Download the original, in one click

    Name it if you like, hit Download Current SVG, and the real file lands in your downloads — the actual markup lifted off the page, with a missing xmlns repaired so it opens everywhere. A Saved star.svg tick confirms it.

    03 · download
    One click, and Saved star.svg — the original vector, not a screenshot.
  4. Or take the whole page as a ZIP

    Download All as ZIP bundles every SVG the page has — all twenty-four here — into one archive, each file named and de-duplicated, with a report of anything that couldn't be fetched rather than a silent skip. A whole icon set, in one click.

    04 · bundle
    Every vector on the page, bundled: 24 SVGs saved.

done The vectors were always in the page. Now they're in your downloads.


03 — The details

What it catches, and what it keeps

Four claims about how it behaves — the kind of thing you only notice when a simpler tool gets it wrong.

Every source

Inline, image, background, sprite

Four ways a page can carry a vector, and it reads all four — data URIs, <object>, CSS backgrounds and <use> sprite refs most extractors miss entirely.

Fidelity

The original markup, not a re-render

What saves is the SVG that was in the page — its paths, its viewBox, its own precision. Sharp at any size, and still editable text you can recolour.

At scale

One, or all of them at once

Name and save a single icon, or take the whole page as a de-duplicated ZIP. Grabbing a forty-icon set costs the same one click as grabbing one.

On device

No server, no account, no upload

Everything runs in your browser on the page in front of you. Nothing is sent anywhere — there's nowhere for it to be sent. Need to recolour first? A link hands off to the SVG Color Changer.


04 — How this page is made

Every frame here is Remotion

Nothing on this page is a screen recording. The hero video, the four clips, every poster and every store screenshot are rendered from one React project.

A small kit in motion/src/kit rebuilds the popup, the browser chrome and a human-feeling cursor as components, all drawing from one theme — the same monochrome palette the real extension ships. One 24-second promo composition choreographs the whole flow; the clips above are frame ranges cut straight from it, and the stills are single frames of dedicated compositions. Change a word and every asset re-renders in sync, from one command.


05 — Privacy

There is no server

No backend, no analytics, no account, no upload. The extension reads the page you're on, only when you open it, and writes files to your own machine.

An SVG never has to leave your browser to be saved — it's already there, and so are you. That's the whole trust model: there is nothing in the middle, because there is no middle. The one outbound link is optional and yours to click: a hand-off to the SVG Color Changer when you want to restyle before you save.