Logo file formats explained: SVG, PNG and vectors

A new logo lands in your inbox as a zip folder, and inside it sits a jumble of files. There is an SVG, a couple of PNGs, a JPG, maybe an EPS, and the printer is asking for the vector while the social media person just wants something that works in a profile picture.

Knowing which file does what saves you from sending the wrong one and ending up with a blurry mark on a banner. It is not complicated once you see the logic behind it.

The files your designer should hand over#

A good handover is not one file. It is a small kit, because a logo has to work in places that have nothing in common. A browser tab, a printed brochure, an embroidered shirt and a phone screen all make different demands.

At a minimum you should receive a vector master, a web ready SVG, and a set of PNGs at a few sizes with a transparent background. A JPG version is handy for places that will not accept anything else. If any of those are missing, ask. You paid for the design, so you should hold the full set.

Vector versus raster#

Almost every difference between these files comes down to one split. A file is either a vector or a raster, and the two store a picture in completely different ways.

A raster image is a grid of coloured dots. A photograph is the obvious example. Zoom in far enough and you see the individual pixels, which is why a small raster logo turns into a blocky mess when someone stretches it across a sign. The MDN explainer on raster images lays this out clearly.

A vector image stores instructions instead of dots. It describes the shapes, the curves and the colours as maths, so the computer redraws them crisply at any size. That is exactly what a logo needs, because a logo lives at sixteen pixels and at two metres and must look sharp at both.

SVG for the web#

On the web, the vector format you want is SVG. It is text under the hood, it stays razor sharp on any screen, and the files are usually tiny. For a simple mark, an SVG can be smaller than even a heavily compressed image.

Why it scales#

Because an SVG is a set of drawing instructions rather than a fixed grid, the browser can render it at any resolution without losing quality. The same file looks perfect on an old laptop and on a high density phone display. The MDN documentation on SVG covers how that works, and the open standard itself is maintained by the W3C SVG working group.

There is a performance bonus too. A small, sharp logo that does not need multiple versions for different screens is one less thing slowing your pages down, which fits neatly with modern advice on serving the right images for the web.

PNG, JPG and when to use each#

Not every tool accepts an SVG, which is where raster files earn their place. The trick is matching the format to the job.

PNG is the everyday workhorse for a logo. It supports a transparent background, so your mark sits cleanly on any colour without an ugly white box around it. Keep a few sizes ready, a small one for favicons and avatars and a larger one for documents and slides, and compress them so they do not bloat your pages, as Google's Learn Images course recommends.

JPG is built for photographs, not logos. It cannot do transparency and it adds faint smudges around hard edges and flat colour, which is precisely what a logo is made of. Use it only when a system flatly refuses anything else, such as some older document templates. The MDN guide to image file types is a useful reference when you are unsure which to send.

• SVG: websites and anywhere that accepts vectors.
• PNG: logos on screen that need a transparent background.
• JPG: a last resort for systems that take nothing else.

Keeping a master copy safe#

The single most important file is the vector master, usually an AI, EPS or PDF. It is the source everything else is exported from. Lose it and a future designer has to redraw your logo by eye, which is slow, costly and rarely perfect.

Store it somewhere you will still have access to in five years, not on a laptop that might be replaced or a freelancer's drive you cannot reach. A clear folder in your company cloud storage, backed up, is fine. Treat it like the original of an important contract.

It also helps to write down the rules around the logo while you are at it, the clear space, the approved colours and the smallest size it should ever appear. Those notes belong in a brand guidelines document, so the next person who touches your branding does not have to guess.

Get the file kit and the master copy right and you stop the slow drift that ruins so many brands. If you are commissioning a mark and want the full, properly organised set from the start, our logo design service hands over every format you will need with notes on when to use each.