A logo download often contains SVG, PNG, AI and PDF files, and it isn’t obvious which one to use. It comes down to where the logo will appear.
The table below covers the common uses. After it come the differences between the formats, the catches with each one, and what to supply if you’re the one publishing the logo.
Which logo file format to use for each job
| Use | First choice | If that fails | Why |
|---|---|---|---|
| Websites and apps | SVG | Transparent PNG | Stays sharp at any size, and the file is small |
| Slides and Word documents | Transparent PNG | SVG | Older versions and some tools can’t insert SVG, or render it wrong |
| Social media profile pictures | Square PNG with a solid background | Transparent PNG | Many networks crop the image to a circle and may fill transparent areas with black or white. Most accept only raster images |
| Business cards, flyers and brochures (print files) | PDF or AI | None | Follow the printer’s spec. Vector artwork can go in as it is, though some printers can’t take SVG |
| Signs and large-format print | AI or PDF (vector) | None | At that size a raster image needs a very high resolution, so vector is the safer choice |
| Placed over a photo or a colored background | Transparent PNG or SVG | None | Without transparency you get a white box around the logo |
| A designer needs to edit it | AI | SVG | It’s the editable source. Check whether the guidelines allow changes |
What is the difference between vector and raster images?
Vector formats describe lines and shapes mathematically, so they stay sharp when enlarged. The usual ones are SVG, PDF, AI and EPS.
Raster formats store a grid of colored dots (pixels), so they blur when enlarged. PNG, JPEG, WebP, GIF and BMP fall in this group.
The master file for a logo is almost always vector. Start with the vector file, and use raster files only where vector can’t go.
The common logo formats compared
| Format | Type and enlarging | Transparent | Main use | Watch out for |
|---|---|---|---|---|
| SVG | Vector. No loss when enlarged | Yes | Web and apps | Text renders in the wrong typeface unless converted to outlines |
| PNG | Raster (lossless). Blurs when enlarged | Yes | Web, Office, social | Supply it at about twice the largest size it will be shown |
| JPEG | Raster (lossy). Blurs when enlarged | No | Photographs | A poor fit for logos: leaves a white box and ragged edges |
| WebP | Raster. Blurs when enlarged | Yes | Web (small files) | Some apps and print workflows cannot open it |
| Vector or raster. No loss if vector | Yes | Print files, sharing | Fonts must be embedded or converted to outlines | |
| AI | Vector. No loss when enlarged | Yes | Editing, print files | Needs Illustrator or compatible software |
| EPS | Vector. No loss when enlarged | Partly | Older print workflows | Cannot hold semi-transparent effects; PDF has replaced it |
There’s little reason to distribute a logo as GIF or BMP these days; PNG covers the same ground.
What to watch for with SVG
SVG is a vector format written as text. Browsers render it directly, the file is small, and it stays sharp at any size. For a logo on the web, it’s the first choice.
The text shows up in the wrong typeface
If the logo’s text is still live text that calls for a font, anyone without that font sees a substitute, and at that point it isn’t your logo anymore. Before exporting, convert the text to outlines (turn the letters into shapes).
Don’t open an SVG from an unknown source
An SVG file can contain scripts. They do not run when the file is shown through an <img> tag, but they can run when the file is opened directly in a browser. Get logos from the official source. MediaKit™ rejects an SVG that contains scripts or event handlers at upload.
How do PNG, JPEG and WebP differ?
PNG is the standard raster format for logos
PNG is lossless and supports a transparent background. When vector isn’t an option, a transparent PNG is the usual logo file. Make it about twice the largest size it will be shown at (for a slot 200px wide, a PNG 400px wide) so it stays sharp on high-density screens.
Don’t use JPEG for logos
JPEG uses lossy compression designed for photographs, and it can’t have a transparent background. On a colored background it leaves a white box, and the compression smears the edges. Each re-save loses a little more quality. Leave it out of a logo download.
WebP is light, but don’t supply it alone
WebP displays in the major browsers and can be smaller than PNG. Office, design tools and print workflows may not open it, though, so if you supply WebP, include a PNG alongside it.
How are PDF, AI and EPS used in print?
Many printers ask for artwork as PDF. It keeps vector artwork intact and opens almost anywhere. When you export, embed the fonts or convert the text to outlines.
AI
Adobe Illustrator’s format, and the editable source. Giving someone the AI file gives them something they can modify, so your guidelines should decide whether you distribute it. A file saved in a newer version may not open in an older Illustrator. An AI file saved with PDF compatibility can still be viewed in a PDF viewer.
EPS
A vector format with a long history in print. It can’t hold semi-transparent effects such as shadows and blur, and PDF has largely replaced it. Export EPS only when an older production setup still asks for it.
Which formats and how many files to supply when you publish a logo
At minimum, supply an SVG and a transparent PNG for every variant: horizontal set, vertical set and symbol-only, each for light and dark backgrounds. If the logo will be printed, add a PDF or AI.
Three layouts, two backgrounds and two formats come to 3 × 2 × 2 = 12 files. With that many, put the organization, variant and background in each file name so people can tell the files apart at a glance: acme-logo-horizontal-dark.svg.
Don’t bundle everything into one ZIP. Let people download each format separately so they take only the one they need.
How MediaKit™ handles formats
MediaKit™ accepts SVG, PNG, JPEG, WebP, GIF, BMP, PDF, PS (PostScript), AI and XD, and one logo can carry several formats. It doesn’t accept EPS, so point anyone who asks for EPS to the PDF or AI. In bulk upload, if a logo has only an SVG, or only an AI or PDF, a PNG is generated in the browser and added to it. You can turn this off, and an AI file saved without PDF compatibility may not convert. The steps are in the upload guide.
Which file to use when you receive a logo
- If it is for a website or an app, use the SVG.
- If the SVG isn’t accepted or renders wrong, use the transparent PNG.
- For print, check what the printer asks for. If nothing is specified, use the PDF.
- A white box around the logo means the file has a solid background: a JPEG, or a PNG without transparency. Switch to a transparent PNG or the SVG.
- If it looks blurry, a small raster image is being blown up. Use a larger PNG or the vector.
- If none of that works, ask whoever supplied the logo rather than redrawing it yourself.
A redrawn logo is a version the owner never published, so it counts as altering the logo. For what to check before using someone else’s logo, see Logo Usage Rules: Permission and Clear Space.
Common mistakes and fixes
Don’t
Putting a JPEG logo on a colored background, which leaves a white box.
Stretching a small PNG until the outline blurs.
Cropping the logo out of a website screenshot.
Do
Using a transparent PNG or an SVG, in the variant made for that background.
Using a PNG at twice the display size, or the vector.
Getting the file from the official source, in the format it specifies.
- SVG for web and apps, transparent PNG for everything else
- Text in the SVG is converted to outlines
- A PDF or AI is included if the logo will be printed
- No JPEG in the logo download
- File names carry the organization, the variant and the background
- Each format can be downloaded separately
Where to host the files and who should see them is covered in What a Media Kit Is and How to Publish One. For clear space around the logo and its minimum size, see How to Set Logo Clear Space and Minimum Size.
Frequently asked questions
Should I use SVG or PNG for a logo?
Use SVG on websites and in apps, and a transparent PNG in slides or Word documents where SVG can’t be inserted or renders badly. Make the PNG about twice the largest size it will be shown at so it stays sharp on high-resolution screens.
Why is JPEG a poor format for logos?
JPEG has no transparency, so a logo on a colored background gets a white box around it, and compression smears its edges a little more each time it is re-saved. Use a transparent PNG or SVG instead.
What format should I send a printer?
Whatever the printer specifies; if nothing is specified, PDF. Embed or outline the fonts when exporting, and only produce EPS when an older production setup asks for it.
What if I can’t open a logo’s AI file?
An AI file saved by a newer Illustrator may not open in an older one. If it was saved with PDF compatibility, a PDF viewer can at least display it; otherwise ask the owner for a PDF or SVG.
