Skip to content
Back to Journal
Formats & workflow

Logo File Formats Explained: SVG, PNG, PDF, EPS, AI

SM
SVG Maker AI
14 min read

There are eight logo file formats you will meet — SVG, PDF, EPS, AI, PNG, JPG, WebP and ICO — and choosing between them is simpler than the list suggests. Keep a vector master, make a PDF of it for print, export transparent PNGs wherever vector is refused, and produce the rest only on request. Below: which file goes where, what a logo package contains, what RGB and CMYK mean, and a two-minute test for a vector file with a picture inside.

The best file format for a logo, in short

So what file format should a logo be? If you keep one file, keep an SVG. It is vector, so it is redrawn sharp at any size; it is text, so any vector editor can change it; and every current browser renders it in an <img> tag (caniuse). Add a vector PDF for printers. Where vector is refused — social uploads, email signatures — use a transparent PNG made from the SVG.

  • Should a logo be PNG or SVG? Both. SVG is the master and the web file; PNG is the copy you upload where SVG is refused.
  • Is JPG or PNG better for a logo? PNG. JPG has no transparency, and its compression smears the hard edges a logo is made of.
  • Is SVG or EPS better? SVG for anything current. EPS only when a printer or sign shop's software asks for it.

Vector masters, raster exports

A vector file stores the logo as geometry — this curve, this fill, this hex value — and the viewer draws it fresh at whatever size it is shown. A raster file stores a grid of coloured pixels, fixed at export; enlarge it and the software has to invent pixels, which is where the blur on a stretched logo comes from.

So a logo has one vector master and many exports, and the direction matters. A PNG can be made from an SVG in a second, at any size. An SVG cannot be made from a PNG: it has to be traced or redrawn, and both are reinterpretations (raster to vector explains why).

Is PNG or SVG higher quality? Neither, as a property of the format. A PNG is exactly as good as the pixel size it was exported at; an SVG is as good as its drawing, at every size.

Logo file formats, one by one

The eight logo file formats side by side, then each in a few lines.

Logo file types explained: vector or raster, transparency, and what each is for
FormatTypeTransparencyUse it for
SVGVectorYesThe master, websites, cutting machines
PDFVector containerYesPrinters, sign makers, anyone who asks for vector
EPSVector containerNo — transparent parts get rasterisedOlder print and sign software, on request
AIVector, Illustrator’s ownYesEditing in Illustrator
PNGRaster, losslessYesUploads, email, slides, video
JPGRaster, lossyNoOnly where nothing else is accepted
WebPRaster, lossy or losslessYesA lighter raster on your own site
ICORaster containerYesfavicon.ico, when something insists

SVG

An open W3C format: an XML text file of shapes and colours (the what is an SVG file post has the anatomy). It is the best logo format for websites and the right master for most logos. Its limits are outside the browser: social uploaders want raster, Gmail converts SVG images to PNG on the web and shows them only for non-Google accounts in its apps (caniemail), and its colours are sRGB, so it says nothing about inks.

PDF

A PDF can hold real vector paths, embedded fonts, CMYK and spot colours, which makes it the safest single file to send a printer. It is a container, though, and can hold a photograph of your logo just as happily — run the test below before trusting one.

EPS

Encapsulated PostScript was print's exchange format for decades. Adobe's own Illustrator help now says EPS “isn't suitable for modern workflows”. Microsoft has switched EPS off in Office because the files can carry scripts used in attacks. PostScript has no transparency, so Inkscape rasterises transparent objects when it writes EPS. Is EPS outdated? Yes — supply it when asked, not by default. SVG vs EPS covers the rest.

AI

Illustrator's native file; its Create PDF Compatible File option stores a PDF copy inside, which is why other software can often open one. Is SVG the same as AI or EPS? No: all three can hold vector artwork, but SVG is an open web standard, AI is one application's working file and EPS is a PostScript-era exchange format. Hand over the AI as the source if the logo was built in Illustrator — not instead of SVG and PDF.

PNG

Lossless raster with full alpha transparency, and no CMYK mode (MDN's image format guide). It is the everyday copy for uploads, email signatures, slides and video. Its pixel size is fixed, so export one at the size each destination needs.

JPG

Lossy raster with no alpha channel. Its compression is built for photographs; on flat colour and hard edges it leaves blocky artefacts, and the background is always filled. Use one only when a form refuses PNG.

WebP

Lossy or lossless, with transparency. Fine as a lighter raster on your own pages, but a poor deliverable: Google Search's favicon formats, X's avatar uploader and LinkedIn's page images all leave it out.

ICO

A Windows icon container that bundles several sizes, up to 256 × 256. MDN notes that favicons have moved to PNG plus a link element, but Google Search still accepts ICO and some CMSes still ask for favicon.ico. Build one from your PNG favicons with any converter when something insists.

RGB, CMYK and spot colour: what the colour space means

Screens mix red, green and blue light; printers lay down cyan, magenta, yellow and black ink. The printable range is smaller in places — saturated blues, greens and oranges often come back from the press duller than they looked on screen.

The format decides what you can even write down. SVG works in sRGB (Inkscape's colour management notes say so plainly), and PNG and WebP have no CMYK mode. PDF, EPS and AI can carry CMYK and spot colours, which is the main reason print still runs on them. A spot colour — Pantone is the familiar system — is a premixed ink, used when a brand colour must match exactly from job to job.

  • Record each brand colour as HEX and RGB for screens, CMYK for print, and a spot reference if you chose one.
  • Pick the CMYK values against a printed proof, not from whatever an automatic conversion produced.
  • Ask the printer whether they convert RGB vector files themselves or want CMYK supplied.

Which file to use where

Which logo file format to use for each destination
WhereFileWhy
Website header and footerSVGSharp at every size and zoom
Browser faviconSVG plus PNGsGoogle Search’s favicon list omits SVG
Social avatarsSquare PNG of the markX and LinkedIn accept raster only
Email signaturePNGGmail rasterises or hides SVG
Word and PowerPointSVG or PNGOffice takes SVG from 2019; EPS is switched off
Cards, brochures, packagingVector PDFCarries CMYK or spot colour and outlined type
Signs and vinylVector PDF or SVG, outlinedCutters follow paths
EmbroideryVector plus one-colour versionThe digitiser rebuilds it as stitches
Cricut and craft cuttersSVGRead as a cut-ready vector — see Cricut SVG
Laser cuttingSVG, preparedCut, score and engrave separated — see laser-cut SVG
Video and slide overlaysTransparent PNGRaster at the frame size you need

Favicons and social avatars: small, square, mark only

At 16 pixels a full lockup is a smudge, so favicons, app icons and avatars use the mark on its own — the responsive icons post covers drawing for that size. Sizes here come from each platform's own pages.

  • Google Search: the favicon must be square and at least 8 × 8 px, with larger than 48 × 48 recommended, in BMP, GIF, ICO, PNG, JPEG, PPM or TIFF (favicon guidelines). No SVG, so keep a PNG favicon even when your site serves an SVG one.
  • Browsers: SVG favicons work in Chrome, Edge and Firefox, and in Safari from version 26 (caniuse). The dark mode favicon post has the markup.
  • X: profile photos at 400 × 400 recommended, JPEG, GIF or PNG under 2 MB (X Help).
  • LinkedIn Pages: logo 268 × 268 minimum, 400 × 400 recommended, PNG or JPEG up to 3 MB (LinkedIn Help). A transparent logo is shown on white, so a white mark on transparency simply disappears.

Many platforms crop avatars to a circle, so leave a margin round the mark rather than filling the square.

Print, signage, embroidery and cutting machines

Physical production is where weak files get found out, because each of these trades starts from paths, not pixels.

  • Print: a vector PDF with text outlined and the CMYK or spot values supplied. EPS if the shop's software asks for it.
  • Signs and vinyl: a cutter follows a path's geometry, not the stroke painted along it. Convert strokes to filled shapes (in Inkscape, Path → Stroke to Path) and text to outlines (see custom typography in SVG) before sending.
  • Embroidery: a digitiser rebuilds the logo as stitches in their machine's own format. Give them the vector and the one-colour version, and expect hairlines, gradients and small text to need simplifying.
  • Cricut: Design Space uploads SVG and DXF as cut-ready vectors and JPG, PNG, GIF and BMP as single-layer basic images, and rejects vectors with over 5,000 paths as too large (Cricut Help).

What goes in a logo package

Whether a designer is handing files over or you are assembling your own, this is the checklist. Drop what you will never use, but never the master.

  • Lockups: primary (mark plus name), any horizontal or stacked alternate, mark only, wordmark only.
  • Colourways of each: full colour; one-colour black; one-colour white (reversed) for dark backgrounds and photographs.
  • Vector files: SVG and PDF of every lockup and colourway, text outlined. EPS only if someone asked; the AI or other source file if that is where the logo was built.
  • Raster files: transparent PNGs of the main lockup and the mark, at the sizes you use.
  • Icons: a favicon set and an app icon, made from the mark.
  • Colour spec: HEX, RGB, CMYK and any spot reference.
  • A one-page sheet: clear space, minimum size, and the typeface name with where its licence lives.
  • Ownership: written confirmation of who owns the artwork.
logo-package/
northwind-logo/
├── vector/
│   ├── northwind-primary-colour.svg
│   ├── northwind-primary-colour.pdf
│   ├── northwind-primary-black.svg
│   ├── northwind-primary-white.svg
│   ├── northwind-mark-colour.svg
│   ├── northwind-mark-black.svg
│   ├── northwind-mark-white.svg
│   └── (a .pdf beside every .svg; .eps only if someone asked)
├── png/
│   ├── northwind-primary-colour-1024.png
│   ├── northwind-primary-white-1024.png
│   └── northwind-mark-colour-400.png
├── favicon/
│   ├── favicon.svg
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   ├── favicon-48x48.png
│   ├── apple-touch-icon.png
│   ├── android-chrome-192x192.png
│   └── android-chrome-512x512.png
└── northwind-brand-sheet.pdf    colours, clear space, minimum size

File names that state lockup, colourway and size save the email asking which file is which.

Is your logo really vector? A two-minute test

The commonest bad handover is an SVG, PDF or EPS that is really a PNG in a wrapper. It looks fine on a laptop and falls apart on a banner. Both files below are valid SVG; only the first is a vector logo.

northwind.svg — real vector
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <title>Northwind</title>
  <rect x="4" y="4" width="56" height="56" rx="14" fill="#1d4ed8"/>
  <path d="M20 44V20l24 24V20" fill="none" stroke="#ffffff"
        stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
northwind-fake.svg — a PNG in a wrapper
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <!-- A 2 x 2 pixel PNG, stretched to fill the box. -->
  <image width="64" height="64"
    href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEUlEQVR42mOQ9bvxH4QZYAwASvoJCfl981oAAAAASUVORK5CYII="/>
</svg>

The fake stretches a 2 × 2 pixel PNG. Real fakes carry bigger ones, which postpones the blur without preventing it. To check a file you have been sent:

check-logo.sh
# SVG: is there a bitmap inside? Both lines should print nothing.
grep -o '<image' northwind.svg
grep -o 'data:image/[a-z]*' northwind.svg

# SVG: is there live text that still needs its font installed?
grep -o '<text' northwind.svg

# PDF: list embedded bitmaps (pdfimages ships with poppler).
# A header row, a dashed line and nothing else is a pass.
pdfimages -list northwind.pdf

For EPS and AI, open the file in Inkscape or Illustrator and switch to outline view: shapes become thin outlines, and an embedded bitmap shows as a box with no shapes inside. One honest exception — blurs and drop shadows cannot be written as vector in PDF or EPS, so Inkscape rasterises them on export. A logo should not depend on them anyway.

If the file fails, get the source from whoever made it, trace it in Inkscape (Path → Trace Bitmap suits simple flat marks), or redraw it. Our logo to SVG tool redraws: it describes your image and generates a new SVG from that description — a starting point, not a copy, so compare the two closely.

Building the package from an SVG logo

If the logo came from our AI logo generator, here is the honest map. Generation runs in the dashboard after sign-up; a free account gets one credit, and commercial rights apply on every plan, the free one included. The server clean-up strips <image> elements from generated output, so the SVG you download is not a bitmap in a wrapper.

Exports are the .svg, a transparent PNG capped at 1024 px on the long edge, a base64 data URI and a React component — not PDF, EPS, AI or ICO. The SVG is your master; the rest of the package is made from it:

  1. Variants: paste the markup into the SVG editor's code panel, set fills and strokes to black for the one-colour version and to white for the reversed one, and download each. A white detail inside the mark must become a hole, not a white shape — the editor has no boolean operations, so cut it in Inkscape (Path → Difference).
  2. Text: search the code panel (Ctrl/⌘F) for <text. The editor has no convert-to-outlines command, so outline text in Inkscape in the next step.
  3. Print files and big PNGs: Inkscape, free, from the command line.
export-print-files.sh
# 1. Outline any text, so no file depends on a font being installed.
inkscape --export-plain-svg --export-text-to-path --export-filename=northwind-outlined.svg northwind.svg

# 2. Vector PDF and EPS, cropped to the artwork rather than the page.
inkscape --export-area-drawing --export-filename=northwind.pdf northwind-outlined.svg
inkscape --export-area-drawing --export-filename=northwind.eps northwind-outlined.svg

# 3. A PNG larger than the editor's 1024 px export.
#    Give the width only; the height follows the artwork's ratio.
inkscape --export-area-drawing --export-width=3000 --export-filename=northwind-3000.png northwind-outlined.svg

These are RGB files, because the colours in an SVG are sRGB, so send your CMYK values to the printer with them. The text-to-path step is only faithful if the font is installed on the machine running Inkscape; otherwise it outlines a substitute.

Where to go next

Start a mark with the AI logo generator, rescue a PNG-only logo with logo to SVG, make variants in the SVG editor, and build the icon set with the favicon generator. Then read SVG vs EPS for the print argument in full, custom typography in SVG for the wordmark, and designing responsive icons for the mark at 16 pixels.

Frequently asked questions

What is the best file format for a logo?
SVG is the best master file for most logos: it is vector, so it stays sharp at any size, any vector editor can change it, and every current browser displays it. Keep a vector PDF beside it for printers, and export transparent PNGs for places that refuse vector files, such as social media avatars and email signatures. Treat EPS, AI, ICO and WebP as formats to produce when someone specifically asks for them.
Should a logo be PNG or SVG?
Both, for different jobs. The SVG is the master and the best file for websites, because it is redrawn sharp at every size. The PNG is a fixed-size copy made from the SVG for places that do not accept vector files: X and LinkedIn profile images, email signatures, slides and video. A PNG on its own is not enough, because you cannot make a clean larger version from it.
Is JPG or PNG better for a logo?
PNG. It is lossless and supports transparency, so the logo sits cleanly on any background. JPG has no alpha channel, so its background is always filled, and its lossy compression, designed for photographs, leaves blocky artefacts around flat colour and hard edges. Use a JPG only when a form or platform refuses PNG.
What logo file format do printers need?
A vector PDF is the safest single file, because it holds real paths, outlined text and CMYK or spot colours. Some print and sign shops still ask for EPS or AI, so supply those when asked. Send the CMYK values or spot colour reference from your colour spec too, ask whether the printer converts RGB files themselves, and check the PDF contains vector shapes rather than an embedded image.
Is EPS an outdated format?
Largely, yes. Adobe's own Illustrator help says EPS is not suitable for modern workflows, and Microsoft has switched off EPS in current versions of Office because the files can carry malicious scripts. PostScript has no transparency, so transparent parts of a logo are rasterised when an EPS is written. Supply an EPS only when a printer, sign maker or older piece of software asks for one; otherwise send SVG and PDF.
Is SVG the same as AI or EPS?
No. All three can hold vector artwork, but SVG is an open W3C web standard written as XML text, AI is Adobe Illustrator's native working file, and EPS is an older PostScript-based exchange format for print. Browsers display SVG directly and do not display AI or EPS. A free editor such as Inkscape can turn an SVG into an EPS or PDF when a printer asks for one.
Can I convert SVG to EPS or PDF?
Yes. Inkscape, which is free, does it from the command line: inkscape --export-area-drawing --export-filename=logo.pdf logo.svg writes a vector PDF, and using a .eps filename writes an EPS instead. Add --export-text-to-path to turn any text into outlines. The output is RGB, because SVG colours are sRGB, so give the printer your CMYK values separately. SVG Maker AI itself exports SVG, PNG, a data URI and React code, not PDF or EPS.
What files should a designer hand over with a logo?
A complete logo package has each lockup (primary, mark only, wordmark) in full colour, one-colour black and one-colour white; an SVG and a PDF of each with text outlined; transparent PNGs at the sizes you use; a favicon set; the colours as HEX, RGB, CMYK and any spot reference; a short sheet covering clear space and minimum size; the source file; and written confirmation of who owns the artwork.
ShareLinkedInXReddit