SVG vs PNG: When to Use Each and How to Shrink SVG Files

SVG and PNG are both common on the web, but they work in completely different ways. The right choice gives you sharper pictures and smaller files.

Vector versus raster

A PNG is a grid of colored pixels, so it has a fixed size and gets blurry when enlarged. An SVG is a set of instructions, such as draw a circle here and a line there, so it stays perfectly sharp at any size and can be tiny for simple pictures.

When to use SVG

• Logos, icons, charts and illustrations made of shapes.
• Anything that must look sharp on small phones and large screens alike.
• Graphics you want to restyle with CSS or animate.

When to use PNG, JPG or WebP

Photographs and pictures with fine texture have too much detail to describe as shapes, so use JPG or WebP. Use PNG when you need pixel-exact graphics with transparency, or when a site or app doesn't accept SVG, as with many social networks, email programs and document tools.

Turning SVG into PNG

The SVG to PNG Converter draws your file at the size you choose, up to eight times larger, and saves a PNG, JPG or WebP. Keep the transparent background for PNG, or choose a color. Text in an SVG uses the fonts on your device, so convert text to outlines in your drawing program if the font matters. For other format changes, see the Image Converter.

Optimizing SVG files

Files saved from design programs often carry a lot of extra data: editor settings, comments, empty groups, and numbers with ten decimal places. The SVG Optimizer removes them, shortens colors and paths, and shows the before and after pictures side by side, often cutting the size by half. Check that the two look the same before you use the result.

A safety note

An SVG is code, and it can contain scripts. Only open or embed SVG files from sources you trust, and be careful letting visitors upload them to your own website.