# Download SVGs from a website

> Save inline SVGs, sprite icons, SVG files and CSS background SVGs from any website, with Chrome DevTools or a free online asset extractor.

Canonical page: https://sitepeel.dev/guides/download-svg-from-website/

Paste the link into a free asset extractor, or copy each SVG yourself in DevTools: inline SVG from Elements, SVG files from Network.

Published: 2026-10-24

Tool used in this guide: [Website image downloader](https://sitepeel.dev/website-image-downloader/index.md)

## How to use it

1. **Paste the link** Paste the page’s link into the free asset extractor. Sitepeel opens the page, scrolls it and lists every SVG it finds.
2. **Filter to SVGs** Use the file type tabs or search. Turn on “Hidden only” for sprite icons and other files not shown at first.
3. **Download one or all** Open a file to check its size and where it was found, then download it, or get everything as one ZIP.
4. **Or copy it in DevTools** Right-click the icon, choose Inspect, right-click the svg element and pick Copy > Copy outerHTML.

## Where SVGs hide on a page

Where website icons come from, and how to save each by hand

| Kind | In the code | Save it by hand |
| --- | --- | --- |
| Inline SVG | <svg>…</svg> written into the HTML | Copy outerHTML in Elements and save it as a .svg file |
| Sprite icon | <svg><use href="#icon-name"></use></svg> | Copy the matching <symbol> into a new SVG file |
| SVG file | <img src="logo.svg"> or <object data="…"> | Open the file’s address in a tab and save it |
| CSS image | a background-image or mask-image URL, or a data:image/svg+xml URL | Open the URL from the Styles pane, or decode the data URL |
| Icon font | A glyph in an <i> tag or ::before, not an SVG | Get the SVG version from the icon set’s own site |

## Make a copied SVG work as a file

Inside HTML, an SVG works without a namespace. Saved as its own file, it needs one, or browsers won’t draw it.

- Add xmlns="http://www.w3.org/2000/svg" to the opening tag if it is missing.
- Replace currentColor with a real color: on its own, the icon turns black.
- Copy colors the page set through CSS classes into fill or stroke attributes.
- Keep the viewBox, or the icon won’t scale cleanly.

Example: icon.svg

```
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
  <path d="…" fill="#0a0a0c"/>
</svg>
```

## Turn a sprite icon into its own file

A sprite keeps many icons as <symbol> elements in one hidden SVG or a separate sprite file. Each visible icon is a <use> that points at one symbol by its id. Copy that symbol’s contents and viewBox into a new SVG.

Example: icon-search.svg

```
<!-- In the sprite -->
<symbol id="icon-search" viewBox="0 0 24 24">…</symbol>

<!-- As its own file -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">…</svg>
```

## Find SVG files in the Network panel

- Open DevTools, go to the Network tab and reload the page.
- Type svg in the filter box to list SVG requests.
- Scroll through the page so lazy-loaded icons load too.
- Right-click a request, choose Open in new tab, then save the file.
- For a data:image/svg+xml URL, decode the text after the comma: URL-decode it, or base64-decode it if marked ;base64.

## Questions and answers

### How do I save an SVG from a website in Chrome?

Right-click it and choose Inspect. If it is an inline <svg>, right-click the element, pick Copy > Copy outerHTML, paste it into a text file and save it as .svg. If it is an <img>, open the image in a new tab and save it.

### Why is my downloaded SVG blank or black?

Blank usually means the xmlns attribute is missing, so browsers won’t draw the file. Black usually means the icon used currentColor or the page’s CSS for its color. Set fill or stroke to a real color.

### Can I use SVGs I download from a website?

Logos and custom icons belong to the site’s owner, so ask before you reuse them. Many sites use open icon sets such as Lucide or Heroicons; get those from the set itself, under its license.

## Further reading

- [MDN: the SVG <symbol> element](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/symbol)
- [MDN: the SVG <use> element](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/use)

## Related pages

- [Extract website images](https://sitepeel.dev/guides/extract-images-from-website/index.md): Download a website’s images, SVGs and videos, choose the right size and see why some files won’t download. Online or with Sitepeel for Chrome.
- [Find larger website image sources](https://sitepeel.dev/guides/download-original-website-images/index.md): Get the larger image behind a website thumbnail: open the gallery view, check srcset and currentSrc, and know when the original isn’t public.
- [Website image downloader](https://sitepeel.dev/website-image-downloader/index.md): Find images, videos and SVG assets on a website. Filter the collection, copy URLs and download selected assets with Sitepeel.
- [Download 3D models from a website](https://sitepeel.dev/guides/download-3d-models-from-website/index.md): Find and save the GLB, glTF, USDZ and Spline files a website loads, using DevTools or a free asset extractor, and learn what you may reuse.