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 navy hexagon with rounded corners holding three ochre bars, a small coral circle above them, on a transparent background
The PNG as uploaded401 KBVecSnap's SVG1.2 KB41 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 3 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
41anchor 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
401 KB

every pixel of its size, stored

The SVG
VecSnap 1.2 KB, PNG 401 KB99.6% lighter

Try it

How small is my PNG as an SVG?

Drop it here: VecSnap draws it as an SVG and shows what the file weighs, its anchor points counted, before you keep anything.
OriginalVecSnap
Anchor points
VecSnap 41, potrace 69594% fewer
File size
VecSnap 1.2 KB, potrace 30 KB95% lighter

No image at hand? Try one of ours

Now yours: drop a PNG

See its SVG and what it weighs. Converting and previewing are free.

Questions

SVG vs PNG, answered.

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

Favicon size and format

Sizes, formats and the HTML, shown on one icon in a tab, a search result and a home screen.

Guide · 5 min read

What is an SVG file?

What the format is, and how to open, make and edit one, on a real file read line by line.

Guide · 4 min read

What is a vector file?

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

Guide · 3 min read

Image Trace in Illustrator, step by step

The steps, the settings and Expand, and what to do when Image Trace is grayed out.

Guide · 3 min read

How to change a logo's color

Change a logo's colors, make a white or a black version, and why a recolored PNG grows a halo.

Guide · 4 min read

How to fix a pixelated logo

Why a logo pixelates, the pixels each place asks for, and the fixes, shown on one small JPEG.

Guide · 5 min read

SVG viewBox, width and height

The viewBox, width and height, a responsive SVG, and why yours will not scale, shown on one file.

Guide · 4 min read

How to change an SVG's color

Recolor an SVG in its text, with CSS or currentColor, and why one in an img tag will not change.

Guide · 4 min read

How to add a sticker border

A white edge and a smooth cut line, in Cricut, Illustrator, Inkscape or one step.

Guide · 5 min read

Inkscape Trace Bitmap, step by step

The steps, the modes and the settings, and what Trace Bitmap leaves on a real PNG.

Guide · 4 min read

How to vectorize an image in Photoshop

Make Work Path, color by color, and where it stops: what Photoshop can vectorize.

Guide · 4 min read

SVG vs EPS

What differs, which to send a printer, and one logo opened both ways.

Guide · 3 min read

How to vectorize an image in Canva

Canva's own apps, why a PNG saved as an SVG stays pixels, and an SVG you can recolor in Canva.

Guide · 4 min read

How to turn a Procreate drawing into a vector

Procreate shares no vector file: export the PNG that converts best, and draw for it.

Guide · 2 min read

How to make an SVG for Cricut

Why Design Space wants an SVG, and how to make one with a layer for each color.

Guide · 4 min read

Image Trace in Affinity, step by step

The steps, the two settings, where it is, and why traced corners come out round.

Guide · 4 min read

How to make an SVG for laser cutting

Why a traced SVG engraves some areas twice, and the file each laser app wants.

Guide · 5 min read

How to vectorize an image in Figma

Figma's own Vectorize, how to import or paste an SVG, and what makes a file easy to edit there.

Guide · 3 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.