Export an SVG from a Website
How to find and save an SVG logo from a website, check whether it is true vector artwork, fix missing styles, fonts and sprite references, and understand usage permissions.
Contents
- The short answer
- Vector paths, embedded rasters and previews
- What you need before starting
- Step-by-step: finding and saving the SVG
- 1. Identify how the logo is delivered
- 2a. Inline SVG: copy the markup
- 2b. Separate SVG file: save the file itself
- 3. Repair dependencies the page was supplying
- 4. Final inspection
- When no usable SVG exists
- Permissions: downloading is not the same as using
- Evidence gaps
The short answer
You can often save an SVG from a website, but only if the site actually delivers the graphic as SVG. Logos usually arrive in one of two ways. Some are written directly into the page's code as inline SVG markup. Others are separate SVG files that the page loads as an image, a CSS background or an embedded object. In both cases the browser's developer tools let you find the markup or the file and save it. If the site serves the logo as a PNG, JPEG, WebP, a canvas drawing or an icon font, there is no SVG to export. Saving that image will not give you vector artwork.
Two further checks matter before you rely on the result. First, the saved file needs to contain real vector paths, not just a raster image wrapped in SVG code. Second, being able to download a logo does not mean you are allowed to modify or reuse it.
Vector paths, embedded rasters and previews
An SVG file is a text document that can hold several kinds of content, so the extension alone tells you little. True vector artwork is made of path, shape and text elements that stay sharp at any size and can be edited node by node. An SVG can also contain an image element carrying an embedded bitmap, often stored as base64-encoded data. That part of the file is a raster picture and will blur or pixelate when enlarged, whatever the file is called. Some sites also show small raster previews or placeholders that are later replaced by the real logo. Confirm which of these you have captured before treating the file as editable vector artwork.
What you need before starting
- A desktop browser with built-in developer tools (the inspector, the network panel and the console)
- A plain-text or code editor for viewing and saving SVG markup
- A vector editor or a browser tab for the final inspection, ideally one with an outline or wireframe view
- Clarity on how you intend to use the logo, so you can check permissions before editing or publishing it
Step-by-step: finding and saving the SVG
1. Identify how the logo is delivered
Right-click the logo and choose the browser's inspect option. In the element panel, look at what is highlighted:
An svg element with child paths means the logo is inline SVG.
An img element whose source ends in .svg means it is a separate file.
An element with a background image in its styles means it is a CSS background.
A canvas element, or an img pointing to a PNG, JPEG or WebP file, means it is raster or drawn by script, and there is no SVG to extract from that element.
2a. Inline SVG: copy the markup
In the element panel, right-click the svg element and use the option to copy its outer HTML. Paste the markup into a text editor and save it with an .svg extension. Many browser consoles also provide a copy utility, which lets you select the element and copy its markup in one command:
copy(document.querySelector('header svg').outerHTML)The selector in this example is an assumption. Adjust it to match the actual element on the page. Once the file is saved, open it in a text editor and check the opening svg tag. A standalone file needs the standard SVG namespace attribute (xmlns) to open reliably outside the browser. Inline markup sometimes omits it because the web page supplies the context. If it is missing, add the standard SVG namespace declaration to the root element. Also confirm there is a viewBox attribute, which defines the drawing area and keeps the logo scaling correctly.
2b. Separate SVG file: save the file itself
If the logo is an img element or a CSS background pointing to an SVG file, open that file in its own browser tab from the inspector and save it. Alternatively, open the network panel, reload the page, filter by image or SVG type, and save the matching response. This captures the file exactly as the server delivers it. Don't use the image right-click option on a rendered page unless you have confirmed it saves the original SVG and not a raster rendering.
3. Repair dependencies the page was supplying
Inline SVG frequently relies on the surrounding page. Once extracted, it may render as a black shape, appear blank or lose parts of the design. Check for these common dependencies:
- Colors set by page stylesheets: paths may carry class names whose fill and stroke values live in the site's CSS. Read the computed styles in the inspector and write the colors onto the elements or into a style block inside the SVG.
- currentColor: fills set to currentColor inherit the text color of the surrounding page. Outside the page they fall back to a default, usually black. Replace them with the intended color values.
- Sprite references: a use element pointing to an ID means the actual shapes live in a symbol element elsewhere in the page or in a separate sprite file. Copy the referenced symbol's contents into your file, or the exported SVG will be empty.
- Text elements: if the logo contains live text, it depends on a font that may not be installed on your system or licensed to you. Without that font the wordmark will display in a substitute typeface.
- Gradients, masks and clip paths: these are often defined in a defs section referenced by ID. Make sure those definitions were included in what you copied.
4. Final inspection
Before using the file, confirm it is the result you need:
- Open the saved file on its own in a browser tab and in a vector editor, and compare it with the logo on the site.
- Search the markup for image elements or base64 data. If you find any, that part of the logo is embedded raster, not vector.
- Switch the vector editor to outline or wireframe view. Genuine vector artwork shows path outlines. An embedded raster shows as a single rectangle.
- Zoom in heavily and check that edges stay crisp.
- Confirm that colors, gradients and any wordmark text render as intended without the original web page.
- Check that the viewBox crops the artwork correctly, with no clipped edges or unexpected empty space.
When no usable SVG exists
Sometimes the site delivers only raster images, or the SVG simply wraps a bitmap. In that case, browser tools cannot produce editable vector artwork. You have two options. The first is to request official vector files from the logo owner, often through a brand, press or media kit. The second is to redraw or trace the logo yourself, if you have permission to do so. Automatic tracing approximates shapes and seldom matches the original artwork exactly.
Permissions: downloading is not the same as using
The browser can download a file, but that grants no rights over it. Logos are typically protected as trademarks, and the artwork and any fonts may carry separate copyright or license terms. Permission to download a logo, for example from a press page, is distinct from permission to modify its artwork, extract or convert its fonts, or use the mark in your own materials. Check the owner's brand guidelines or usage terms for the specific use you have in mind. When in doubt, ask the owner directly.
Evidence gaps
This guide relies on general, verifiable behavior of SVG files and browser developer tools. It is not based on tests of any specific website, browser version or editor. Menu labels and console utilities vary between browsers and versions. Some sites also deliberately obfuscate or load assets through scripts, which can make these steps harder or ineffective. No legal guidance specific to any logo or jurisdiction is provided here.