SVG vs PNG for Logos: Which File Do You Actually Need?

There is a short answer, and it is worth having before the detail: use SVG wherever it is accepted, and keep a transparent PNG for everywhere it is not. Almost every real decision about logo files reduces to that sentence.

The reason it comes up so often is that the two formats are not different qualities of the same thing. They are different kinds of thing, and the distinction decides what happens when someone scales your logo up.

The actual difference

A PNG is a grid of pixels. Your logo is stored as, say, 512 by 512 coloured squares. Ask for it at 1024 and the software has to invent the pixels in between — which is what "blurry when enlarged" means.

An SVG is a set of instructions: draw a circle here, fill this path with #0066FF, stroke it 2px. Nothing is stored as pixels at all. The renderer draws it fresh at whatever size is asked for, so it is exactly as crisp on a business card as on the side of a van.

That single difference produces every other difference in the table below.

	SVG	PNG
Scales without quality loss	Yes	No
Supports transparency	Yes	Yes
Typical logo file size	2–20 KB	50–500 KB
Recolourable in CSS	Yes	No
Works in email signatures	Often not	Yes
Accepted by social platforms	No	Yes
Handles photographs	No	Yes
Accepted by print and signage vendors	Yes	Only at very high resolution

Where SVG wins, and it is not close

Your website. An SVG logo is typically 5–20 times smaller than the PNG equivalent and stays sharp on every display. On a retina screen a 200px-wide PNG logo has to actually be 400px to look right; the SVG just looks right.

Developer handoff. This is why they keep asking. An inline SVG can be recoloured in CSS — one line changes the logo for dark mode, hover states, or a themed page. With a PNG they have to come back to you for every variant, which is why "can you send a white version?" becomes a recurring conversation instead of a one-off.

Print and signage. Print shops and sign makers ask for vector because they may output at any size. Send a PNG and you will often get an email back asking for the real file.

App icons. Every platform wants a different pixel size. Generating them from a vector master keeps every one crisp; generating them from a 512px PNG means the large ones are guesses.

Where PNG wins, and it genuinely does

SVG is not universally better, and pretending otherwise causes real problems.

Email signatures. Many email clients will not render SVG at all. A transparent PNG is the only reliable choice.

Social platforms. Instagram, Facebook and LinkedIn profile pictures take raster uploads. There is no SVG option.

Anything photographic. If your logo contains a photo, a complex gradient mesh, or a scanned texture, SVG is the wrong container. It can technically hold an embedded bitmap, but then you have a PNG wearing a costume — all the file size, none of the scalability.

Documents and slide decks. Word and PowerPoint support for SVG has improved but remains inconsistent across versions and platforms. PNG always works.

The trap: an SVG that is not really an SVG

This one catches people out regularly, and it matters because the file looks correct until the moment it fails.

Plenty of tools advertise "PNG to SVG" or "recolour your SVG" and quietly do the same thing: draw your artwork onto a canvas, manipulate the pixels, and hand back a file with an .svg extension that contains a bitmap. It opens fine. It previews fine. Then someone scales it for a trade show banner and it is just as blurry as the PNG was, because it is the PNG.

How to check, in ten seconds: open the file in a text editor. A real SVG is readable XML full of <path>, <circle> and fill="#..." — the element vocabulary is defined in the W3C SVG 2 specification. A fake one contains a single <image> tag with a gigantic base64 blob inside it.

The same distinction applies to editing. When you change the colours in an SVG, a genuine vector edit rewrites the fill and stroke values in that markup, so what you download is still vector. Rasterising and recolouring the pixels gives you something that no longer scales — which is why that tool tells you which of the two you are about to download rather than leaving you to find out later.

Converting between them

SVG to PNG is easy and lossless in the sense that matters: you are choosing a size and rendering the vector at it. Export the sizes you need and you are done.

PNG to SVG is the hard direction, because the information genuinely is not there. Vectorising a logo traces the shapes and approximates them with paths. For a flat two-colour mark the result can be excellent. For a gradient-heavy logo or anything photographic it will be disappointing, and no tool changes that — it is a property of the problem, not the software. How to make a vector logo walks through when tracing is worth attempting and how to check the result is genuinely vector.

If you still have the original design file, export a fresh SVG from that instead of tracing. It will be better every time.

What each file should actually weigh

File size is the one place where the SVG advantage is easy to check rather than take on faith, and it is also where most people discover their files are five times bigger than they need to be.

A flat two-colour logo exported straight out of Illustrator or Figma typically lands at 8–40 KB. That is larger than it should be, because design tools export defensively: full decimal precision on every coordinate, editor metadata, empty groups, and a <style> block for fills that could have been attributes. Running it through an optimiser like SVGO usually removes 40–70% with no visible change, taking a typical logo to 2–8 KB.

Two settings account for most of the remaining weight:

• Coordinate precision. Exporters often write d="M12.000000123 2.000000456". Two decimal places is more than enough for a logo, and truncating there can halve the file on a path-heavy mark.
• Embedded rasters. If the SVG contains an <image> tag, its base64 payload is the file size. A 400 KB "SVG" is almost always this, and no optimiser will help — see the section above on files that are not really SVGs.

For PNG, the number that matters is bit depth. A logo with a handful of flat colours does not need 24-bit truecolour plus an 8-bit alpha channel. Quantising to an 8-bit palette with transparency typically takes a 1000px logo from 150–400 KB down to 20–60 KB, and for flat artwork the result is visually identical because there were never more than a few dozen distinct colours in it. Photographic or gradient-heavy logos are the exception — quantise those and you get visible banding.

The practical rule: if your website logo is over 20 KB, something is wrong, and it is worth ten minutes to find out what.

Export settings that quietly matter

Most "the logo looks wrong on their end" problems trace back to four export decisions.

Convert text to outlines — but keep an editable copy. An SVG that references a font renders in whatever the viewer has installed, which is usually not your brand typeface. Outlining the text turns letterforms into paths so it renders identically everywhere. The cost is that it is no longer editable as text, which is why the master file keeps live text and the distributed file does not.

Set a viewBox, not just width and height. A viewBox is what lets the SVG scale to its container. Without one, an SVG sized in CSS can crop or refuse to resize. If your logo behaves oddly in a responsive header, check for a missing viewBox before blaming anything else.

Expand strokes before export. A 2px stroke stays 2px regardless of how the logo is scaled unless it is set to scale with the shape. Blown up to a banner, an unexpanded stroke becomes a hairline; shrunk to a favicon, it swallows the mark. Expanding strokes to filled paths removes the ambiguity.

Strip the colour profile from PNGs. An embedded ICC profile can shift your brand colour by a few percent depending on how the viewing application handles it. For flat brand colours that is the difference between "our blue" and something almost-but-not-quite it. Export in sRGB without an embedded profile and the hex you specified is the hex people see.

What to ask your designer for

If you are commissioning a logo, ask for all of this up front. Going back later costs more than asking now:

• The source file (.ai, .fig, or .svg)
• SVG in full colour, all-white, and all-black, each on a transparent background
• Transparent PNG at 500, 1000 and 2000px wide
• A square icon-only version, because profile pictures and favicons crop to a square and a full wordmark is unreadable at 32px

If you have inherited a logo and only have a PNG, you can build most of that set yourself — make the white and black variants, remove the background, and generate every size as one bundle. Vectorising is worth attempting if the mark is flat and simple; if it is not, commissioning a redraw is the honest answer.

The short version

Ship SVG on the web and to anyone technical. Keep transparent PNGs for email, social and documents. Keep a vector master somewhere safe, because every other file you will ever need can be generated from it — and none of them can be generated from a PNG.