How to extract an SVG logo from a website

Watch it — 19 seconds

The mark, at full fidelity

tutorial · logos

The naming step matters more for logos than for anything else — a brand folder full of numbered files is a brand folder nobody uses.

What the recording shows

1. The logo in the header is one inline <svg>
2. Scan the page and it comes back with the rest
3. Page to the mark itself
4. Name it properly for your brand folder
5. Saved at full fidelity — scales to a billboard
6. Check the licence before you reuse somebody’s mark

Before the how

A logo is somebody’s trademark, and extraction is not permission

This is worth two minutes because getting it wrong is expensive. Being able to save a mark and being allowed to use it are unrelated questions, and the second one has nothing to do with this tool.

Broadly, and this is not legal advice: using a company's logo to refer to that company — a client list, a "works with" row, a press piece, a comparison table — is generally acceptable, and most companies publish brand guidelines saying so. Using it in a way that implies endorsement, partnership or authorship is not, and neither is modifying a mark and passing it off as your own.

The practical move: before you use it, look for the company's brand or press page. Most large organisations publish an official asset kit with the logo in several formats, clear-space rules, approved colourways and a short licence. That kit is both safer and usually better prepared than anything you extract — extraction is what you do when there is no kit, or when you need the mark right now for a mock-up.

Extracting the mark

Logos are usually the easiest vector on any page to find, for a structural reason.

1. Go to the home page. The header logo is nearly always inline <svg> — sites do this so the mark stays crisp on every screen and can be recoloured for dark mode.
2. Open the popup and scan. The logo is typically among the first few vectors found, because it sits near the top of the document.
3. Page to it and confirm in the preview. The isolated preview matters here: it shows you whether you have the full lockup, the wordmark alone, or just the symbol. Pages often contain all three.
4. Name it and download. Use a name you will recognise later — acme-logo-full, acme-mark. Then Download current.

Where the variants hide

A site usually carries more than one version of its own mark, and the one in the header may not be the one you want. Check the footer, which often has a monochrome or reversed variant. Check the mobile layout at a narrow window, which frequently swaps the full lockup for the symbol alone. And check any dark-mode toggle, which may swap in a light-on-dark version. Each of these is a separate vector and each will appear in the scan.

Why the logo came out black

If the mark uses currentColor so it can adapt to dark mode, the extracted file has no colour of its own and renders black. That is the true source markup. Recolour it in Figma or Illustrator, or use the hand-off to the SVG Color Changer. For a brand mark specifically, check the brand guidelines for the official colour value rather than eyedropping it off a screenshot — screens lie about colour.

If the logo is a PNG

Some sites still ship a raster logo, and no tool can turn that back into a vector — the curve data is gone. Your options are the company's own brand kit, which will usually have the vector, or tracing it, which produces an approximation with slightly wrong curves that a designer will notice. Ask for the kit.

Usually

The header logo is inline <svg>, so it is among the first found.

Variants

Check the footer, the mobile layout and dark mode — often three different files.

Legally

Extraction is not permission. Look for the company’s brand kit first.

If it is a PNG

It cannot be converted back to a vector. Ask for the official asset.

Good to know

Frequently asked