Download an SVG from a CSS background

When an SVG is painted through background-image, it isn't an element you can point at. There's nothing to drag and nothing to right-click. SVG Downloader reads the computed style, resolves the source, and saves the original file.

Get the extension Read the how-to →

The problem

Why a CSS background SVG can't be saved

A background image isn't content — it's decoration attached to some other element's box. When a designer writes background-image: url("chevron.svg") or bakes the vector inline as a data: URI, the browser paints it but never treats it as a saveable image. Hover over it and the cursor sits on a <div>, not on the icon. Right-click and you get the menu for the element behind it. Save image as… never appears, because as far as the browser is concerned there is no image there to save.

Reaching it by hand is worse than it sounds. You open DevTools, find the element, read its computed background-image, and then you're staring at either a relative URL you have to resolve against the page, or a URL-encoded data:image/svg+xml string with every angle bracket escaped. Decoding that into a clean file is a copy-paste job you'll get wrong at least once.

What SVG Downloader does instead

Open the popup and it inspects the computed styles of the page's elements, not just the ones you can see. Wherever a background-image resolves to an SVG — a linked .svg file or an inline data URI — it pulls the source out and gives it an isolated preview alongside every other SVG it found. Page through with Previous/Next, pick the one you want, and it writes the original vector to a .svg file.

URLs resolved for you. A relative url(../img/logo.svg) is turned into a real address and fetched; the file that lands is the file the stylesheet pointed at, not a guess.
Data URIs decoded properly. An inline data:image/svg+xml background — URL-encoded or Base64 — is unpacked back into plain SVG markup, so what you save opens as text you can read and edit.
The namespace repaired. If the extracted SVG is missing its xmlns="http://www.w3.org/2000/svg" declaration, SVG Downloader adds it, so the file opens in Figma, Illustrator and every browser without a fix-up.

What you get back

Format: A standards-clean .svg file — the exact vector the CSS referenced, decoded and namespace-repaired.
Sources read: Both url() links and inline data: URIs, whether URL-encoded or Base64. Skipped on pages over 10,000 elements.
Where it runs: Entirely in your browser. Computed styles are read locally — no upload, no server, no account.
Also handles: Inline SVG, sprite references and whole-page ZIP.

Good to know

Questions about CSS background SVG

Why is Save image as… missing on a CSS background?

Because a background image isn't a document element. The browser only offers Save image as… for real image nodes — <img>, <object>, canvas. A CSS background is painted onto another element's box, so your right-click lands on that element instead, and there's no image entry to choose.

Can it handle a data: URI background, not just a linked file?

Yes. Inline data:image/svg+xml backgrounds are common, and they're usually URL-encoded with every bracket escaped — hard to decode by hand. SVG Downloader unpacks both URL-encoded and Base64 data URIs back into clean SVG markup before saving.

Does it check every element, however big the page?

Reading computed styles means touching elements one by one, which gets expensive fast. So there's a ceiling: if a page holds more than 10,000 elements, the background scan is skipped entirely and you'll see only the other three sources. The popup says so rather than quietly returning a short list. Below that threshold every element is checked, visible or not.

The background uses a sprite or shows only part of a larger SVG. What downloads?

What downloads is the source the stylesheet references — the whole SVG file, even if CSS crops it with background-position and background-size to show one region. If the icons live in a proper <use> sprite instead, the sprite extractor is the tool that splits them apart.

Save the background the page won't hand over

Free, private, and it reads the SVG hiding in your stylesheet.

Get the extension All features →