The whole thing, in one take
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
star.png — what you get
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.
-
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, CSSbackground-images and<use>sprite references alike. The counter runs up to what it finds:0 → 24 SVGs found.01 · detectThe panel drops in and the counter settles on 24 SVGs found. -
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 · previewPaging the previews — the filename tracks along: search-24,heart-24,star-24. -
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
xmlnsrepaired so it opens everywhere. ASaved star.svgtick confirms it.03 · downloadOne click, and Saved star.svg— the original vector, not a screenshot. -
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 · bundleEvery 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.