SVG Crawler
← Back to Blog

How to Download an SVG From Inspect Element

September 14, 2026•4 min read

Have you ever seen a beautiful icon or crisp logo on a website, right-clicked it, and realized the "Save Image As..." option is missing?

This happens because modern websites inject vector graphics directly into the HTML using <svg> tags. Because they are technically lines of code rather than discrete image files, your browser doesn't know how to "download" them natively.

In this guide, we will show you exactly how to dive into the code and download an SVG using the browser's Inspect Element tool.

The Automated Alternative

Don't want to dig through code? You can extract SVGs from any website instantly using SVG Crawler. Just paste the URL and download all vectors in a ZIP file—no DevTools required.

Try SVG Crawler

Step 1: Open Developer Tools

To access the underlying code of a webpage, you need to open your browser's Developer Tools (DevTools).

  • Windows / Linux: Press Ctrl + Shift + I or F12.
  • Mac: Press Cmd + Option + I.

Alternatively, you can simply right-click anywhere on the webpage and select "Inspect" from the context menu.

Step 2: Inspect the Target SVG

To find the specific icon or logo you want to download:

  1. Click the Element Selection Arrow in the top-left corner of the DevTools panel (or press Ctrl + Shift + C).
  2. Hover your mouse over the SVG on the actual webpage. You will see a blue box highlight the graphic.
  3. Click the graphic. The DevTools panel will jump directly to the HTML code that generates that SVG.

Step 3: Identify the Implementation Method

Depending on how the developer built the site, you will see one of two things in the Elements panel:

Scenario A: Inline SVG (HTML Code)

If you see an opening <svg> tag followed by <path> or <circle> elements, the graphic is coded directly into the page.

  1. Right-click the <svg> element in the DevTools panel.
  2. Navigate to Copy > Copy element (or "Copy outerHTML").
  3. Open a plain text editor (like Notepad, TextEdit, or VS Code).
  4. Paste the code and save the file with the .svg extension (e.g., logo.svg).

Note: If the SVG appears blank or massive when you open the saved file, you may need to manually add width="100%" height="100%" to the opening <svg> tag to restore its dimensions.

Scenario B: External SVG File (URL)

If you see an <img src="/assets/icon.svg"> tag, the SVG is hosted as an external file on the server.

  1. In the DevTools panel, locate the URL inside the src attribute.
  2. Right-click the URL and select Open in new tab.
  3. When the graphic opens in the new tab, right-click the image and select Save As....

Further Reading

If you are looking to extract brand assets, check out our dedicated SVG Logo Downloader. If you want to dive deeper into the technical aspects of vectors, read our comprehensive guide on how to download an SVG from a website.