PNG vs SVG: which format to use, and when to switch

A PNG stores what an image looks like — a grid of coloured pixels. An SVG stores how to draw it — shapes, coordinates, fills, text. Nearly every practical difference between the two formats, and nearly every mistake made when choosing between them, follows from that one sentence.

1. Pixels versus instructions

PNG is a raster format: a fixed-size grid of pixels, losslessly compressed, with proper alpha transparency. Whatever produced the image — camera, screenshot, renderer — is gone; only the pixels remain. SVG is a vector format: an XML document of drawing instructions that the viewer executes at display time. The distinction decides everything downstream — a PNG is finished, while an SVG is re-rendered fresh at whatever size and context it lands in, which is why it can also be restyled from CSS, respond to currentColor, and stay legible on any screen density.

2. Scaling and file size

Scale a PNG past its native size and the renderer must invent pixels it doesn't have — the blur is information genuinely missing. An SVG has no native size; at 16px or on a billboard it re-renders from the same instructions, identically sharp.

File size follows the same logic in opposite directions. PNG weight grows with pixel area and detail: doubling the dimensions of a rich image roughly quadruples the data. SVG weight grows with shape count and is indifferent to display size: a three-path logo is a couple of kilobytes whether rendered as an icon or a poster. The crossover is real, though — a photograph forced into vectors becomes thousands of posterised patches and outweighs its own JPEG, and an over-precise export can bloat even a simple SVG (the file-size guide covers the fix).

3. Transparency and editability

Both formats handle transparency properly — PNG with a full alpha channel, SVG by simply not painting where nothing is drawn. The difference is what you can do afterwards. A PNG edits like a photograph: recolouring the logo inside it means careful selection work. An SVG edits like a document: the fill is an attribute, so swapping brand colours is a find-and-replace — the Color Replacer does it in bulk — and the text, if authored as text, stays selectable, translatable and findable.

4. Which to use, when

PNG for anything that started as pixels — photographs, screenshots, scanned art — and for destinations that demand rasters: marketplace listings, app-store assets, email clients, office documents.

SVG for anything constructed — logos, icons, diagrams, charts, illustrations with flat colour — anywhere it will be shown at more than one size, restyled, or themed for dark mode. One caution flows the other way: a guaranteed-pixel deliverable (a 1200×630 social card, say) should ship as the raster it is judged as, which is a one-step export via the SVG to PNG converter.

5. A PNG inside an SVG is still a PNG

SVG can legally embed raster images:

<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
  <image href="photo.png" width="400" height="300" />
</svg>

This is occasionally exactly right — a raster texture inside vector artwork, a photo in a vector frame. But the embedded pixels scale like the pixels they are, and the file inherits raster weight. It is also the oldest trick of low-effort "PNG to SVG converters": wrap the bitmap in an <svg> shell, change the extension, done — the file claims to be vector and blurs like a raster. Check with the SVG Viewer: a real conversion shows paths; the wrapper trick shows one <image> element.

6. Converting between them

SVG to PNG is a rendering job — deterministic, lossless at any size you choose, one step in the SVG to PNG converter or scriptable on any platform. PNG to SVG is the hard direction: the instructions were never in the file, so a tracer must infer shapes from pixels. It works well on flat artwork and badly on photographs — the PNG to SVG converter does it in the browser, and what tracing can and cannot recover sets expectations before you judge any tool by its output.