2026-05-09 · 7 min read

How to extract every SVG from any website

Illustration of a website with SVG icons being extracted into individual files

Finding every SVG on a modern website is rarely a single click process. Icons live in the markup, backgrounds hide in CSS files, and logos often reside in the site header as favicons. If you are a designer trying to rebuild a brand kit or a developer auditing a site for performance, you need a reliable way to pull these assets without wasting hours digging through the DOM. This guide covers the manual workflow for precision extraction and the automated workflow for speed.

Why SVGs are harder to find than JPEGs

Most image formats are linked as simple files. You right click a PNG and select "Save image as". SVGs do not always work this way. Because SVGs are XML based code, they are often injected directly into the HTML to allow for CSS styling and animation. Browsers treat this code as part of the document rather than an external asset. To extract them, you have to find the code, ensure it is valid, and save it with the correct namespaces.

Furthermore, many sites use SVG sprites. This technique involves loading one large file containing dozens of icons and then "using" specific parts of that file throughout the page. If you try to save an icon from a sprite using standard methods, you often end up with an empty file or the entire icon set at once.

Method 1: Manual extraction via Browser DevTools

If you only need one or two specific icons, the built in Developer Tools in Chrome, Firefox, or Safari are your best option. This method requires a basic understanding of the DOM (Document Object Model) and how browsers render graphics.

Extracting Inline SVGs

Inline SVGs are the most common implementation for interactive icons. Since the code is in the HTML, you cannot save it like a traditional image.

1. Right click the icon on the webpage and select "Inspect". 2. In the Elements panel, look for the <svg> tag. It might be nested inside a <div> or a <button>. 3. Right click the <svg> tag and select "Copy" then "Copy outerHTML". 4. Open a text editor like VS Code or Notepad. 5. Paste the code into a new file. 6. Save the file with a .svg extension.

Important: When saving manually, you must ensure the <svg> tag contains the XML namespace attribute. If it is missing, your design software might not recognize the file. The attribute looks like this: xmlns="http://www.w3.org/2000/svg".

Extracting SVGs from the Network Tab

If the SVG is loaded as an external file (using an <img> tag), it will show up in your browser's network logs.

1. Open DevTools (F12) and click the "Network" tab. 2. Refresh the page to capture all outgoing requests. 3. Filter the results by "Img". 4. Look for files with the .svg extension. 5. Right click the filename and select "Open in new tab". 6. Once the image opens in the new tab, you can right click it and "Save image as".

Extracting CSS Background SVGs

This is where manual extraction becomes difficult. Many developers use SVGs as background images within CSS classes. These do not show up as elements in the HTML.

1. Inspect the element that has the icon. 2. In the "Styles" pane, look for the background-image or mask-image property. 3. If the value is a URL like url('icon.svg'), click the link to open it. 4. If the value is a Data URI (a long string starting with data:image/svg+xml;base64...), you must copy that string. 5. To convert a Data URI, paste it into your browser address bar and press enter, then save the resulting image.

Method 2: Automating the process with SVG Scraper

Manually digging through the DOM is fine for a single logo, but it is inefficient for entire icon sets or brand audits. Tools like SVG Scraper are designed to crawl the entire page and pull every asset into a single interface.

You can try SVG Scraper to see this in action. The tool works by parsing the live DOM, following external CSS links, and checking the site's manifest files.

The automated workflow

1. Copy the URL of the website you want to analyze. 2. Paste the URL into the search bar on SVG Scraper. 3. The tool scans for inline code, image tags, CSS backgrounds, and sprites. 4. Review the gallery of extracted icons. 5. Download individual files or export the entire collection as a ZIP.

The primary advantage of using a tool is that it handles the "normalization" of the code. It automatically adds missing namespaces, fixes viewBox issues, and decodes Base64 strings into readable SVG files. This saves you from the trial and error often associated with manual copying.

How SVG Scraper finds 5 types of SVGs

To extract every asset, a tool must look in five distinct locations. Most manual searches miss at least two of these.

1. Inline XML Markup

This is the standard <svg> tag. It is often the easiest to find but the hardest to save correctly. The code typically looks like this:

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

A scraper identifies these blocks and serializes them into standalone files.

2. Standard Image Tags

These are references like <img src="/assets/logo.svg" />. While these are visible in the Network tab, a scraper also checks if the image is being lazy loaded. Lazy loaded images often hide in data-src attributes until the user scrolls. An automated tool can find these even if they have not yet been triggered on the page.

3. CSS Backgrounds and Masks

As mentioned earlier, these live in the stylesheet. A scraper reads the CSS files linked in the <head> of the document and searches for the url() pattern. This includes SVGs that are used as bullet points in lists or as decorative borders.

4. SVG Sprites and Symbols

Sprites use the <symbol> and <use> pattern. The browser loads one hidden SVG file containing many icons, and then instances them like this:

<!-- The Sprite Definition -->
<svg style="display: none;">
  <symbol id="icon-check" viewBox="0 0 20 20">
    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/>
  </symbol>
</svg>

<!-- The Usage -->
<svg>
  <use xlink:href="#icon-check"></use>
</svg>

SVG Scraper identifies the ID in the xlink:href or href attribute, goes back to the symbol definition, and recreates a standalone file for just that icon.

5. Favicons and Web App Icons

Many modern sites use SVGs for their favicons to ensure they look sharp on high resolution displays. These are found in the <link rel="icon"> or <link rel="mask-icon"> tags in the document metadata. These are frequently missed by developers who only look at the body of the page.

Common pitfalls when extracting SVGs

Even with the right tools, you may encounter issues with the extracted files. Understanding these technical hurdles will help you fix broken icons.

Missing ViewBox

The viewBox attribute defines the coordinate system of the SVG. If you extract an SVG and it appears cropped or tiny in your design tool, it is usually because the viewBox was missing or defined incorrectly. When you copy an inline SVG, make sure the viewBox is included in the opening tag.

Relative vs. Absolute Paths

When extracting from CSS, many URLs are relative, such as ../icons/home.svg. If you try to open this link directly, it will fail unless you append it to the correct base domain of the website. Scrapers handle this path resolution automatically, but manual users must be careful to reconstruct the full URL.

External Stylesheets

Inline SVGs often rely on external CSS for their colors. If an SVG uses fill="currentColor", it inherits the color of the surrounding text. When you save this as a standalone file, it will likely default to black. You may need to manually edit the code to change currentColor to a specific hex code like #FF0000.

Shadow DOM

Some web components use the Shadow DOM to encapsulate their styles and markup. This makes the SVG invisible to standard document.querySelectorAll searches. Professional scrapers use deep crawling techniques to break through these barriers and find the hidden graphics.

CORS and Permissions

Cross-Origin Resource Sharing (CORS) can prevent you from downloading SVGs that are hosted on a different domain (like a CDN). If you get a 403 error in the Network tab, it means the server is blocking direct access to the file. In these cases, copying the code directly from the Elements panel is the only manual workaround.

Summary

Extracting SVGs from a website is a necessary skill for modern web work. If you need a single icon and have the time, the DevTools workflow is reliable and requires no third party software. You simply inspect, copy the outer HTML, and save.

However, for most professional use cases, the manual approach is too slow. Websites today are complex, utilizing sprites, data URIs, and deep CSS nesting. Using a dedicated tool allows you to see the entire visual library of a site at a glance. Whether you are performing a competitive analysis or migrating a project to a new framework, having all your assets in one ZIP file is the most efficient way to work.

Next time you need to pull an icon set, start with the browser inspector to understand how the site is built, then use an automated scraper to do the heavy lifting. This combination of technical knowledge and tooling ensures you never lose access to a high quality vector asset.