SVG vs PNG: which to use for logos, icons and illustrations

Designers send logos as SVG, websites ask for PNG, and some programs accept only one of them. Both are image formats, but they describe pictures in completely different ways, and that decides which one is right for a job. We measured five SVGs of very different complexity against PNG copies made with our own converter.

Shapes versus pixels

An SVG file is text: a list of shapes such as "a circle here, 3 units across, filled green". The browser or program draws those shapes fresh at whatever size is needed, so the edges are always as sharp as the screen allows. A PNG is a grid of pixels, saved without loss. It looks perfect at its own size and has to be stretched, and blurred, to be shown larger.

That makes SVG the natural format for anything made of shapes: logos, icons, diagrams, charts, maps. Photos are made of millions of slightly different pixels, with no shapes to describe, so they belong in a pixel format such as JPEG, WebP or AVIF, as we tested in JPG, PNG, WebP or AVIF.

The test files

• Icon: a camera from the open source Lucide set, two shapes.
• Logo: the Tooloat logo, three shapes.
• Flag: the flag of Brazil, 17 shapes including lettering.
• Seal: the Great Seal of the United States, a detailed illustration with 776 shapes.
• World map: a blank map of the world with every country as its own shape, 2,316 in all.

The flag, the seal and the map are public domain files from Wikimedia Commons. Each SVG went through our SVG minifier with its default settings and was turned into PNG at four sizes with the SVG to PNG converter.

File sizes

Compressed, the icon, the logo and the flag were smaller than even a 64 pixel PNG of them, and 50 to 250 times smaller than a 1024 pixel one, while serving every screen size at once. That is why icon sets and logos are distributed as SVG.

The seal and the map show the limit. An SVG grows with the number of shapes, not with the size it is shown at. The seal is still smaller as a compressed SVG than as a 1024 pixel PNG, but the map, with its thousands of detailed coastlines, needs 342 KB even compressed, six times more than an optimised PNG at 1024 pixels. If a complex drawing is always shown at one size, a PNG or a lossless WebP can be the lighter choice.

Sharpness

The size difference matters less than what happens when a picture is shown larger than planned: on a high density phone screen, when someone zooms in, or when a logo made for a website ends up on a poster.

PNG made at 256 pxSVG

An SVG never has this problem. With a PNG, the answer is to make it at the largest size it will ever be shown, at least twice its normal display size for sharp screens, and accept the larger file.

Turning a PNG into an SVG

If you only have a PNG of your logo, a tracer can rebuild it as shapes. We traced three PNGs with our PNG to SVG converter, using its presets:

• The logo, 512 pixels: 6 shapes in a 1.5 KB SVG that looks like the original. Flat colours and clean edges are what tracing does best.
• The seal, 1024 pixels: 943 shapes and 401 KB, larger than the original SVG and with less detail in the fine lines. Tracing an illustration works, but a real vector original is always better.
• A photo of an owl, 1000 pixels: 7,039 shapes and 1.8 MB, fourteen times the size of a 129 KB JPEG of the same photo.

Where SVG does not work

• Email. Many email apps, including some of the most popular, do not show SVG images. Use PNG in emails.
• Uploads. Social networks, marketplaces and many forms accept only JPEG, PNG or WebP.
• Untrusted files. SVG can contain scripts, so many sites refuse SVG uploads for security reasons. Our minifier removes scripts and event handlers by default.
• Text without its font. Text in an SVG is drawn with the fonts of the viewer's device unless it was converted to shapes, so a logo can look different elsewhere. Convert lettering to outlines before you share a logo file.

The usual answer is to keep the SVG as the master file and export PNGs from it where a pixel format is required.

Which to use

All the tools used here work in your browser: the SVG to PNG converter exports any size, the SVG minifier trims files, and the PNG to SVG converter traces logos and drawings.