Driving the popup

Step by step

From page to file

1. Open the popup. Navigate to the page holding the SVG and click the SVG Downloader button. Only then does it read the tab — it scans the current DOM on open, so let the page finish loading first.
2. Read the count. The popup reports how many SVGs it found. That number covers all four sources: inline <svg>, <img> and <object> vectors including data: URIs, CSS background-image SVGs and same-document sprite <use> references.
3. Page through the previews. Each SVG is rendered in isolation, lifted off the busy page so you can actually see it. Use Previous and Next to step through them and land on the one you want.
4. Set a filename (optional). Type a name for the current SVG and it saves under exactly that. Leave it blank and it falls back to a numbered svg-1.svg, using the prefix set in the extension's options.
5. Download the current SVG. Click Download Current SVG to save just the one on screen. The file is the original markup with a repaired xmlns, so it opens in Figma, Illustrator, VS Code and any browser.
6. Or download all as a ZIP. Click Download All as ZIP to bundle every detected SVG at once, numbered svg-1.svg upward in page order. The archive is de-duplicated, and anything that couldn't be fetched is named in the popup's status line — Downloaded 8 of 10 SVGs. Skipped: 3, 7. — rather than silently dropped.

What the popup guarantees

• The original vector, not a screenshot. Each download is the SVG that was in the page — its paths, its viewBox, its precision — so it stays sharp at any size and stays editable text.
• A repaired namespace. Inline SVG often omits xmlns because the browser supplies it. Saved to a bare file it wouldn't open; SVG Downloader adds it back automatically.
• Nothing leaves your machine. Detection, preview and download all run on-device. There's no upload, no account and no analytics call — see the privacy policy.
• Misses are surfaced, not swallowed. The status line names anything that was skipped, so the count you read is one you can act on.

What it won't catch

Three limits are worth knowing, and the popup tells you when they bite. A <use> pointing at an external sprite file — <use href="/sprite.svg#cart"> — isn't resolved, and that <svg> is skipped; only same-document references are followed, one level deep. On pages of more than 10,000 elements the CSS background-image scan is skipped for speed, so you'll see the other three sources only. And collection caps at 2,000 inline SVGs, leaving out any single SVG whose markup runs past about 2 MB.

Recolouring after you save

Many icons inherit their colour from CSS through currentColor, so a saved file can look black on its own. If you want a specific colour baked in, use the optional hand-off to the SVG Color Changer — the one outbound link in the extension, and only when you click it. Recolour there, then save the result.

Where to go next

For a specific job, the guides are more direct: download an SVG from any website, grab everything as a ZIP, or pull one out of a CSS background. Hit a snag? The FAQ covers the black icon, the file that won't open and the rest.