How to download an SVG from HTML

Watch it — 17 seconds

Markup out, without the Elements panel

tutorial · html source

Both exits are shown here: the markup to the clipboard, and the same vector as a file. The difference between them is only where it ends up.

What the recording shows

1. The markup is inline in the HTML — no file to fetch
2. Find the element you want
3. Copy code lifts the markup itself
4. View-source would give you the same tag, minus the xmlns
5. Or save it as a file, namespace repaired

The manual route, and its one trap

Copy-pasting from Elements gives you a file that will not open

The hand method is straightforward: open DevTools, find the <svg> element in the Elements panel, right-click it, choose Copy → Copy outerHTML, paste into a new file, save as .svg. Then double-click it and your browser shows you an error or a blank page.

The reason is a namespace. A standalone SVG document must declare xmlns="http://www.w3.org/2000/svg" on its root element. Inline SVG almost never has that attribute, because the HTML parser puts elements into the SVG namespace automatically based on where they appear — the attribute is genuinely unnecessary inside HTML. Lift the markup out of that context and it becomes necessary, and it is not there.

So the manual fix is real but easy to forget: add the xmlns attribute to the root <svg> tag yourself, every time. There are two other things worth doing while you are in there, and they are less obvious.

• Strip anything executable. Page markup can carry <script> elements, on* event handler attributes and external references. You do not want those in a file you are about to check into a repository or open in a design tool.
• Check for currentColor. If the icon inherits its colour from CSS, the extracted file has no colour of its own and will render black. That is correct behaviour, not corruption.

The route that does all three for you

Namespace repair, sanitising and a choice of exits — without leaving the page or opening a panel.

1. Open the popup on the page. Click the toolbar button. Every inline <svg> in the document is collected, along with CSS background vectors, sprite references and image sources.
2. Find the element you want. Page with Prev and Next. The isolated preview is considerably easier to match against than a highlighted node in the Elements tree.
3. Take it as markup, or as a file. Copy code puts the sanitised markup on your clipboard, namespace included, ready to paste into a component. Download current writes the same thing to a .svg file.
4. Paste or open it. Either way the result is a valid standalone document — it opens in Figma, Illustrator, VS Code and every browser without editing.

What view-source will and will not show you

View-source shows the HTML the server sent. That is not the same document as the one on your screen. Anything a framework rendered on the client — which, on a React, Vue or Svelte site, is most of the icons — never appears in view-source at all. The DOM is the honest record of what the page is, and it is what both DevTools and this extension read.

Sprites are the other reason hand-copying disappoints

Copy the outerHTML of a sprite-based icon and you get roughly <svg><use href="#star"/></svg> — a pointer, not a shape. Saved as a file it renders nothing at all, because the symbol it points at lived in a different part of the document you did not copy. Resolving that reference back to its symbol is one of the things the scan does for you. More on sprites →

If you want a build-time pipeline instead

For extracting icons as part of a build, this is the wrong tool and a headless browser is the right one — drive the page, read the DOM, write the files. The extension is for the interactive case: you are looking at a page and you want that icon now.

The trap

Inline SVG omits xmlns, so hand-copied markup will not open.

Repaired

The namespace is added and scripts, handlers and external refs are stripped.

Sprites

<use> pointers are resolved back to the symbol — not saved as pointers.

View-source

Shows the server’s HTML, not what a framework rendered on the client.

Good to know

Frequently asked