How to download SVG files from a website

Watch it — 19 seconds

The whole thing, once through

tutorial · basics

Everything after this point is the same five steps written out, plus the reasons behind them. If you just wanted the recording, you already have what you came for.

What the recording shows

1. An SVG is vector text, not a picture of one
2. Step one — open the popup on the page
3. Step two — let it scan. It reads the page, not the network.
4. Step three — preview and pick
5. Step four — name the file
6. Step five — download. That is the whole job.

First, the thing nobody explains

An SVG is not a picture — it is instructions for drawing one

A PNG is a grid of coloured dots. An SVG is a short text document that says draw a line from here to here, then curve to there. That difference is the entire reason this is worth doing: because the file describes shapes rather than pixels, it stays perfectly sharp whether you use it as a 16px favicon or print it two metres wide, and you can open it in a text editor and change its colour by editing one word.

It is also the reason your browser is unhelpful about saving them. The browser only offers Save image as… for things it classifies as images with a fetchable address. Most SVGs on a modern page have no address at all — the drawing instructions are written directly into the page's HTML. There is nothing for the save menu to point at, so the menu item simply doesn't appear.

Reading the page's DOM sidesteps that entirely. The extension asks the page what it actually rendered, gets the real markup back, and writes it to a file.

The five steps

The first run takes about two minutes because you have to install something. Every run after that is about five seconds.

1. Install the extension. Add SVG Downloader to Chrome, Edge or Brave — anything on Chrome 88 or later. It is free and MIT-licensed, and it asks only for activeTab, which means it can see a page when you click its button and at no other time.
2. Open the popup on the page. Go to the page holding the vector you want, then click the toolbar button. If you cannot see it, click the puzzle-piece icon and pin it — you will want it there.
3. Let it scan. It walks the page and collects every vector it can resolve: inline elements, CSS background images, same-document sprite references, and <img> or <object> sources including data: URIs. The counter tells you how many it found.
4. Preview and pick. Each one gets an isolated preview, off the busy page, so you can confirm you have the right thing. Prev and Next walk the list, and the pager shows where you are.
5. Name it and download. Type a filename if you care what it is called — leave it blank and you get a numbered svg-1.svg. Then hit Download current. The file lands in your downloads folder like any other.

Two surprises, both normal

Almost everyone hits one of these on their first file, and neither is a fault.

• The icon is black. Most icon systems colour their icons from CSS using currentColor, which means the colour lives in the stylesheet, not in the shape. Pulled out on its own, the file has no colour of its own and renders black. That is the true source markup. To fix a colour into the file, use the hand-off to the SVG Color Changer, recolour, and save.
• It opens now, when copy-paste never worked before. Inline SVG usually omits the xmlns="http://www.w3.org/2000/svg" namespace, because the HTML parser supplies it for free. Copy that markup into a bare .svg file by hand and nothing will open it. SVG Downloader repairs the missing namespace on the way out, which is why its files open in Figma, Illustrator, Inkscape, VS Code and every browser.

Opening the file once you have it

Double-clicking an SVG usually opens it in your browser, which renders it but won't let you edit it. To actually work with it: drag it into Figma and it arrives as editable vector layers; open it in Illustrator or Inkscape for full drawing tools; or open it in any text editor to see — and change — the markup directly. If you need a PNG instead, the popup will convert it for you before it saves.

Works on

Chrome 88+, Edge and Brave. Any page you can open in them.

You get

The original vector markup, namespace repaired — not a screenshot.

Privacy

100% on-device. No server, no account, no upload, no analytics.

Next

Need the whole set? Extract every SVG. Just want the code? Copy it.

Good to know

Frequently asked