PNG vs SVG: Raster and Vector, Explained Without Jargon

Scale a 400 pixel PNG logo up to a 3 metre banner and every edge becomes a staircase. Scale the same logo as an SVG and it stays crisp because there were never any pixels to enlarge — just coordinates and curves interpreted anew at whatever size you asked for. That is the fundamental difference, and it is decided at authoring time, not at export.

Both formats are well supported in every browser, both can be transparent, and both are reasonable choices for web graphics. They are not interchangeable.

Pixels versus shapes

PNG is a raster format. The image is a rectangular grid of pixels, each holding a colour and an alpha value. The file stores that grid, compressed with DEFLATE preceded by PNG's own row filters. When you display it at 200% you are asking the renderer to interpolate values that do not exist, and it does its best with bilinear or bicubic guessing.

SVG is a vector format. The file holds geometry — paths defined by Bézier curves, rectangles, circles — plus instructions about how to paint them. At render time the renderer converts each path to device pixels at the current scale. A circle stays a circle at 16 pixels or 16000.

That has a second consequence people often miss: an SVG's complexity is measured in path count and node count, not pixel count. A simple logo might have 40 nodes and render instantly at any size. A traced photograph might have 200,000 nodes and render slowly at every size.

What PNG is genuinely good at

PNG excels at images that are inherently pixel-based: photographs, screenshots, scans, textures, gradients with subtle noise, anything with millions of distinct colours. Its lossless compression preserves those exactly, and its alpha channel is a full 8-bit channel, which is why designers reach for PNG when they need a clean transparent cutout.

PNG also handles anti-aliased soft edges naturally. A vector format representing a soft blur must approximate it with a filter or a gradient; a raster records it directly.

File size is not the simple story

The intuitive claim is that SVG files are always smaller. For flat vector art this is true and can be dramatic: a 512×512 PNG of a two-colour logo might be 60 KB, while the same logo as an optimised SVG might be 3 KB. Browsers render the SVG natively and the network transfer is a rounding error.

For complex artwork the claim collapses. Auto-trace a photograph into SVG and you get hundreds of thousands of tiny paths. The resulting file can easily exceed the JPEG it came from by an order of magnitude, and rendering becomes expensive because the browser has to rasterise every path on every repaint. A 4000×3000 photo saved as a 2 MB JPEG can become a 15 MB SVG that stutters on scroll.

There is a practical threshold. If the artwork has fewer than a few thousand distinct colour regions with clean edges — logos, icons, lettering, line art, flat illustrations — SVG wins on size and quality. If it has continuous tone, noise, or thousands of colours, raster wins on both.

Where each one breaks

PNG breaks when it is scaled up, embedded in a responsive layout that grows it, printed above its native resolution, or sent to a cutting machine that needs outlines. A 96 DPI PNG placed at 300 mm wide in a print layout will be visibly soft, and no amount of sharpening fixes missing detail.

SVG breaks when it contains a raster image inside it, carries an unresolvable font, references an external file, or is auto-traced from a source that never had clean edges. It also breaks in older email clients and some office applications, and in cutting software that expects fills rather than strokes.

Choosing based on destination

If the destination is a browser viewport of unknown size, SVG is the right default for anything that is not a photograph. It responds to CSS, it can be recoloured at runtime with currentColor, and it stays sharp on a 5K display without a second asset.

If the destination is a cutting machine, vinyl plotter, or laser, SVG is required. Those machines cut paths, and a PNG has to be traced first. PNG to SVG conversion is the standard route, and the quality of the result depends entirely on the source — a high-contrast, clean-edged PNG traces well; a blurry JPEG-style PNG does not.

If the destination is a photo gallery, a texture, a screenshot, or social media, PNG or JPEG is appropriate. SVG simply is not the tool for continuous-tone imagery.

If the destination needs a raster of a vector — a PNG for an email, a fallback, an app icon, or a social preview — then SVG to PNG renders at a chosen pixel size, and picking that size correctly is the whole game. Rendering at 4× the display size and letting CSS scale down is a common defensive choice.

Transparency behaviour differs

Both support transparency, but reliability differs. A PNG's alpha channel is unambiguous and universally supported. An SVG's transparency can depend on which renderer is reading it, and some email clients and document writers flatten or ignore it. If you need a transparent image in an environment you do not control, PNG is safer.

Conversely, SVG transparency composites at render time, so a soft drop shadow stays sharp at any scale, which is not true of a PNG's baked-in shadow.

Decoding cost and rendering budget

There is a rendering difference that rarely shows up in benchmarks but matters on long pages. A PNG decodes once into a bitmap and then composites cheaply on every scroll frame. An SVG is re-interpreted and rasterised whenever it repaints at a new scale or size, which costs real CPU for complex artwork.

For a single icon this is nothing. For a page with thirty complex traced illustrations, it becomes visible as scroll jank on lower-powered devices. The usual mitigation is to keep SVGs simple, cache the rasterisation where possible, and avoid animating SVG properties that force re-layout.

Print and physical output

Neither format is ideal for print on its own, but they fail differently. A PNG carries a DPI tag, and print software divides pixel dimensions by that number to derive a physical size. A 3000-pixel image tagged at 72 DPI becomes 41 inches wide, which is probably not what you wanted. Retagging to 300 DPI makes it 10 inches, and the pixel data is unchanged.

An SVG carries its physical size directly when width and height are in millimetres or inches, so there is no DPI to argue with. That is a genuine advantage for vector artwork bound for print, subject to the CMYK and bleed caveats in SVG versus PDF.

For a cutter or plotter, the difference is not close: an SVG is a set of paths the machine can follow, and a PNG is a picture of those paths that has to be traced first. If the destination is a vinyl cutter or laser, see the format map for the routes out of each format.

Metadata, text and accessibility

An SVG can carry a title and a description element, which screen readers and search engines can use. It can also carry live text that remains searchable and selectable. A PNG has no such structure — any text inside it is pixels, invisible to assistive technology unless you add alt text in the surrounding markup.

That makes SVG the better format for anything containing words that matter: a logo with a tagline, a chart with axis labels, a diagram with annotations. It also makes it preferable for anything that must be indexed. A PNG of a chart is a picture of information; an SVG of a chart is the information.

The conversion question

Converting PNG to SVG is not a format swap; it is a tracing operation. The tracer looks at pixels, finds boundaries between colour regions, and fits curves to them. The result is a genuine vector, but it is an interpretation of the raster, not a recovery of whatever vector authored the original.

Three factors decide quality: source resolution, source contrast, and colour count. A clean 2000 px PNG of a two-colour logo traces near-perfectly. A 300 px JPEG of the same logo, full of compression artefacts, traces into ragged blobs. If you are starting from a poor source, upscaling before vectorising can help, and there is more detail in how image tracing actually works.

Converting SVG to PNG is a simpler operation: rasterise at a target size. The main decisions are pixel dimensions, background colour, and whether to render at 1×, 2×, or higher for retina displays.

A note on SVG for photography

It is technically possible to embed a JPEG inside an SVG and call the result an SVG. That is a wrapper, not a vectorisation, and the resulting file inherits every raster limitation. Useful for keeping an asset pipeline consistent; useless for scaling a photo to billboard size.

For format context across the whole landscape, see the file format map and the format reference.