How to download an SVG from a website

How to save an SVG from a web page depends on how the page holds it. If it is an ordinary image, right-click it and choose Save Image As, and an .svg file is saved. If the picture is written into the page as <svg> code, there is no file to save: copy the code with the browser’s developer tools and save it yourself. CSS backgrounds and icon sprites take one more step each. No extension or outside service is needed.

Saving a copy does not make the picture yours to use. That part is at the end, and it matters.

Find out how the page holds the SVG

Right-click the picture and choose Inspect. The developer tools open with the element under the pointer highlighted.

What is highlighted	How the page holds it	Go to
`<img src="something.svg">`	A separate file shown as an image	An SVG in an image tag
`<svg>`, or a `<path>` or `<g>` inside one	Code written into the page	An inline SVG
`<use href="...">` inside an `<svg>`	A sprite: the shapes are kept elsewhere	An SVG sprite
A `<div>`, `<span>` or `<a>` with nothing in it	Probably a CSS background	A CSS background
`<img>` ending in .png, .jpg or .webp, or a `<canvas>`	Not an SVG at all	When it is not an SVG

An SVG in an image tag

Right-click the picture and choose Save Image As. The browser saves the .svg file as the site sent it. If the menu has no such command, because the site has replaced the menu or something lies over the image, find the file in the Network tab, as described under Finding every SVG on a page.

An inline SVG

An inline SVG has no address of its own. Copy its code:

Right-click the picture and choose Inspect.
In the tree of elements, click the <svg> line itself. If a <path> is highlighted, the <svg> is a line or two above it.
Right-click that line. In Chrome and Edge choose Copy, then Copy outerHTML. In Firefox choose Copy, then Outer HTML. Safari’s Web Inspector has a similar Copy command.
Paste into a plain text editor and save with a name ending in .svg.

One thing must be added. A file on its own needs xmlns="http://www.w3.org/2000/svg" on its opening tag, and code copied from a page often lacks it, because HTML does not need it. Without it a browser shows the saved file as a tree of code, not as a picture. The xmlns attribute in SVG explains why.

The SVG viewer does this step for you. Paste the copied code into it: it adds the missing attribute, says that it did, draws the picture so you can check it, and Save as .svg writes a working file.

The console can do the same. With the <svg> line selected in the tree, switch to the Console tab and run:

copy(new XMLSerializer().serializeToString($0))

$0 means the element selected in the tree, and copy() puts text on the clipboard. Both are helpers that Chrome, Edge and Firefox provide in the console. The serialiser writes the xmlns attribute itself.

A CSS background

Inspect the element and look in the Styles panel, called Rules in Firefox, for background-image or background, or for mask-image, which is often used for icons.
If the value is url("/images/wave.svg") or similar, it is a file. In Chrome and Edge, right-click the address in the panel and open it in a new tab, then save it with Ctrl+S, or Cmd+S on a Mac. In other browsers, find the same file in the Network tab, described below.
If the value starts with url("data:image/svg+xml, the whole SVG is written inside the stylesheet as a data URI. Copy everything between the quotation marks, paste it into the address bar of a new tab and press Enter. The browser draws the picture. Save the page, or if the browser will not save it, view the page’s source and copy the code from there into a text editor.

An SVG sprite

A sprite keeps many icons in one place, each inside a <symbol> element, and the page draws one with a <use> element that points to it:

<svg class="icon"><use href="/icons.svg#search"></use></svg>

Copying this gets a pointer and no shapes. Find the symbol it names. If the href starts with #, the symbol is elsewhere in the same page: search the elements tree for id="search". If a file name comes first, open that file in a new tab and view its source.

A symbol looks like this, here inside a small sprite:

<svg style="display: none">
  <symbol id="search" viewBox="0 0 24 24">
    <circle cx="10" cy="10" r="6" fill="none" stroke="black" stroke-width="2"/>
    <path d="M14.5 14.5l6.5 6.5" stroke="black" stroke-width="2"/>
  </symbol>
</svg>

To make a file of one icon, write an <svg> tag with the namespace and the symbol’s viewBox, and put the symbol’s contents inside it. This is a complete file, and it draws a magnifying glass:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <circle cx="10" cy="10" r="6" fill="none" stroke="black" stroke-width="2"/>
  <path d="M14.5 14.5l6.5 6.5" stroke="black" stroke-width="2"/>
</svg>

SVG g, use and symbol explains how sprites are built.

Finding every SVG on a page

Open the developer tools, choose the Network tab and reload the page. Filter the list to images, or type svg in the filter box. The SVG files the page fetched are listed, backgrounds and sprite files among them, and each can be opened in a new tab and saved. Inline SVGs do not appear, because they are part of the page and not separate files.

Firefox has a second route. Press Ctrl+I, or Cmd+I on a Mac, to open Page Info, and choose the Media tab. It lists the page’s images and backgrounds with a Save As button.

When it is not an SVG

A sharp picture is not always an SVG. If Inspect shows a .png, .jpg or .webp file, saving it gives pixels, and renaming it to .svg changes nothing. A picture of flat colours can be traced into shapes with image to SVG. Icons drawn from an icon font are letters in a font file, and charts drawn on a <canvas> are pixels: neither can be saved as an SVG this way.

Common problems

What you see	Cause	Fix
The saved file opens as code or as a broken image	No `xmlns` on the opening tag	Add `xmlns="http://www.w3.org/2000/svg"`, or save it from the viewer
The picture is solid black, or the wrong colours	The page’s stylesheet set the colours, or the shapes use `currentColor`, which takes the colour of the text around it. A file on its own has neither	Add `fill` and `stroke` attributes to the shapes, or use change SVG colours, which handles `currentColor` and missing fills; a colour given as `var(--name)` has to be replaced by hand
The file draws nothing	It holds only a `<use>` pointing at a sprite	Copy the symbol’s contents, as above
It opens at an unexpected size	The copied `<svg>` has a `viewBox` but no `width` or `height`, because the page set its size with CSS	Add `width` and `height` in the proportions of the viewBox
Save Image As offers only .webp or .png	The image is not an SVG	Trace it, or look for the original

Whose picture is it?

Being able to copy a picture is not permission to use it. A drawing on someone else’s website usually belongs to them or to the artist they paid, and copyright applies to an SVG as it does to a photograph. Logos are generally protected as trade marks too.

Look for a licence before using a file anywhere but your own screen. Icon collections and free file sites publish theirs, and each says what is allowed: personal use only, commercial use, credit required. If no licence is shown, ask the owner. Saving a file to study how it was drawn is a different matter from putting it on a shirt to sell.

For files that are offered for making things, the free SVG library is a place to start.