Download inline SVG from any page

An inline <svg> is drawn right into the HTML, so it has no image URL and no right-click menu. SVG Downloader reads it straight from the DOM, repairs it, and hands you the original file.

Get the extension Read the how-to →

The problem

Why the browser won't save inline SVG

Most icons on a modern site are inline SVG — the markup lives directly in the page's HTML rather than in a separate file. That's great for performance and styling, and terrible for saving. There is no src to open in a new tab, no entry in the right-click menu, and Save image as… is greyed out or missing entirely.

The usual workarounds are bad. Screenshotting the icon gives you a blurry raster locked to one size. Digging through DevTools means hunting for the right <svg> node, copying its outer HTML, pasting it into a file, and then discovering it won't open because the namespace is missing. You wanted a 400-byte file; you got a chore.

What SVG Downloader does instead

Open the popup on any page and it walks the DOM for every <svg> element, including ones nested deep inside components, shadow-adjacent markup and repeated icon sets. Each one gets an isolated preview so you can see exactly what you're about to save, off the busy page. Pick one, and it writes the original markup to a real .svg file.

The real paths, not a re-render. What saves is the SVG that was in the page — its exact d attributes, its viewBox, its own precision. It stays sharp at 16px or 1600px and stays editable text you can recolour.
A repaired xmlns. Inline SVG usually omits the xmlns="http://www.w3.org/2000/svg" namespace because the browser supplies it. Copied to a bare file, that SVG won't open. SVG Downloader adds it back so the file works in Figma, Illustrator, VS Code and every browser.
The filename is yours. Type a name into the popup before you save and the file lands as exactly that — star.svg, not download (3).svg. Leave it blank and it falls back to a numbered svg-1.svg, using whatever prefix you've set in the extension's options.

What you get back

Format: A standards-clean .svg file — the original vector markup, namespace repaired.
Fidelity: Every path and viewBox preserved. Resolution-independent and still recolourable.
Where it runs: Entirely in your browser. The inline SVG never leaves the page — there's no upload and no server.
Also handles: CSS backgrounds, sprite references and whole-page ZIP.

Good to know

Questions about inline SVG

Why can't I just right-click and save an inline SVG?

Because an inline <svg> is part of the document, not an image with its own address. The browser only offers Save image as… for things it treats as images — <img>, CSS backgrounds, canvas. Inline SVG has no URL to save, so the option never appears.

The SVG I copied from DevTools won't open. Why?

Almost always a missing namespace. Inline SVG relies on the HTML parser to know it's SVG; a standalone file needs an explicit xmlns="http://www.w3.org/2000/svg". SVG Downloader adds it automatically, so its files open everywhere without editing.

Will the downloaded icon keep its colour?

It keeps whatever colour is baked into the markup. Many inline icons inherit their colour from CSS (currentColor), so the saved file may be black. If you want a specific colour locked in first, use the hand-off to the SVG Color Changer, then save.

Grab that icon in two clicks

Free, private, and it reads inline SVG the browser pretends isn't there.

Get the extension All features →