SVG vs PNG: which to use, and when
SVG is vector: shapes that stay sharp at any size. PNG is raster: a fixed grid of pixels. Which to use for logos, the web, Cricut, lasers and print.
Published
Use SVG for anything drawn: logos, icons, illustrations, charts, cut files. Use PNG for anything made of pixels that needs to stay exact: screenshots, pixel art, pictures with transparency. For photographs use neither; JPG or WebP will be a fraction of the size.
The reason is what each file holds. An SVG is a vector file: a description of shapes that is drawn fresh at whatever size is needed. A PNG is a raster file: a fixed grid of pixels, compressed without loss. Raster vs vector explains the two families.
Side by side
| SVG | PNG | |
|---|---|---|
| Type | Vector: paths and shapes | Raster: pixels |
| Enlarging | Sharp at any size | Blurs past its pixel size |
| Transparency | Yes | Yes |
| Good for | Logos, icons, line art, cut files | Screenshots, pixel-exact graphics |
| Bad for | Photos | Photos (files get huge), large print |
| Editable | Every shape, in a vector editor or as text | Pixels only |
| Animation and styling | Yes, with CSS and scripts | No |
| Accepted everywhere | No: many upload forms and email programs refuse it | Yes |
File size
For simple artwork SVG is far smaller. The snowflake in our free library is about 5 KB as an SVG and about 55 KB as a 2,000 pixel PNG, ten times larger, and the SVG is the one that can be scaled up.
The balance tips the other way as artwork gets complicated. An SVG stores every point of every shape, so a detailed illustration with tens of thousands of points can outweigh a PNG of the same picture, and it takes longer to draw. A traced photo is the extreme case.
For websites
SVG is the right choice for logos and icons: one small file is sharp on every screen, from a phone to a 5K monitor, and its colours can be changed with CSS. Every current browser draws SVG.
Two cautions. An SVG is code and can contain scripts, so many sites that accept uploads, WordPress among them by default, refuse SVG files. And most email programs will not show an SVG, so logos in email are still PNG. When a PNG is needed, export it at twice the size it will be shown, so it stays sharp on high-density screens: SVG to PNG.
For Cricut and Silhouette
Use SVG. A cutting machine needs paths to follow, and an SVG is paths: it arrives in Cricut Design Space with its shapes and layers ready to cut. A PNG is only a picture. Design Space can cut around its outer edge, or print it and cut round the print, but it cannot see the shapes inside without tracing them first.
If all you have is a PNG, trace it: PNG to SVG turns it into paths. Silhouette Studio’s free Basic Edition does not open SVG at all; it opens DXF and can trace PNGs itself.
For lasers
Both, for different jobs. A laser cuts and scores along vector paths, so outlines should be SVG or DXF. It engraves pictures by scanning a raster image line by line, so photos and shaded artwork should be PNG, ideally converted to 1-bit at the laser’s own resolution.
For print
A print shop will take either, and will usually prefer vector for logos and text, as PDF or SVG, because it prints at the full sharpness of the press. A PNG must have enough pixels for the size: 300 for every inch of print. A logo that is 500 pixels wide prints sharply at 1.7 inches and no larger. The DPI calculator does the sum.
Converting
- SVG to PNG is exact: pick the pixel size and the shapes are drawn into it. SVG to PNG converter.
- PNG to SVG is a trace: software finds the edges and fits curves to them. It works well on flat-colour artwork and poorly on photos. PNG to SVG converter.
Questions
Is SVG better quality than PNG? For drawn artwork, yes at any size beyond the PNG’s own. At the PNG’s exact pixel size the two look the same.
Can a PNG be turned into a real SVG? Yes, by tracing. Renaming the file, or embedding the PNG inside an SVG, does not make it vector.
Why does my SVG look different in another program? Usually fonts. Text in an SVG needs the same font on the other device. Converting text to paths before saving avoids it.
Which is better for a logo? SVG as the master file, with PNG copies exported from it for the places that will not take SVG.