Logo File Types Explained: SVG vs PNG vs PDF vs EPS

A logo that looks correct in a browser can fail in a slide deck or print workflow. The extension is only part of the explanation: the file may contain vectors, embedded pixels, unavailable fonts or colour settings intended for another medium. Choosing a format means matching its actual contents to the receiving application.

Separate artwork structure from file extension

The first distinction is vector versus raster. Vector artwork describes shapes mathematically; raster artwork records a fixed grid of pixels. Vectors can usually scale without revealing pixel edges, while a raster logo eventually softens or becomes visibly blocky when enlarged beyond its available detail.

That distinction is not guaranteed by an extension. SVG, PDF and EPS can contain raster images. Saving a small PNG inside a PDF does not restore the original curves. Inspect the contents before assuming a file is suitable for a large sign or high-resolution output.

For a web-ready vector, try the SVG minifier on a copy of an approved export. Compare the result visually before replacing anything. Optimisation reduces unnecessary markup; it cannot repair an inaccurate tracing or turn embedded pixels into clean geometry. The broader design resource hub offers related tools, but format decisions should begin with the recipient's requirements.

Use SVG for scalable web placement

SVG is an XML-based graphics format that browsers can render at different display sizes. It suits geometric symbols and outlined wordmarks, especially when the same mark appears in both a navigation bar and a larger presentation area. The MDN SVG guide explains its structure and browser usage.

Check the viewBox, which establishes the coordinate system and aspect ratio. A missing or poorly fitted viewBox can produce unexpected clipping or excess whitespace. Also inspect strokes, masks, gradients and clipping paths after export, because complex editor effects do not always translate exactly as expected.

A simple external-image placement might be:

<a href="/" aria-label="North Studio home">
<img
  src="/assets/north-logo.svg"
  width="180"
  height="40"
  alt="North Studio"
>
</a>

The alternative text supplies the brand name here, while the link label clarifies the destination. Choose labels according to the actual surrounding content rather than copying them blindly. Explicit dimensions help reserve the correct proportions before loading.

Convert logo lettering to paths in a distribution copy when exact appearance must not depend on installed fonts. Keep editable text in the private master. Treat untrusted SVG as active document content, not a harmless bitmap: inline SVG and uploaded SVG require appropriate sanitisation and delivery controls. An external image placement has different constraints from inserting arbitrary markup into a page.

Choose PNG when compatibility matters more than scaling

PNG is a lossless raster format with transparency support. It works well in office documents, email compositions and tools that do not handle vectors consistently. It is also useful when a logo includes approved pixel-based effects that cannot be represented reliably by the receiving software.

Export enough pixels for the intended use. A logo displayed at 240 by 80 CSS pixels might need a 480 by 160 pixel export for a two-times-density placement. That is a practical starting point, not a substitute for checking the actual display and application. The image dimension calculator helps calculate proportional outputs without distorting the artwork.

For print, connect pixel dimensions to physical size. A 1200-pixel-wide image placed four inches wide supplies 300 pixels per inch. Changing a resolution metadata field without adding meaningful image detail does not create a sharper logo. Ask the printer for the required effective resolution and prefer real vectors when possible.

Inspect transparent edges on both white and dark backgrounds. A pale fringe may come from an export against a white matte or from contaminated antialiasing. Re-export from the correct source rather than painting over the edge. Never stretch a PNG to fix an aspect-ratio mismatch; request a different layout or adjust the available space.

Understand PDF as a production container

PDF is useful for transferring artwork through print and document workflows, but it is a container, not a promise of vector quality. A PDF may include vector paths, raster images, embedded fonts, transparency and colour profiles. Inspect those properties in a suitable preflight tool before approving output.

Specify the page bounds deliberately. A logo centred on a large page may be technically correct but frustrating to place. Include clear-space guidance separately rather than assuming every recipient will understand unexplained blank margins around the artwork.

Ask the print provider which PDF standard and colour conditions they require. Some workflows request PDF/X variants; others provide their own export preset. Do not flatten transparency or convert colours automatically just because the destination is print. Both operations can change appearance when performed with unsuitable settings.

Adobe's PDF overview provides background on the format. In practice, supplier confirmation matters more than a generic export label. Request a proof when colour, fine detail or unusual materials are important, and preserve the approved export settings with the job record.

Keep EPS for confirmed legacy requirements

EPS is an older PostScript-based exchange format that still appears in signmaking, promotional merchandise and established production pipelines. Use it when the receiving supplier specifically requires it and has confirmed that their software can interpret your export correctly.

Its main limitation is legacy compatibility rather than modern flexibility. Live transparency is not supported in the same way as modern PDF workflows; effects may need flattening or simplification. Embedded previews can also look different from the underlying printable artwork. Adobe's PostScript resources explain the technology behind these workflows.

Do not generate EPS by renaming an SVG or wrapping a raster preview in a new extension. Export from the approved vector source, outline distribution lettering where appropriate and check the result in a second compatible application. If the supplier asks for a specific EPS version, follow that requirement rather than choosing the newest option available.

Use a recipient-first checklist before sending anything: destination software, intended size, colour process, background and editing needs. A website usually needs SVG; an office user may prefer PNG; a printer may request PDF; a legacy vendor may need EPS. Those are common patterns, not universal rules.

Keep one authoritative editable master and regenerate distribution files from it. Converting each new request from the last exported copy creates a chain of avoidable losses. Record which output was approved so a later replacement does not quietly reintroduce obsolete artwork.

Key takeaways

• Inspect file contents; extensions alone do not prove vector quality.
• Use SVG for scalable browser graphics and PNG for predictable raster compatibility.
• Match PDF settings to the receiving production workflow.
• Supply EPS only when a verified legacy requirement justifies it.
• Preserve editable masters and validate every distributed export.