PNG vs SVG

A PNG is a grid. It records a colour for every position, and that grid has a fixed size decided when the file was made. Everything a PNG can ever show is already in it.

An SVG is a description: draw a circle here with this radius, stroke this path in this colour, fill this shape. Nothing is decided until it is displayed, so the same file renders at 16 pixels and at four metres with the same crispness. That is not a better kind of image — it is a different kind of thing, and it is why the two formats are good at almost nothing in common.

Enlarging a PNG can only invent the pixels in between, and every method of inventing them is a compromise between blurry and blocky. A 200-pixel logo blown up for a banner looks exactly as bad as it sounds.

An SVG has no native size to leave. The same file is the app icon, the favicon, the header logo and the print artwork, and on a high-density screen it is sharp without anybody producing a second and third copy at double and triple resolution. For a logo, that alone usually settles the format question.

Photographs. A photograph is not made of shapes, and there is no set of instructions that reproduces one — tracing software will approximate it with thousands of coloured polygons, producing a file that is larger than the PNG, slower to render and visibly wrong.

The same applies to screenshots, scans, textures and anything with genuine photographic detail. If the image came from a camera or a screen capture, it is a raster image, and converting it to SVG is a mistake rather than an upgrade. The one honest exception is deliberately tracing simple artwork — a hand-drawn logo, a black-and-white silhouette — where the result is meant to be a redrawing rather than a copy.

Open one in an editor and it is readable XML. A colour can be changed with a find-and-replace, an icon can be recoloured from CSS, individual parts can be animated or made interactive, and a version control system can show a meaningful diff between two revisions of a logo.

It also means an SVG can contain a script, which is why the format is a genuine security consideration. An SVG uploaded by a user and served from your own domain can run JavaScript in that origin. Sanitise anything that arrives from outside, or serve it in a way that cannot execute — this is not theoretical, and it is the reason many upload forms refuse the format outright.

An SVG containing text refers to a font by name, and if the machine displaying it lacks that font, something else is substituted — so a wordmark drawn in a licensed typeface arrives in Arial, at a different width, with the layout broken.

The fix is to convert text to outlines before exporting a logo. The letters become paths, they render identically everywhere, and the file no longer depends on anything. The cost is that the text is no longer editable or selectable, which for a logo is correct and for a diagram with labels may not be.

SVG for logos, icons, interface graphics, charts, diagrams, maps and illustrations — anything drawn rather than captured. It scales, it is usually smaller, it can be styled and animated, and it prints at any size.

PNG for screenshots, photographs, textures, and anything already existing as pixels. Also for social media preview images, email, and anywhere an SVG will simply be refused: mail clients, many upload forms, older software and some phone galleries.

The common arrangement is both — an SVG for the site, and a PNG export for the places that will not take one. That is not indecision; it is the same file delivered to two audiences with different tolerances.

SVG to PNG is a render: the instructions are followed once at a chosen size, and the result is pixels. Straightforward, lossless in the sense that nothing was there to lose, and the only decision is what size to render at — which is worth thinking about, because it can no longer be changed afterwards.

PNG to SVG is not really a conversion at all. Either the PNG is embedded inside an SVG wrapper, which changes nothing except the extension, or it is traced into shapes, which is an approximation and only produces a good result from simple flat artwork. For a photograph, neither is worth doing.