How to Download SVG from Webpage to Local Disk

Scalable Vector Graphics (SVG) rendered inside a web browser can be saved to your local storage using built-in developer tools, direct file exports, or a quick browser-console script. This guide covers how to extract both inline <svg> code and externally loaded SVG images from any website and convert them into standard .svg files on your local drive.

Method 1: Copy Element via Developer Tools

This method works best for inline <svg> tags embedded directly within the webpage HTML.

1. Right-click the SVG image on the webpage and select Inspect (or press Ctrl + Shift + I on Windows/Linux, Cmd + Option + I on macOS).
2. The browser DevTools will open with the corresponding element highlighted. Locate the opening <svg> tag.
3. Right-click the <svg> node in the HTML tree, hover over Copy, and click Copy outerHTML (or Copy element).
4. Open a plain text editor such as Notepad, TextEdit, or VS Code.
5. Paste the copied code into a new document.
6. Save the file with the .svg extension (for example, image.svg) and set the file type to “All Files” to ensure it does not save as a .txt file.

Method 2: Save Linked SVG Assets

If the SVG is embedded via an <img> tag, <object> tag, or CSS background, you can save the source file directly.

1. Right-click the graphic and select Save Image As… if available.
2. If the option is unavailable, press F12 to open DevTools and switch to the Network tab.
3. Filter requests by selecting Img.
4. Refresh the webpage (Ctrl + R or Cmd + R).
5. Look through the list for files ending in .svg.
6. Right-click the SVG entry, select Open in new tab, and press Ctrl + S or Cmd + S to save the file to your disk.

Method 3: Trigger an Instant Download with JavaScript

You can automate the extraction and download process directly from the browser console.

1. Right-click the SVG and select Inspect.
2. Switch to the Console tab in the DevTools window.
3. Paste the following script and press Enter:

(function() {
  const svg = document.querySelector('svg');
  if (!svg) {
    console.error('No SVG found on this page.');
    return;
  }
  const serializer = new XMLSerializer();
  let source = serializer.serializeToString(svg);
  if (!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)) {
    source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
  }
  const blob = new Blob([source], { type: 'image/svg+xml;charset=utf-8' });
  const url = URL.createObjectURL(blob);
  const downloadLink = document.createElement('a');
  downloadLink.href = url;
  downloadLink.download = 'graphic.svg';
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
  URL.revokeObjectURL(url);
})();

The browser will automatically package the SVG data and trigger a file download named graphic.svg to your default download directory.