SnapCutout

Start typing to search the guides.

Image Formatting & Compression

SVG vs PNG for logos: which one to send and when

A logo that goes fuzzy when enlarged is a raster file. There is a version that never does.

Published21 September 20264 min read

A flat-lay of hand-drawn logo sketches and design layouts on a desk

Your logo looks perfect on your website and terrible on the banner the printer produced. Or a supplier asks for a vector file and you have no idea whether the thing sitting in your downloads folder counts.

The difference is not quality settings or resolution. It is two completely different ways of storing a picture, and for a logo only one of them is the real original.

What you need to know first

Before the step-by-step, these are the points that decide the outcome. If you are in a hurry, the first one covers most cases.

  1. SVG stores shapes, not pixels

    A circle is recorded as a centre, a radius and a colour. The browser draws it fresh at whatever size is needed, so it is perfect on a favicon and on a billboard.

  2. PNG stores a fixed grid

    Every pixel is written down. Display it larger than it was made and the software has to invent the pixels in between, which is exactly what fuzzy means.

  3. A simple SVG is tiny

    A flat logo often lands under 3 KB as SVG against 40 KB or more as PNG, and it stays that size no matter how big you display it.

  4. You still need both

    Marketplaces, email signatures and older office software often accept PNG only. Export a small set once and stop scrambling every time someone asks.

Two completely different things

SVG PNG
Stores Shapes, coordinates, colours A fixed grid of pixels
Enlarging Perfect at any size Fuzzy beyond its native size
Typical logo size 2–8 KB 30–80 KB
Transparency Native Full alpha
Editable later Yes, every shape Only as pixels
Photographs No Yes
Universal support Web yes, Office 2019 and later yes Everywhere
Can be styled by CSS Yes No

The row that matters most is the second. A PNG has one true size, and every other size is either throwing pixels away or inventing them. An SVG has no size at all until something draws it, which is why the same file serves a 16-pixel favicon and a three-metre exhibition panel.

When to use which

Step 1: Use SVG on your own website

Put the SVG in your header, your favicon and anywhere else you control the markup. It is smaller, it stays sharp on high-density phone screens without you exporting a 2x version, and its colours can be changed with CSS for dark mode.

Step 2: Send SVG, EPS or PDF to any printer

Vector is what print professionals mean by “the logo”. A printer given a vector file can output it at any size with clean edges. A printer given a 600-pixel PNG for a roll-up banner will either refuse it or produce something soft, and the second outcome is worse.

Step 3: Use PNG wherever you do not control the software

Marketplace seller profiles, email signatures, older CMS uploaders and some social platforms often reject SVG or render it unreliably. Word and PowerPoint in Microsoft 365 and Office 2019 or later can insert SVG, but Microsoft says Office 2016 and earlier cannot. This is a compatibility decision, not a quality one.

JPG cannot store transparency and it smears flat colour edges. A logo saved as JPG arrives with a white box and a halo of compression artefacts around every letter. There is no situation where it is the right choice for a mark.

Outline your text before you send an SVG to anyone. An SVG with live text renders in whatever font the recipient has installed, which is usually not yours, and the first you hear about it is when the printed banner shows your brand name in Arial. Convert text to outlines on export, and keep an editable master separately.

The file set every brand should have

Export these once, keep them in one folder, and you will never scramble again.

  1. Master SVG, full colour, text outlined. This is the file you send to printers and sign makers. It is the one that matters.
  2. PNG at 1000 px wide, transparent. The general-purpose file for anything that will not take SVG. Big enough for almost every request.
  3. PNG at 250 px wide, transparent. Email signatures, small profile slots, documents. Sending the 1000 px version for these just makes the file heavier.
  4. Square icon PNG at 512 px. Marketplace avatars, app listings and social profiles all want a square, and cropping a wide logo into one at the last minute looks like it was cropped at the last minute.
  5. A white or single-colour version of each. For dark backgrounds and for anything printed in one ink. Being asked for this and not having it is the most common logo delay there is.

What to do if you have no vector file

Situation Best move Result
A designer made it Ask them for the SVG or AI file The true original, free
Made in Canva Download as SVG (Pro) or rebuild it Usable vector
Made in a free logo generator Check the account for a vector download Often available after purchase
Only a large PNG exists Auto-trace it, then clean it up Approximate but workable if flat
Only a small JPG exists Redraw it from scratch The only honest option

Auto-tracing works best on flat, high-contrast marks and worst on anything with gradients, photographs or fine lettering. Always compare the trace against the original at 100% before you accept it. Traced logos often gain slightly rounded corners and lose small details that nobody notices until the sign is up.

What to ask for

SVG is the original; PNG is a snapshot of it at one size. Keep the SVG safe, export a small set of PNGs for the places that need them, and never let a JPG near a logo.

If your PNG exports are arriving with a white box instead of transparency, the transparency guide explains where that happens. For the broader question of which raster format to use where, see WebP vs PNG vs JPG.

Frequently asked questions

How can I tell whether my logo file is a vector?

Check the extension. SVG, AI, EPS and PDF can hold vector artwork; PNG, JPG, GIF and WebP never do. A quick test for SVG: open it in a browser and zoom to 500%. If the edges stay razor sharp it is vector. If they break into squares, it is a raster image that somebody saved with a vector extension.

Can I convert a PNG to a real SVG?

Only partly. Automatic tracing tools produce shapes that approximate the pixels, which works acceptably for a flat two-colour mark and badly for anything with gradients, fine text or soft edges. The result is a new drawing, not the original. If the logo matters, get the source file from whoever designed it.

Is SVG safe to use on a website?

Yes, with one caveat. SVG is code, so an SVG can technically contain a script. Files you exported yourself or received from a designer are fine. Files uploaded by strangers to a site you run should be sanitised before being served, which is a developer concern, not something that affects your own logo.

Why does my SVG logo show the wrong font?

The text is still text, and the viewer does not have your font. Before exporting, convert text to outlines or paths. In Illustrator, Type → Create Outlines; in Figma, Flatten. The letters become shapes and look identical everywhere. Keep an editable copy first, because outlined text can no longer be retyped.

Keep reading