How to download an SVG from a URL

Watch it — 22 seconds

From address bar to saved file

tutorial · from a url

Notice what the address bar says in the recording. There is no .svg in it, and there does not need to be: the scan reads what the page rendered, not what the URL promises.

What the recording shows

1. Open the URL that holds the vector
2. Click the toolbar button — it reads the live page
3. The address bar has no .svg in it. It does not need one.
4. Page to the vector you came for
5. Name the file before you save it
6. Download current — the real markup, from that URL
7. Saved as star.svg. Sharp at any size.

The distinction that matters

Two completely different things get called "an SVG URL"

Before anything else, work out which of these you actually have — the right method is different for each, and this is where most people get stuck.

• A direct URL to a vector file, ending in .svg, often on a CDN. Open it in a tab and you see the graphic on a blank white background with nothing else. This one your browser can save on its own — Ctrl/Cmd+S works fine, though it may save under an unhelpful name.
• A URL to a page that draws vectors. Almost every real URL is this one. The address ends in /icons or /pricing or nothing at all, and the graphics you want are inline markup inside the HTML the page returns. There is no file at any address to fetch, so there is nothing to save directly.

Paste-a-URL converter sites only ever handle the first case, which is why they so often come back with an error or with the page's HTML renamed to .svg. They fetch the address; they do not render it.

Saving from a page URL

This is the second case — the common one. The trick is to stop treating the URL as a file and let the page render first.

1. Open the URL in a tab. Let the page finish loading. This matters more than it sounds: icons injected by JavaScript after load are still found, because the scan reads the DOM as it stands when you click, not the HTML the server first sent.
2. Click the toolbar button. The popup opens against the tab you are on. There is nothing to paste and nothing to configure.
3. Read the counter. It reports how many vectors that URL actually renders. That number is usually higher than people expect, because it includes the logo, the UI chrome and the icons in the footer.
4. Page to the one you came for. Use Prev and Next. The preview shows each one isolated, which is the fastest way to tell two similar icons apart.
5. Name it and download. Type a filename and press Download current. You get the original markup from that URL, with the xmlns namespace repaired so the file opens anywhere.

If your URL really does end in .svg

Then you have the easy case, and you have options. Opening it and pressing Ctrl/Cmd+S will save it. So will the extension, which additionally lets you name the file properly and repair the namespace if the source is malformed — worth it for anything you are about to check into a repository.

One caveat on direct URLs: a lot of CDN links serve the file with a Content-Type of text/plain, in which case your browser shows you the markup as text rather than rendering it. The file is fine; the header is wrong. Saving it still gives you a working SVG.

URLs the extension cannot reach

It runs on pages you can open, so anything you cannot open, it cannot read either. In practice that means chrome:// and other browser-internal pages, the Chrome Web Store and add-on galleries (browsers block extensions there on purpose), local file:// pages unless you grant file access, and anything behind a login you do not have. If you are logged in, though, it works normally — which is one thing no online tool can do with a URL you paste.

Input

Any page URL you can open — no .svg extension required.

Handles

JavaScript-rendered icons, logged-in pages, and inline markup with no address behind it.

Output

The original vector, namespace repaired, named however you like.

Also see

From a link · Why online extractors miss this

Good to know

Frequently asked