Logo File Formats: SVG, PNG and PDF

When you receive a new logo, ask for files matched to the places you will use it. One file rarely covers a website header, social avatar and print order equally well.

SVG for web and editable shapes

SVG describes graphic elements such as paths, lines and fills. It is a useful source for a web header or icon because a browser can render the same shapes at different display sizes. The W3C SVG specification also supports embedded images and other features, so inspect the actual file: an SVG can contain raster artwork, converted text or external references that make later editing harder.

When using an SVG on a website, open it in the target browser and check its colors, fonts, spacing and accessibility text. Keep a clean source copy. Do not paste untrusted SVG markup into a page without review.

PNG for transparent, fixed-size uses

PNG is a raster format that supports transparency. It is convenient for profile pictures, presentation software, email signatures and systems that do not accept SVG. Export the PNG at a size appropriate for the destination, then check it after any platform crop or compression. Enlarging a small PNG cannot recover detail that was never there.

The MDN image format guide notes that PNG preserves precise edges better than JPEG and supports transparency. JPEG is better suited to photographs than a logo with sharp lettering and flat colors.

PDF for vendor handoff

A PDF can be useful for print handoff, but the extension does not promise vector content. A PDF may contain paths, text, raster images or a mixture. Ask the vendor which format, color space, bleed and font handling they require, then inspect the exported PDF before ordering. Keep the editable source file separately.

A compact logo package

File	Typical use	Main question
Vector source or clean SVG	Revisions and web display	Are shapes and type editable or reliably rendered?
Transparent PNG	Social and office tools	Is the pixel size right for the destination?
Print-ready PDF	Printer or sign maker	Has the vendor checked the export?
Light and dark variants	Different backgrounds	Does each version keep enough contrast?
Square symbol version	Avatar and favicon	Is it recognizable when small or cropped?

Store the package with clear filenames such as brand-primary-dark.svg and brand-symbol-square.png. Avoid ambiguous names like final-final-2.png. Before releasing the mark, preview each file on its actual background and at its expected size. A technically correct export can still fail if the lettering is too small or the contrast is weak.