How to Extract an SVG Logo from a Website

The short answer

You can often pull an SVG logo from a website with your browser's developer tools. Inspect the logo, find out how the page delivers it, then either copy the SVG markup directly from the page or save the SVG file the page loads. Before you treat the result as finished logo artwork, check it in a vector editor. Copied SVGs often lose styling, depend on fonts that aren't installed, or contain embedded bitmap images instead of real vector paths.

A few terms used in this guide:

• SVG (Scalable Vector Graphics): an XML-based text format that describes shapes as paths, lines and fills. It can scale without losing sharpness.
• Vector path: a shape defined by mathematical points and curves rather than by pixels.
• Raster image: a grid of pixels, such as a PNG or JPEG. It blurs or pixelates when enlarged.
• Inline SVG: SVG code written directly into the page's HTML rather than loaded as a separate file.
• viewBox: the SVG attribute that sets the drawing's coordinate area. It controls how the artwork scales and crops.

Extracting a file does not give you permission to use it. Logos are usually protected by trademark and often by copyright. Using a brand's logo in your own work generally depends on the owner's brand guidelines or written permission. If the brand offers an official press kit or media page, that is usually the better source, because those files are meant for reuse and are often supplied in several formats.

Before you start

• A desktop browser with built-in developer tools. Major browsers include them, but menu names and panel layouts vary by browser and version, so the labels below are descriptive rather than exact.
• A plain-text editor for inspecting and fixing SVG code.
• A vector editing application for checking paths, fonts and embedded images.
• A clear purpose for the logo, such as a mockup, a client presentation or print production. Print use calls for stricter checks than on-screen reference.

Step 1: Find out how the logo is delivered

Right-click the logo and choose the inspect option to open the developer tools with that element selected. The HTML around the selection tells you which extraction method to use:

• An svg element containing path, g or similar elements means the logo is inline SVG. Use Step 2.
• An img element whose source ends in .svg means the logo is an external SVG file. Use Step 3.
• A background image set in the element's CSS means the logo may be an external SVG or a data URI (an SVG encoded directly into the stylesheet). Use Step 4.
• An svg element containing only a use element that points to an ID means the logo is a sprite: the shape is defined elsewhere on the page or in another file. Use Step 5.
• An img or background pointing to a PNG, JPEG or WebP file means the logo is raster only. No SVG can be extracted. See the section on raster-only logos.
• Text styled with a special font, or a pseudo-element with an icon font, means the logo is built from font glyphs rather than an SVG file. It can't be saved as an SVG directly.

Step 2: Copy an inline SVG

• 1. In the Elements (or Inspector) panel, select the opening svg tag itself, not a child path.
• 2. Right-click it and use the copy option for the element's outer HTML. Some browsers label this "Copy element" and others "Copy outer HTML."
• 3. Paste the code into a plain-text editor.
• 4. Check the opening svg tag for the SVG namespace attribute (xmlns). Browsers render inline SVG without it, but a standalone .svg file needs it to open correctly. If it's missing, copy the standard SVG namespace declaration from any valid SVG file or from the SVG specification.
• 5. Confirm the svg tag has a viewBox attribute. Without one, the artwork may not scale predictably.
• 6. Save the file with a .svg extension and UTF-8 text encoding.

Inline SVGs are often colored by the website's stylesheet rather than by attributes inside the SVG. Elements may use class names, or fills set to currentColor, which takes its color from the surrounding text. Once you copy the SVG out of the page, those styles are gone, and the logo can turn black or disappear. To fix this, select each affected element in the developer tools, look at its computed fill and stroke values, and write those values into the SVG as fill and stroke attributes. Alternatively, add a style block inside the SVG.

Step 3: Save an external SVG file

• 1. In the inspected img element, find the file path in the src attribute (or srcset, if present).
• 2. Open that path in a new browser tab. Many browsers offer an option to open the image in a new tab when you right-click it.
• 3. Save the file from that tab with the browser's save command.
• 4. If the path is hard to find, open the Network panel, reload the page, and filter the requests by images or by the term svg. Select the logo request to preview it and open or save the response.

An SVG loaded through an img tag cannot use the page's stylesheet, so its colors are usually stored inside the file. Even so, open it and check it before assuming it is complete.

Step 4: Extract an SVG from CSS

In the Styles panel, find the background-image or mask-image property on the logo element.

• If the value points to an .svg file path, open and save it as described in Step 3.
• If the value starts with data:image/svg+xml, the SVG is embedded in the CSS. Copy everything after the comma. If the data is marked base64, decode it with a base64 decoder. Otherwise it is percent-encoded and must be URL-decoded. Then save the decoded text as a .svg file.
• If the logo uses mask-image, the SVG only defines the shape. The visible color comes from the element's background color, so you will need to add a fill yourself.

Step 5: Rebuild a sprite reference

Some sites store many icons and logos as symbol elements in a single sprite, then display each one with a use element. Copying only the visible svg tag gives you a reference with no shapes in it. To rebuild a working file:

• 1. Read the ID the use element points to.
• 2. If the reference starts with a hash sign, search the page's HTML for a symbol element with that ID. Otherwise, the ID belongs to a separate sprite file: open that file from the Network panel and search it.
• 3. Copy the symbol's contents (its paths and groups) and its viewBox.
• 4. Paste them into a new svg element with that viewBox and the namespace attribute, then save the file.

Step 6: Confirm the result is usable vector artwork

A .svg extension does not prove the file contains only vector shapes, that it is editable, or that you may reuse it. Open the file in a vector editor and check the following:

• Outline or wireframe view: every part of the logo should appear as paths. A filled rectangle with no internal structure suggests an embedded bitmap.
• Embedded images: search the SVG code for an image element. If it contains a raster image, often encoded as base64 data, that part of the logo is not vector and will not scale cleanly.
• Text elements: search for text elements. Live text renders correctly only if the named font is installed, and it may be substituted on other systems. For delivery, convert the text to outlines (paths) in your vector editor, and keep an editable copy if you have the right to use the font.
• Colors: compare the file with the logo as it appears on the site. Check for missing fills, wrong colors, or elements that disappear on a white or dark background.
• Clipping and masks: check that clip paths, masks and gradients still reference definitions that exist in the file. Missing definitions can hide parts of the artwork.
• Scale test: enlarge the logo to a large size in the editor. Vector paths should stay sharp. Pixelated edges point to raster content.
• Extra elements: remove page-specific additions such as hidden accessibility titles you don't need, animation code, or invisible hit areas, if they interfere with your intended use.

Preparing the extracted logo for delivery

Logos built for websites are optimized for screen display. They are often simplified, minified, or reduced to a single color variant. They usually use RGB colors and rarely carry print color specifications such as spot colors or CMYK values. If the logo is headed for print, treat the web SVG as a reference rather than production artwork, and ask the brand owner for official print files and color specifications. For screen use, save a cleaned copy with outlined text, explicit fills and a correct viewBox, and keep the original extracted file unchanged for comparison.

When the logo is raster only

If the site serves the logo as a PNG, JPEG or WebP, there is no vector version to extract. Saving the image gives you pixels, not paths. Your options are to request vector files from the brand owner, to check their official media resources, or to redraw or trace the logo in a vector editor. Tracing produces an approximation that needs manual cleanup and checking against the original, and the same permission considerations apply to traced artwork.

Gaps in this guide

No version-specific documentation for particular browsers or vector applications was available for this guide, so menu names and command locations are described in general terms. Check the exact labels in the current documentation for the browser and editor you use. This guide also does not cover the specific legal terms that govern any given brand's logo. Those depend on the owner's published guidelines or a direct agreement.