The short version
- SVG is a vector format that describes shapes with maths, so it stays perfectly sharp at any size.
- PNG is a raster format made of a fixed grid of pixels, so it goes soft or blocky when enlarged beyond its size.
- Use SVG for logos, icons, simple illustrations and interface graphics on websites and in print.
- Use PNG for photographs, textures, complex artwork and anything uploaded to social platforms, which do not accept SVG.
- A good logo kit contains both: an SVG master and PNG exports at the sizes each place needs.
On this page
SVG vs PNG is really vector against pixels. An SVG file stores shapes as instructions (draw a circle here, fill it this colour), so a browser or printer redraws it crisply at any size, from a 16 pixel favicon to a shop sign. A PNG stores a fixed grid of coloured pixels, so it looks perfect at its own size and soft when you enlarge it. Use SVG for logos, icons and simple graphics on the web and in print. Use PNG for photos, textured artwork and anything you upload to social media.
What an SVG file actually is
SVG stands for Scalable Vector Graphics, and it is plain text. Open one in a code editor and you will see readable markup, not noise. That is why SVGs are tiny for simple shapes, why you can change their colour with CSS, and why search engines and screen readers can read the text inside them.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Studio Nine">
<defs>
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#4f46e5"/>
<stop offset="1" stop-color="#db2777"/>
</linearGradient>
</defs>
<circle cx="32" cy="32" r="28" fill="url(#g)"/>
<path d="M22 40 L32 20 L42 40 Z" fill="#ffffff"/>
</svg>viewBox sets the drawing's coordinate system; the size it displays at is up to the page.A PNG of the same mark needs a separate file for each size you want it sharp at, and none of them can be recoloured without exporting again. The MDN SVG documentation covers the format in full.
SVG vs PNG side by side
PNG
PNG
SVG
PNG
SVG
PNG
SVG
PNG
SVG
PNG
SVG
PNG
SVG or PNG for a logo
Keep the master logo as SVG. It is the only file that serves every future use: a website header, a 4 metre banner, embroidery, a letterhead, a favicon. Then export PNGs from it for the places that cannot take vectors, mostly social platforms, email signatures and some presentation tools.
File
Size
Size
File
Size
File
Size
File
Size
Profile pictures are always PNG or JPG. Export the logo large, 1080×1080, so it stays crisp on high density screens.
When PNG is the right choice
Vector only works when the image can be described as shapes. As soon as an image has photographic detail, soft light, grain or thousands of subtle colour changes, a PNG is smaller and more faithful. Tracing a photo into an SVG produces a file that is both heavier and worse.
- Photographs and photo collages.
- Textured artwork: grain, paper, brush strokes, film effects.
- Social posts, stories and carousels, since platforms only accept pixels.
- Screenshots and anything captured from a screen.
- Rich backgrounds with layered light and noise.
Flat shapes, clean edges, a few colours: ideal SVG territory.
Grain, soft light and material texture belong in a PNG.
SVG vs PNG for a website
On a site, use inline SVG or an SVG file for logos, icons and illustrations, and modern formats for photos. SVG icons scale with text, can take currentColor so they follow your theme, and need no separate files for high density screens. For raster images, WebP is usually a better choice than PNG on your own pages.
Avoid
- A PNG logo stretched to fill a wide header
- A photo traced into a huge SVG
- Uploading SVG files you did not make without sanitising them
- Icons as PNGs that need 1x, 2x and 3x copies
Do
- SVG logo with a width set in CSS
- Photos as WebP or JPG at the size they display
- Treat user uploaded SVG as code, because it can contain scripts
- SVG icons with
fill: currentColor
How to convert SVG to PNG
- 1
Decide the largest size you need
A profile picture at 1080×1080 or an email signature at 1200×400 (twice its 600×200 display size). Export once at that size rather than enlarging later.
- 2
Export from the source
In Figma, Illustrator or Inkscape, export the frame as PNG at the chosen size. Exporting from the vector keeps every edge sharp.
- 3
Keep transparency on
Leave the background empty so the PNG has an alpha channel. See transparent background for checking it.
- 4
Check at 100%
Look at thin strokes and small type at actual size. If they break up, simplify the logo for small uses rather than shipping a muddy file.
Going the other way, PNG to SVG, is not a conversion but a redraw. Auto tracing works for a bold, flat logo and fails for anything with texture or soft edges. If your logo only exists as a PNG, have it redrawn once as a vector; every later file will be better for it.
Gradiently's Pro exports cover both sides of this: a design can go out as SVG for the web and print, or as transparent PNG for platforms, from the same file. Export SVG and transparent PNG shows how, and PNG vs JPG settles the other common choice.
Questions people ask
Is SVG better than PNG for a logo?
For the master file, yes: an SVG logo stays sharp at every size and can be recoloured. Export PNG copies for social media and email, which do not accept SVG.
Can I upload an SVG to Instagram?
No. Instagram and other social platforms accept PNG, JPG and video. Export a PNG at the platform's size, such as 1080×1080 for a square post.
Is SVG smaller than PNG?
For simple shapes such as logos and icons, an SVG is usually much smaller. For photos and textured images, a PNG or JPG is smaller and more accurate.
Does SVG support transparency?
Yes. Anything not drawn in an SVG is transparent, so it sits cleanly on any background.
Can I convert a PNG logo to SVG?
Only by tracing or redrawing it. Automatic tracing works for bold flat logos; detailed or textured logos need to be redrawn by hand as vectors.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile