SVG vs PNG: vector and raster images explained

Raster: a grid of pixels

PNG, JPG, WebP, AVIF, GIF and HEIC are raster formats. The file records a colour for every pixel in a fixed grid, say 1200 by 800. Show it larger than that and the software has to stretch the pixels it has, which is why enlarged raster images look soft or blocky.

Raster is the natural way to store photographs, because a photo is made of countless small changes in colour and light that don't break down into neat shapes.

Vector: instructions for drawing

A vector image stores shapes instead of pixels: lines, curves, fills and text placed by coordinates. web.dev describes vector graphics as a set of instructions for how an image should be drawn. When the image is shown at a new size, the instructions are redrawn at that size, so edges stay sharp.

SVG (Scalable Vector Graphics) is the vector format of the web: an XML-based language developed by the W3C, so an SVG file is readable text. The Library of Congress notes that SVG 1.0 became a W3C Recommendation in September 2001.

When SVG beats PNG

MDN calls SVG ideal for diagrams, icons and other images which can be accurately drawn at any size, and web.dev says interface icons are almost always well served by SVG. The same goes for logos, charts and line art built from sharp lines and solid colours.

• One file serves every size, from a tab icon to a poster.
• Simple shapes take far less space as instructions than as pixels.
• Colours and text stay editable.

When PNG or JPG is better

MDN notes that SVG is not generally useful for photographic images: a photo has no clean shapes to describe. Very detailed vector artwork also has a cost; web.dev warns it becomes a verbose set of instructions, a large file and more work for the browser to draw.

A raster copy is also the practical file when an image is used at one fixed size, or when a service asks for PNG or JPG. For choosing between those formats, see the guide on which image format to use.

Converting: one way is easy, the other isn't

SVG to PNG or JPG is straightforward: the instructions are drawn onto a pixel grid and that grid is saved. The result has the usual raster limits, so make it at least as big as you will show it.

The other direction isn't a real conversion. A photo contains only pixels. Saving it as SVG either wraps those pixels unchanged inside an SVG file, which gains nothing, or relies on tracing, where software guesses outlines and fills them with flat colour. Tracing can suit a simple logo, but it makes a new drawing, not a vector version of the photo. For a vector logo, go back to the original design file.

A security note on SVG

SVG is a document format and, as web.dev notes, can include JavaScript. The Library of Congress lists security concerns related to SVG images. MDN explains that when SVG is shown as an image, browsers may disable JavaScript and block external resources, but those limits don't apply when the file is opened directly as a page. Treat SVG files from unknown sources like any other document.