How to download the SVGs on a webpage

Watch it — 17 seconds

Count, check, then take

tutorial · inventory

The counter climbing from zero is the page telling you what it is actually made of — and it is rarely the number people guess.

What the recording shows

1. How many vectors does this page actually have?
2. The counter answers it — 24 found
3. Page through to see what you are getting
4. Then take the lot in one click
5. Anything that could not be resolved is named, not silently dropped

Why the number surprises people

A page renders far more vectors than it appears to

When you look at a page you see the content. The scan sees everything the browser drew, and a modern page draws vectors constantly in places you would never count.

• The logo, almost always inline <svg> these days rather than an image file.
• UI chrome — the search magnifier, the menu bars, the close crosses, every chevron in every dropdown.
• Social and payment marks in the footer, usually a dozen of them.
• Decorative shapes — section dividers, blob backgrounds, illustration fragments, drawn as CSS background vectors.
• Icons in components that are not currently visible, like a closed menu that is already in the DOM.

That is why counting before taking is worth thirty seconds: a page that looks like it has six icons often reports twenty-four, and knowing which is which before you build a ZIP saves you sorting it out afterwards.

Taking an inventory

The order matters here — the point is to know what you have before you commit to it.

1. Get the page into the state you want to capture. Scroll lazy-loading sections into view; open the menu if the icons you want live inside it. The scan reads the DOM as it stands, so anything not yet rendered is not yet there.
2. Open the popup and read the counter. The counter reports the number of distinct vectors found, after duplicates have been collapsed. That is your inventory.
3. Page through the previews. Prev and Next, with the pager showing your position in the set. This is where you find out that eight of the twenty-four are footer payment marks.
4. Take what you want. Either name and download individual vectors as you find them, or press Download all as ZIP for the lot. The status line reports what was saved and names anything it could not resolve.

Rescan after you change the page

The scan is a snapshot, not a live feed. If you open a modal, switch a tab, expand an accordion or scroll a lazy grid into view after scanning, those new vectors are not in the list yet. The rescan button in the popup header re-reads the page as it stands now. This is the single most common reason someone reports that an icon is "missing" — it genuinely was not in the DOM when the scan ran.

What the counter does not include

Vectors inside cross-origin <iframe>s are not counted, because the browser's same-origin policy means the page itself cannot read them either — an embedded map or a payment widget is a different document under different rules. Anything rendered to a <canvas> is not counted either, since by then it has become pixels and there is no vector left to extract.

The counter

Distinct vectors after de-duplication — not raw element count.

Snapshot

Reads the DOM as it stands. Rescan after you change the page.

Not counted

Cross-origin iframes and anything already rasterised to a <canvas>.

Also see

Take the whole set · The ZIP feature

Good to know

Frequently asked