SVG vs PNG for Icons and Logos

An icon in a navbar is 24 pixels tall. The same icon in a mobile menu might be 32. On a Retina display both need double the pixels, and next year the marketing team wants the mark at 400px on a landing page. SVG vs PNG is really a question about that list: do you want one file that handles all of it, or a folder of exports that each work at exactly one size? For where these two sit among the other web formats, see The Complete Guide to Web Image Formats.

Pixels vs Instructions

A PNG is a grid. It stores a specific number of pixels — say 48 wide by 48 tall — each with a colour and an alpha value. Ask the browser to display that at 200px and it has to invent the missing pixels by interpolation, which is why upscaled raster art looks soft and mushy. Ask for 24px and it discards information, which is why downscaled icons often lose the crispness a designer carefully aligned to the pixel grid.

An SVG is not a grid at all. It is an XML document describing shapes:

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/>
  <path d="M12 8v5l3 2" stroke="currentColor" stroke-width="2" fill="none"/>
</svg>

That is a clock icon, and it is about 250 bytes. There is no resolution in it. The browser rasterises those instructions freshly at whatever size and device pixel ratio it needs, so it is exactly as sharp at 16px as at 1600px. One file, every context, no export matrix.

Where SVG Wins Outright

Logos and brand marks. A logo appears in the header, the footer, the favicon, the email signature, the press kit and the conference banner. Only a vector source survives that range without someone re-exporting at the wrong size and shipping something blurry.

UI icon sets. Beyond sharpness, inline SVG can be styled with CSS. Set fill="currentColor" or stroke="currentColor" and the icon inherits the text colour of its container automatically — it turns white in a dark theme, red in an error state, and dims on a disabled button, with no extra files. A PNG icon set needs a separate export for every colour variant.

Charts, diagrams and technical illustrations. These are geometry. Rendering them to pixels throws away the one thing that makes them legible: crisp lines at any zoom level. SVG also keeps text as real text, so it stays selectable and readable by screen readers.

Flat colour swatches, badges and placeholders. Anything generated from simple shapes should be generated as SVG. The SVG Color Swatch & Palette Badge Generator builds palette badges this way, and the Placeholder SVG Image Generator produces layout placeholders that stay sharp at any container size and weigh a few hundred bytes instead of the tens of kilobytes a raster placeholder service returns.

Animation and interaction. SVG elements are DOM nodes. You can transition a path, animate a stroke, or change a shape on hover. A PNG is opaque to all of it.

Where PNG Is Still Correct

SVG is not universally better; it is better at one category of content. PNG remains the right answer when:

The artwork contains photographic or textural detail. A logo with a photographic fill, a hand-painted mascot, a badge with realistic gradients and grain — these are pixels, not shapes. Auto-tracing them produces a bloated mess of thousands of paths that renders slowly and looks worse than the original.

The destination rejects SVG. Email clients are the big one: Gmail and Outlook block SVG outright, so email templates need PNG. Social sharing previews (Open Graph and Twitter card images) require raster formats and fixed dimensions. Some CMS upload validators, marketplace listings and app store assets accept only PNG or JPEG.

The file is user-uploaded. SVG is executable content — it can carry <script> elements and event handlers. Serving an unsanitised user-uploaded SVG from your own origin is a stored XSS vulnerability. PNG carries no such risk. If you accept vector uploads, sanitise them or convert to raster on receipt.

The SVG is more complex than the raster equivalent. A detailed vector illustration with hundreds of paths, filters and gradients can easily exceed the PNG of the same picture and cost more CPU to render. If an SVG is over roughly 20–30KB, compare it against a PNG or WebP export before assuming vector is lighter.

Shipping Both Properly

In practice most projects need a vector primary and a raster fallback for the places vector cannot go. That is a small, one-time export job.

Optimise the SVG first. Files exported from design tools are padded with editor metadata, unused <defs>, hidden layers and path coordinates carried to ten decimal places. Stripping that routinely halves the size before a single byte of compression.

Export raster fallbacks at the sizes you actually need, not "a big one, just in case". A 2x export of the largest display size is the ceiling. The Image Format Helper converts between PNG, JPEG, WebP and SVG in the browser, and the WebP export is worth taking for the raster fallback too — around 26% under PNG losslessly, and often less than half the size for graphics with transparency.

Generate the icon set once. Favicons are the one place where both formats plus a third are genuinely required, because browsers, operating systems and bookmark UIs each request different things:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Producing every required size by hand is tedious and easy to get wrong. The Favicon Generator takes one square source — ideally the SVG — and emits the full set plus the markup. One design note outweighs any format decision here: a favicon renders at 16 pixels. Detail that reads beautifully in the full logo vanishes completely at that size, so simplify the mark aggressively rather than shrinking it.

Inline the tiny ones. Small SVG icons needed at first paint can be embedded directly in the HTML or as a CSS data URI, removing a request. That is a narrow optimisation with real caveats around caching and size inflation, covered in What Are Data URIs? Base64 Images Explained.

Every one of these tools runs entirely client-side. Your SVG source, unreleased brand marks and client artwork are decoded and re-encoded by your own browser and never uploaded — which is not true of most online converters, where the default behaviour is to POST your file to a server you know nothing about. It also means no size caps, no queue, and no daily conversion limit.

The Rule

If it is made of shapes and you have or can obtain the vector source, ship SVG and keep a PNG export for email, social cards and anything that rejects vector. If it is made of captured pixels, or the destination will not accept XML, ship PNG — and convert it to WebP for web delivery. The mistake to avoid in both directions is the same one: never scale a raster up, and never trace a photograph down.