GitBrand
  1. Home
  2. Guides
  3. Logo file formats

Guide 02

SVG, PNG or JPG: which logo file should you use?

Use SVG for anything that supports vectors. Use PNG when you need a raster image with transparency. Use JPG only when a flattened image with a solid background is acceptable. Always check what the destination tool or supplier actually accepts.

By the GitBrand teamUpdated September 23, 20267 min read

Where will the logo be used?

SVG

Use the SVG.

Browsers render vectors natively, so the logo stays sharp on every screen density and the file is usually smaller than a large PNG. It can also be recolored with CSS.

Some CMS media libraries block SVG uploads. If yours does, export a 2x PNG at the display size instead.

SVG, PNG and JPG side by side

PropertySVGPNGJPG
Scales without loss
Transparent background
CompressionNone (text)LosslessLossy
Editable shapes and colors
Accepted by every upload form
Best forWeb, design tools, the source fileSlides, documents, social profilesForms that only take JPG, solid backgrounds

Vector

SVG: the source of truth

SVG describes shapes mathematically, so a logo scales from a favicon to a billboard without losing quality. Websites, most design tools and modern presentation software accept it. Some upload forms and older tools do not.

An SVG can also contain an embedded raster image, so a file ending in .svg is not automatically a clean vector; check it in a design tool if in doubt. GitBrand sanitizes uploaded SVGs and renders PNG and JPG exports from them on demand, which is why the SVG is the only file you need to upload.

Raster, transparent

PNG: transparent raster for slides and documents

PNG stores pixels and supports transparency, which makes it the practical choice for placing a logo over a colored slide or a photo. Export at the size it will be displayed, or at 2x for high-density screens.

Enlarging a small PNG later will not restore detail. Check the edges against the actual background before sending; a white logo exported for dark slides disappears on a white preview.

Raster, flattened

JPG: only when you must

JPG has no transparency and uses lossy compression that can create artifacts around crisp logo edges. Use it when a form only accepts JPG or when the logo sits on a solid background anyway.

Export from the vector each time rather than re-saving a JPG. Every re-save compresses the compression.

Press

Print: ask the supplier before you export

Printers usually want a PDF or vector file with specific color profiles, outlined fonts and bleed. Ask for their specification and prepare the file in your design tool.

A file that looks right on screen is not evidence it is ready for press. GitBrand is for sharing assets; print preparation stays a separate step, and the CMYK values shown on a color card are an approximation to confirm with the printer.

Handoff

Name files for the person using them

Filenames like logo_final_v3.png tell the recipient nothing. Use the brand, the variant and the background: the person choosing a file should not need to open it to know what it is.

In GitBrand, the logo name and description do this job, and the export buttons remove the need to name each format separately. Visitors pick “Wordmark, dark background” and then choose SVG, PNG or JPG.

Examples

Naming that explains itself

One convention, written down once: brand, then variant, then background or use. The version number belongs in your design tool, not in the file the client downloads.

logo_final_v3.pngwhat is it?
acme-wordmark-dark-on-light.svgbrand · variant · background
acme-symbol-white-transparent.pngfor dark slides and photos
acme-lockup-horizontal-black.pdfprint supplier, outlined
acme-avatar-1024.pngsocial profile, square

Source

Adobe: PNG and SVG compared

Questions about logo files

Does renaming a PNG to .svg make it a vector?

No. The file extension does not change the content. You need the original vector artwork or a redraw in a design tool.

Why does my white logo look blank?

A white logo on a white preview background is invisible. Check it against the dark background it was made for before assuming the file is empty.

Which format does GitBrand need?

Upload the SVG. GitBrand renders it and exports PNG and JPG when a visitor asks for them.

What size should a PNG logo be?

Export at the size it will be displayed, or at 2x for high-density screens. A 400 px wide slide logo needs an 800 px PNG at most; larger files only slow things down.

Is a PDF logo the same as an SVG?

Both can hold vector artwork, and print suppliers usually prefer PDF. Keep the SVG for screens and design tools and export a PDF with outlined fonts when a printer asks for one.

Keep reading

Upload one SVG. Hand out three formats.

GitBrand renders your vector and exports PNG and JPG when someone needs them, on a link you can make public, password-protected or member-only.