Need to grab a crisp vector icon, a company logo, or an illustration from a site? SVGs are just code, which makes them easy to extract once you know where to look. Below are three ways to download an SVG from any website — from the fully manual approach to the one-click option.
Method 1: Use your browser’s developer tools
This works in Chrome, Firefox, and Edge with nothing installed.
- Right-click the icon or logo you want and choose Inspect.
- In the Elements panel, look for an
<svg>tag (you may need to expand a parent element). - Right-click the
<svg>element and choose Edit as HTML (Chrome) or Copy → Outer HTML (Firefox). - Paste the markup into a text editor and save the file with a
.svgextension.
This is reliable but fiddly: the SVG may rely on styles defined elsewhere on the page, so it can look broken once it’s on its own. You also have to repeat the whole process for every icon.
Method 2: Find the SVG in the page source
Some SVGs are loaded as separate files rather than inlined.
- Open View Source or the Network tab in dev tools.
- Filter by
.svgto find linked vector files. - Open the file’s URL directly in a new tab and save it.
This only works for SVGs referenced as external files — it misses inline SVGs, which are extremely common.
Method 3: Use the SVG Export extension (the easy way)
If you’d rather skip the manual steps, SVG Export finds every SVG on the page for you:
- See every SVG at once — inline, linked, or background, all listed in one panel.
- Styles travel with the file — external CSS is inlined automatically, so your download looks exactly like it did on the page.
- Export your way — save as SVG, or convert to PNG or JPG.
- Bulk download — select everything you need and get a single tidy zip.
It’s free and available for Chrome, Firefox, and Edge. Open any website, click the extension, and download what you need — no code required.
Which method should you use?
For a one-off grab where you’re comfortable with code, dev tools work fine. If you regularly pull icons or logos, or you want clean files that look right outside the page, the extension saves a lot of time and avoids the “downloads as HTML” headaches entirely.
Frequently asked questions
- Why does my SVG download as an HTML file?
- This happens when you right-click and "Save as" on an inline SVG — the browser saves the whole page wrapper instead of the vector. To get a clean .svg file, copy the SVG element's markup from dev tools and save it with a .svg extension, or use an extension like SVG Export that extracts the vector directly.
- Can I download an SVG logo from any website?
- Usually, yes — as long as the logo is rendered as an SVG (most modern sites use SVG logos). If the logo is a PNG or JPG, there is no vector to extract. SVG Export lists every SVG on the page so you can confirm what's available before downloading.
- Is it legal to download SVGs from a website?
- Downloading an SVG for personal inspection or learning is generally fine, but logos and illustrations are often protected by copyright or trademark. Always check the site's license and usage terms before reusing an asset commercially.
- How do I download all the SVGs on a page at once?
- Manual methods only let you grab one SVG at a time. The SVG Export extension can select every SVG on a page and download them together as a single zip file.
Download SVGs the easy way
Extract every SVG on any page and export to SVG, PNG, or JPG — free, for Chrome, Firefox, and Edge.
