ComparisonApril 18, 20265 min read

SVG vs PNG – when vector, when raster?

SVG and PNG often appear in the same role: logos, icons, graphics. But they work very differently. SVG is vector, PNG is raster — and that fundamental split decides sharpness, file size and flexibility.

Vector vs raster — the core difference

PNG stores pixels: a grid of coloured dots at a fixed resolution. Scale a PNG up and you eventually see pixels or fuzzy edges. SVG stores mathematical descriptions instead — lines, curves, fills.

Result: an SVG stays crisp at any size, from favicon to billboard. A PNG ideally needs a dedicated file per target resolution, or at minimum a high source resolution.

When SVG is the better pick

Logos, icons, simple illustrations, diagrams: SVGs are usually just a few kilobytes, scale freely and can be coloured or animated via CSS. Browsers and design tools support SVG reliably.

Bonus: SVGs are searchable and accessible to screen readers because they're XML text. For inline icons on a website they're often the most performant choice.

Where PNG still wins

Once you're dealing with photos, photo-realistic renders or complex illustrations with hundreds of colours and details, SVG becomes huge or simply unsuitable. PNG shines here with its compact pixel representation.

Plenty of Office tools, older editors and email attachments also handle PNG more reliably. Rule of thumb: anything geometric → SVG, anything pixel-based → PNG (or JPG/WebP).

When SVG suddenly gets expensive

SVGs are XML code — and the browser parses, renders and sometimes re-renders them on every animation tick. Complex SVGs with hundreds of paths and filter effects can chew more CPU than an equivalent PNG.

Rule of thumb: under ~5 KB file size, SVG stays cheap. At 50 KB+ check whether a 2x PNG or a WebP would actually be faster. Tools like SVGO can shrink SVGs another 30-60% before deploy.