SVG vs PNG: when to use which

Vector vs raster

SVG (Scalable Vector Graphics) stores images as mathematical descriptions of shapes, paths, and curves. When you scale an SVG to any size, it recalculates the geometry and renders it perfectly sharp. There's no pixel grid to run out of.

PNG stores images as a fixed grid of colored pixels. At the size it was created, it looks sharp. Scale it up and you start to see interpolation artifacts. Scale it way up and it becomes visibly blurry or blocky.

This single difference explains most of the guidance below.

When SVG is the right choice

SVG is better for anything that needs to scale: logos, icons, illustrations, charts, maps, and UI graphics. A company logo as an SVG looks identical whether it's a 16px favicon or a 10-foot banner. The same logo as PNG requires separate files at each size.

SVG files for simple shapes are also small. A vector logo might be 5–15 KB as SVG. The equivalent PNG at high resolution (1200px wide) could be 150–400 KB. For web use, SVG wins on file size for simple graphics.

SVG files are also editable as text. You can open them in a text editor, inspect the paths, change colors by editing hex values, or manipulate them with CSS and JavaScript. This makes SVGs useful for interactive graphics, animated icons, and anything that needs programmatic modification.

When PNG is the right choice

PNG handles photographic content and complex imagery that can't be described as simple shapes. A photograph has millions of unique colored pixels with subtle gradients, texture, and noise. That cannot be described efficiently as vector paths.

PNG is also better for screenshots, images with photographic textures, and anything with gradients that would be complex to represent as SVG paths. If the image has more than a few hundred paths, SVG becomes impractical.

Both formats support transparency. For a photo with a transparent background, PNG is the right format. For a simple logo or icon with a transparent background, SVG is better.

Format comparison

Converting SVG to PNG

There are valid reasons to convert SVG to PNG: an email client that doesn't render SVG, a social platform that requires raster images, or a tool that can't work with SVG files.

When converting, you choose the output resolution. For web use, 2× the display size (e.g., 800px wide for a 400px image slot) covers most retina screens without being excessively large. For print, 300 DPI at the intended print size is the standard.

Converting PNG to SVG is technically called "vectorization" and is harder. Automated vectorization works well for simple illustrations and logos with limited colors. For photographs, it produces blocky approximations that rarely look good.