How to save an SVG when right-click won’t let you

Watch it — 19 seconds

Saving what the menu won’t offer

tutorial · no right-click

The recording opens on a page where not one icon offers a save option. That is not an unusual page — it is how most icon systems ship.

What the recording shows

1. Save image as… is missing on every icon here
2. The extension reads the DOM instead of the menu
3. Inline, CSS background, sprite, img — all found
4. Pick the one you actually want
5. Name it
6. Saved — a real vector, not a screenshot

The actual reason

The browser only offers to save things it can fetch

Save image as… appears when the browser has an image with an address it can request. That is a narrower category than it looks, and modern icon systems fall outside it almost entirely. There are four places an SVG hides on a page, and only one of them plays nicely.

• Inline <svg>. The markup is written straight into the HTML. No src, no URL, nothing to fetch — so the menu offers nothing. This is how the great majority of icons ship today. How it is read →
• CSS background-image. The vector is set in a stylesheet, often as an inline data: URI. The browser files it under decoration rather than content. How it is read →
• Sprite <use> references. One hidden sprite holds every icon; each place an icon appears is just a pointer into it. Saving the pointer gives you an empty file. How it is read →
• <img> and <object> sources. The friendly case — and even here the source may be a data: URI the save dialog mangles, or a cross-origin URL that saves under a meaningless name.

So three of the four cannot be saved that way even in principle. Reading the DOM works on all four, because by then every one of them has been resolved into actual markup by the browser itself.

Saving it anyway

You do not need to know which of the four you are looking at. That is the point.

1. Leave the right-click menu alone. If Save image as… is missing or greyed out, no amount of retrying will summon it. The absence is information, not a fault.
2. Open the popup. Click the toolbar button on the page. The scan resolves all four sources into standalone markup — inline, CSS background, sprite reference and image source alike.
3. Preview to identify the right one. The isolated preview is the fastest way to distinguish two similar icons, especially in a set where the page shows them at 16px.
4. Name it and save. Type a filename and press Download current. The namespace is repaired on the way out, so the file opens in Figma, Illustrator and every browser.

Things that look like fixes but are not

• Screenshotting it. This converts a resolution-independent vector into a fixed grid of pixels, permanently. It will blur the moment anyone scales it, and it cannot be recoloured. The full comparison →
• Copying markup out of DevTools. This does work, but it is fiddly, and the markup you copy is missing the xmlns namespace, so the resulting file will not open until you add it by hand. If you want the markup rather than a file, Copy code does the same job with the namespace already fixed.
• Hunting for the file in the Network tab. Fine for <img> sources. Useless for the other three, because no request was ever made — the markup arrived inside the HTML document.

Why it fails

Three of the four SVG sources have no fetchable address.

What works

Reading the rendered DOM, where all four have resolved to real markup.

Bonus

The missing xmlns is repaired, so the file actually opens.

Also see

A faster one-icon route · Inline SVG

Good to know

Frequently asked