How to extract every SVG from a website

Watch it — 17 seconds

One scan, one ZIP

tutorial · bulk

The paging in the middle is not padding — it is the step most people skip and then regret, because it is your only chance to see what you are about to take.

What the recording shows

1. One scan finds every vector the page renders
2. Check the set before you take it
3. Prev and Next walk the whole list
4. Download all as ZIP — the entire set at once
5. De-duplicated, numbered, and named in the status line

What one pass actually collects

Four sources, resolved into one folder

The scan does not look for .svg files. It reads the rendered page and resolves every vector it can reach into standalone markup, which is why the count is usually higher than the number of obvious icons on screen.

• Inline <svg> elements — the bulk of any modern icon set, plus the logo and most of the UI chrome.
• CSS background-image vectors, including inline data: URIs read out of the stylesheet.
• Same-document sprite <use> references, resolved back to the symbol they point at so each one becomes a real, self-contained file.
• <img> and <object> sources, fetched and inlined.

Duplicates are collapsed before the ZIP is built. A page that renders the same chevron in nineteen places gives you one chevron, not nineteen — which is the difference between a usable folder and a mess.

Taking the set

Four steps, and the third is the one worth not skipping.

1. Open the popup on the page. Click the toolbar button. The counter reports how many distinct vectors the page renders.
2. Rescan if the page changed. If you have since opened a menu, switched a tab or scrolled a lazy-loading grid into view, press the rescan button in the header so the new icons are included.
3. Page through to check the set. Walk it with Prev and Next. Thirty seconds here tells you whether you are about to get the icon set you wanted or the icon set plus every decorative flourish on the page.
4. Press Download all as ZIP. The whole set is bundled, de-duplicated and numbered. The status line reports how many were saved — and names anything that could not be extracted standalone rather than dropping it silently.

Read the status line

When everything resolves, you get a plain Downloaded 24 SVGs as ZIP. When something does not, you get the count that succeeded and the names of the ones that did not — because a bulk tool that quietly drops files is worse than one that fails loudly. The usual reasons a vector cannot be extracted standalone are a sprite reference pointing at a different document the page never loaded, or an image source on a domain that refuses cross-origin reads.

Very large pages

Scanning every stylesheet on a page with thousands of rules is expensive, so CSS background scanning is bounded. If that bound is hit you will see This page is too large to scan CSS backgrounds — other SVGs still found, which means inline elements, sprites and image sources were all still collected. In practice CSS-background vectors are the rarest of the four, so this is a small loss on a page where the alternative is a hung tab.

Naming what comes out

Files in the ZIP are numbered from a prefix you can change in the extension's settings, along with the ZIP's own name. If you routinely pull sets from different sites, setting a prefix per project is quicker than renaming twenty files afterwards.

One pass

Inline, CSS background, sprite <use> and image sources — together.

De-duplicated

The same icon rendered nineteen times arrives once.

Honest

Anything that could not be resolved is named in the status line.

Also see

The bulk feature · Page inventory

Good to know

Frequently asked