SVG vs PNG

The short answer

Use SVG for logos, icons, line art and anything built from flat areas of colour. Use PNG for photographs, screenshots, and any image with fine gradients or texture.

If your artwork could be drawn with a pen — distinct outlines, solid fills, a countable number of colours — SVG will be smaller, sharper and easier to edit. If it was captured with a camera or a screen recorder, PNG is the honest choice and SVG will only make it bigger and worse.

Side by side

File size: it depends entirely on the artwork

There is no general answer to “which is smaller”, and any article that gives you one is guessing. A PNG's size scales with its pixel dimensions and how noisy the image is. An SVG's size scales with how many shapes it contains and how complex their outlines are.

A two-colour logo is a handful of paths — a few kilobytes as SVG, and it stays a few kilobytes whether it is displayed at 32 pixels or 3,000. The same logo as a PNG needs a separate, larger file for every size you intend to display, which is why icon sets used to ship at 1×, 2× and 3×.

Reverse the artwork and the result reverses. A photograph traced into vector paths can become thousands of overlapping shapes and produce an SVG many times larger than the JPEG or PNG it came from, while looking worse. This is the single most common mistake people make with vector tracing.

Scaling and screens

A PNG has fixed pixel dimensions. Display it larger than those dimensions and the browser invents the missing pixels, which reads as blur or stair-stepped edges. This is why a logo that looks crisp in a page header can look soft on a high-density phone display: the screen has more physical pixels than the file has data.

An SVG has no resolution. It is redrawn by the browser at whatever size it is given, so the same file is sharp in a favicon, a nav bar, and a full-bleed hero. Retina displays need no special handling, and neither does a print layout.

Transparency works in both, differently

PNG carries an alpha channel: every pixel has an opacity value alongside its colour, which is what makes soft shadows and anti-aliased edges composite cleanly onto any background.

SVG has no background at all. Anything you do not draw is simply nothing. That makes transparency automatic rather than a feature, but it also means soft, gradual fades have to be built explicitly with gradients or opacity rather than baked into pixels.

Editing and control

This is the difference people underestimate. In a PNG, a logo is one flat layer of pixels; recolouring it means repainting it. In an SVG, every shape is a separate element with its own fill, so you can restyle it in a text editor, change a brand colour across a whole site with one CSS rule, or animate a single part of it.

• Recolour with CSS, including hover and dark-mode variants
• Animate individual paths without exporting a video or GIF
• Edit in Figma, Illustrator or Inkscape with every shape intact
• Diff it in version control, because it is text

The security difference worth knowing

An SVG is XML, and XML can carry script elements, event handler attributes and references to external files. A PNG cannot: it is pixel data and metadata, with nothing executable in it. This is a real and often-overlooked difference, and it is why many platforms refuse SVG uploads outright.

It is a solvable problem, not a reason to avoid the format. A sanitiser strips scripts, event handlers and off-site references before the file reaches anyone. Every SVG this site produces goes through that step automatically.

Converting between them

PNG to SVG is not a format change, it is a reconstruction. A tracer examines the areas of colour in the image and rebuilds their boundaries as paths, which works beautifully on flat graphics and produces a stylised approximation of a photograph. Expect to pick a preset and a colour count rather than a single correct answer.

SVG to PNG is the easy direction: the shapes are rendered onto a pixel grid at whatever size you ask for. Nothing is lost that was not going to be lost anyway, though the result is a fixed-size image again.

Frequently asked questions