November 6, 2026
To extract an SVG from a website, right-click it, choose Inspect, right-click the highlighted
<svg> element and pick Copy, then Copy outer HTML. Paste that into a text file and save it as
logo.svg. If the Inspect panel shows an <img> instead, the logo is already a file: open its address and
save it. The sections below cover the cases where that does not work.
What are the four ways an SVG can be on a page?
| How it is used | What you see in DevTools | How to extract it |
|---|---|---|
| Inline | an <svg> element in the HTML | Copy outer HTML, save as .svg |
| Image file | <img src="logo.svg"> | Open the address, save the file |
| CSS background or mask | a background-image: url(...) rule | Open the url in the rule, save the file |
| Sprite | <svg><use href="#icon-name"> | Find the matching <symbol id="icon-name">, copy it into a new svg |
How do I copy the SVG markup in DevTools?
- Right-click the logo or icon and choose Inspect. The Elements panel opens on the nearest element.
- Move up the tree until the highlighted node is the whole
<svg>. Hover it: the graphic outlines on the page. - Right-click the node, choose Copy, then Copy outer HTML.
- Paste into a new file and save it with the .svg extension. If it lacks
xmlns="http://www.w3.org/2000/svg"on the opening tag, add it so it opens outside a browser page.
How do I download every image on a page?
Open DevTools, click the Network tab, tick the Img filter and reload. Every image request is listed with its type and size. Click one to preview it, then right-click and open it in a new tab to save it.
The asset finder does the counting for you. We ran it on stripe.com on November 6, 2026. It found 67 images (41 PNG, 7 JPG, 2 WebP, 1 ICO, 1 SVG and 15 of other types) weighing 116 KB in total, and 2 WOFF2 font files weighing 70 KB. Note how little of a modern site's imagery is SVG: most of it is raster, which no “copy markup” trick can recover as vector.
What if right-click is disabled?
A page that blocks right-click only changes its own context menu. DevTools is the browser's, so
F12, Ctrl+Shift+I or the browser menu still open it. From there use the Elements panel to find the node, or
the Network tab to find the file, exactly as above. If the page also blocks DevTools by detecting it, run the asset finder from the
address instead: it loads the page in its own browser and reports what was fetched.
Can I reuse what I extract?
Extracting a file takes seconds. Whether you may use it is a separate question. A logo is a trademark, and icons and illustrations are normally under copyright. Reuse an asset when you own it or its licence allows it, or use it only as a reference to draw your own. Our legal guide covers the usual cases.
Where to go next
- Asset and SVG finder: images, fonts, video and SVGs from a URL.
- How to get a CSS gradient from a website.
- How to get the 3D model and scene from a website.
FAQ
How do I extract an SVG from a website?
Right-click the graphic, choose Inspect, find the <svg> element, right-click it and choose Copy, then Copy outer HTML. Paste it into a text file and save it with the .svg extension. If the logo is an <img> whose source ends in .svg, open that address and save the file instead.
How do I extract an SVG logo from a website?
Check first whether the logo is inline markup or an image file. Inline: copy the outer HTML of the <svg> element in DevTools. File: copy the src address of the <img>, open it and save the file. A logo drawn with a CSS background needs the stylesheet's file address instead.
How do I download all the images from a website?
Open DevTools, go to the Network tab, filter by Img and reload the page. Every image the page loads is listed with its address, type and size, and you can save each one. A free asset finder gives you the same list from a URL, with the file types counted.
How can I download an image from a site with right-click disabled?
Right-click blocking only affects the page's own menu. Open DevTools with F12 (or Ctrl+Shift+I), use the Network tab to find the image request, and open its address in a new tab. You can also copy the address from the Elements panel.
Why does my copied SVG look different or disappear?
It probably relied on a CSS rule, a gradient defined elsewhere in the page, or a <symbol> in a sprite that you did not copy. Copy the referenced <symbol> or <defs> block too, and add the colour the CSS was setting.
Is it legal to use an SVG I extracted?
Extracting it is easy; reusing it is a separate question. Logos are trademarks and icons and illustrations are usually copyrighted. Reuse something only if you own it or its licence allows it. The legal guide covers the common cases.