Reference · 8 min read
PNG vs SVG: what is the difference, and which should you use?
A PNG is a grid of pixels; an SVG is a list of shapes. That one difference decides how sharp, how small and how editable each one is. Here is what an SVG is, why a PNG is not a vector, and when to choose each.
01 · The short answer
Pixels versus shapes
Use SVG for artwork that must scale. Use PNG for anything that is really a picture.
PNG (Portable Network Graphics) stores an image as a fixed grid of coloured pixels, compressed without loss, with an optional transparency channel. It is a raster format. Enlarge it and the pixels simply get bigger, which you see as blur or staircase edges. SVG (Scalable Vector Graphics) stores an image as a description of shapes — “a circle here, this curve filled with that gradient, this text” — so the renderer draws it fresh at whatever size is needed. It is a vector format and it never goes soft.
That is why a logo is better as an SVG and a photograph is better as a PNG, JPG or WebP: a logo really is a few shapes, a photograph really is millions of slightly different dots.
| PNG | SVG | |
|---|---|---|
| Type | Raster (pixels) | Vector (shapes), stored as XML text |
| Scaling up | Blurs or pixelates | Sharp at any size |
| File size | Grows with pixel count | Grows with complexity; tiny for logos and icons |
| Photos and textures | Good (large for photos) | Poor: needs a bitmap inside or becomes a poster |
| Transparency | Yes, full alpha | Yes, native |
| Editing | Pixel by pixel in a photo editor | Move points and change fills in a vector editor or a text editor |
| Styling and animation | None | CSS, scripting, animation when inline in a web page |
| Support | Everywhere | All current browsers and design tools; patchy in email and some upload forms |
02 · What is SVG?
An image you can open in a text editor
The “S” and “V” in SVG are the whole idea.
An SVG file is a small text document in a W3C standard format. Open one in Notepad and you will find something like this, which is a complete, valid image:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="#8B5CF6"/>
</svg>Because it is text, an SVG can be edited by hand, searched, compressed well by a web server, generated by a script and tracked in version control. Because it describes shapes, it supports real gradients, partial transparency, clipping, text and — when placed inline in a web page — styling with CSS and animation. A logo that is a 40 KB PNG at 1000 pixels is often only a few kilobytes as an SVG.
Two practical notes. First, an SVG can contain script, so open files from sources you trust just as you would any document; browsers do not run scripts in SVGs loaded through an <img> tag. Second, an SVG can embed a bitmap; such a file is not really a vector and gains nothing in sharpness. The SVG files that AnyToSVG creates contain only paths and gradients, one path per colour, never an embedded bitmap.
03 · Is PNG a vector?
No — and “PNG to vector” means tracing
A picture of a circle is not a circle.
PNG is not a vector format, however crisp it looks at 100 %. A PNG logo contains a million coloured pixels and no knowledge that any of them form a circle, a letter or a curve. There is no setting in a photo editor that turns it into shapes: renaming logo.png to logo.svg gives you a broken file.
What people search for as “PNG to vector” or “PNG to SVG” is tracing: software looks at the pixels, finds the boundaries between regions of colour and rebuilds them as curves. For flat artwork — logos, icons, clipart, line drawings, signatures — this works almost perfectly, because the shapes were there to be found. For photographs it gives a stylised poster, because there are no clear shapes, only gradual tones. The raster vs. vector guide shows what tracing can and cannot do, step by step, and the image to vector page covers the other bitmap formats.
04 · Choose SVG when…
The artwork has to scale or be edited
- Logos and brand marks that appear at favicon size, on a website header and on a banner.
- Icons and UI graphics for the web: one file for every screen density, recolourable with CSS.
- Illustrations, diagrams, charts and maps made of flat shapes and lines.
- Cut files for Cricut, Silhouette, vinyl and laser machines, which need outlines, not dots.
- Print artwork that will be enlarged, and anything a designer will edit later.
05 · Choose PNG when…
The image is really a picture
- Screenshots and anything with text that must look exactly as rendered.
- Photographs and textured or painterly art — use PNG when you need transparency or lossless quality, JPG or WebP when size matters more.
- Social previews, email signatures and app-store icons, where upload forms and mail clients often reject SVG.
- Complex artwork with thousands of tiny shapes, where the SVG would be larger than the bitmap.
- Pixel art, where the square pixels are the design.
Most projects end up using both: an SVG as the master file and PNG exports for the few places that insist on bitmaps.
06 · Converting
PNG to SVG, and back again
One direction is tracing; the other is simply drawing.
PNG to SVG: trace it
Drop the PNG into the PNG to SVG converter (or the converter directly). It runs in your browser, picks a colour or black-and-white mode, counts the colours, detects smooth gradients and shows the SVG next to the original within about a second. Tick Transparent background if the logo sits on a solid colour, lower the Colours slider until the swatches match the design, and download. For a logo specifically, see logo to SVG; for a JPG, JPG to SVG.
SVG to PNG: render it
This direction needs no tracing, only a decision about size, because a vector has no pixels until you draw it. Open the SVG in a browser, Inkscape, Figma or Illustrator and export a PNG at the width you need (export at 2× or 3× for high-density screens). The PNG buttons in the AnyToSVG converter do exactly this for the SVG it has just traced, at 1×, 2× or 4×; they are not a general-purpose SVG-to-PNG tool.
What about quality?
PNG to SVG is only as good as the shapes in the PNG. A flat logo at 500 pixels or more converts almost perfectly; a tiny, blurry or photographed one converts into a tiny, blurry or skewed vector. SVG to PNG never loses anything except resolution you chose.
07 · Questions
PNG vs SVG — frequently asked
The questions behind “what is SVG”, “is PNG a vector” and “PNG or SVG”. More in the full FAQ.
What is an SVG file?
SVG (Scalable Vector Graphics) is an image format that describes a picture as shapes — lines, curves, fills and text — written as plain XML text. Because it stores shapes and not pixels, it can be scaled to any size without losing sharpness, and every modern browser can display it.
Is PNG a vector format?
No. PNG is a raster format: it stores a grid of coloured pixels at a fixed size. A PNG can contain a picture of a vector shape, but the file itself has no shapes in it. To get a vector you have to trace the PNG, which is what converting PNG to SVG does.
Is SVG better than PNG?
For logos, icons, diagrams and other flat artwork, yes: it stays sharp at every size and is usually smaller. For photographs, screenshots and textured artwork, no: PNG (or JPG/WebP) is the right choice. Neither is better in general; they suit different images.
Is an SVG file smaller than a PNG?
For simple artwork it is typically much smaller, because a few paths take far less space than a million pixels. For complex images with many shapes, gradients or texture, an SVG can be larger than the equivalent PNG.
Can I use SVG everywhere I use PNG?
Not quite. Browsers, design tools, cutting machines and most websites accept SVG. Many email clients, social-media upload forms, app-store icon fields and Open Graph preview images still require PNG or JPG, so keep a bitmap export for those.
Does SVG support transparency?
Yes. An SVG has a transparent background unless you draw one, and individual fills can be partly transparent. PNG also supports full alpha transparency, which is why both are common for logos.
How do I convert a PNG to SVG without losing quality?
Tracing rebuilds the shapes from the pixels, so a flat-colour PNG such as a logo or icon converts almost exactly. Photos become stylised posters. Drop the PNG into the PNG to SVG converter, check the Compare view and download the SVG.
How do I convert an SVG to a PNG?
Open the SVG in a browser, Inkscape, Figma or Illustrator and export or screenshot it at the size you need. The PNG buttons in the AnyToSVG converter render the SVG it has just traced at 1×, 2× or 4×; they are not a general SVG-to-PNG tool.
Keep reading
More on vectors
Try it as you read
The converter is free, needs no account, and shows the SVG next to your original in about a second.