Guide · 3 min read

SVG or PNG? It depends on what you make.

A logo, an icon, a cut file, a print, a photo: which format each one needs, why, and what the difference looks like on one drawing saved both ways.
A flat potted cactus on a transparent background: three navy rounded stems with two ochre flowers, in a coral pot with a pale blue rim
The PNG as uploaded355 KBVecSnap's SVG2.2 KB84 anchor points

Use an SVG for anything drawn, such as a logo, an icon or a cut file: it is made of shapes, so it stays sharp at every size, weighs little and lets you change its colors. Use a PNG for a picture with fine detail, such as a photo or a screenshot, or where a tool only takes pixels. Both keep a transparent background. The drawing on this page, saved both ways, shows each difference.

Updated Oct 24, 20263 sources ↓

The difference

What is the difference between SVG and PNG?

A PNG is a grid of pixels, each one a color. An SVG is a list of shapes, each filled with a color, drawn again at whatever size it is shown.

Up close, the PNG shows its squares and the SVG a true curve. Every other difference follows from that one.

Original
1,200 pxthe PNG as uploaded, its own pixels
VecSnap
84anchor points in the whole file

By job

Which is better for a logo, Cricut, print or the web?

The format follows the job. Anything drawn wants shapes, so an SVG; anything photographed wants pixels, so a PNG or a JPG.

  • A logoSVG

    One master file for a website, a sign and a business card, sharp at every size, its colors editable.

  • Icons on a websiteSVG

    A few kilobytes each, sharp on every screen, and recolored with a line of CSS.

  • A cut fileSVG

    Cutting machines cut paths, and an SVG is made of them.

  • A printEither

    An SVG prints sharp at any size. A PNG prints well when it has enough pixels for the size printed.

  • A photoPNG

    Light, shade and texture are pixels. Keep a photo as a PNG, or as a JPG for a lighter file.

  • A social postPNG

    A post is shown as pixels. Export a PNG from the SVG at the size the platform asks.

File size

Is an SVG smaller than a PNG?

For a drawn image, by far. A PNG stores every pixel of its size; an SVG stores only its shapes, whatever size it is shown at.

The same drawing, measured both ways:

The PNG
355 KB

every pixel of its size, stored

The SVG
VecSnap 2.2 KB, PNG 355 KB99.3% lighter

Transparency

Do SVG and PNG both keep a transparent background?

Yes. A PNG stores how see-through each pixel is in its alpha channel; an SVG simply draws nothing where it has no shape.

Questions

SVG vs PNG, answered.

The questions people type, and ask assistants, about the two formats.

For anything drawn, yes: an SVG is sharp at every size, lighter and editable. For a photo, no: a PNG keeps its detail.

More guides

Keep reading

What is a vector file?

What one is, its formats, and how to tell a real one from pixels.

Guide · 2 min read

How to reduce anchor points

Why a traced SVG has thousands, what they cost, and how to keep only the few a shape needs.

Guide · 2 min read

Drop an image. Check the file.

Converting is free. You see the whole result before you spend anything.