PNG vs SVG
PNG and SVG are both in wide use and are chosen for different reasons. This page sets them against each other on the things that decide between them, and links to the converters for both directions — every one of which runs in your browser, with the file never uploaded.
The short answer
These are not two ways of doing the same thing. A PNG is a grid of pixels with a fixed size; an SVG is a description of shapes with no size at all. For a logo, an icon, or a diagram — anything drawn rather than photographed — SVG is simply the right answer, because the same file is sharp at sixteen pixels and on a printed poster and usually weighs less than any single PNG of it.
For a photograph, SVG is not an option in any useful sense. There are no shapes to describe, and tracing one produces an enormous file that looks worse than what it came from. SVG also carries a security consideration PNG does not: it is a document that can contain scripts, so an SVG from an unknown source deserves the caution you would give an HTML file.
If you have a logo as a PNG and want it as an SVG, the honest answer is usually to go back to whoever drew it. Tracing gets you shapes that approximate the pixels, not the shapes the designer actually drew, and the difference shows up the moment somebody scales it up or tries to recolour it.
Side by side
| Property | PNG | SVG |
|---|---|---|
| Compression | Lossless | None, stored as written |
| Colour | 8 bits per channel | Shapes, not pixels |
| Transparency | Full alpha channel | Full alpha channel |
| Animation | No | Yes |
| Keeps EXIF | Yes | No |
| Browser support | Every browser since 1997 | Chrome 4, Firefox 3, Safari 3.2 |
| Size of a photograph | 3 to 5 times a JPG | Not a format for photographs |
| Published | 1996 | 2001 |
Where they actually differ
- They compress differently, and that is the difference behind most of the others: one keeps every pixel exactly as it was given, the other discards detail to be smaller and cannot put it back.
- Only SVG holds more than one frame. Converting an animation to the other keeps the first frame and discards the rest, silently.
- They store colour in fundamentally different ways, which is why one handles photographs well and the other handles flat artwork well, and why forcing either into the other's territory goes badly.
- SVG has no resolution at all: it describes shapes rather than pixels, so it stays sharp at any size while the other has to pick one and live with it.
- Only PNG carries camera settings, dates, and copyright fields. Converting away from it drops them without saying so.
- Browser support is not equal. PNG is read everywhere and has been for years; the other is either newer or, in one case, not read by browsers at all.
- They are 5 years apart, and most of what separates them is what had been learned in between.
What people get wrong
- Converting an animation into the still format keeps the first frame and drops the rest, without warning. It is the easiest mistake to make here and the easiest to miss, because the result opens perfectly well.
- Camera settings, dates, and copyright fields do not survive the trip into the format that has nowhere to put them. If attribution matters, check the output rather than assume, because the loss is silent.
Which to choose
- Choose PNG when
- Choose PNG for photographs, screenshots, and any image that was captured rather than drawn — and wherever a file has to be a plain image with no markup in it.
- Choose SVG when
- Choose SVG for logos, icons, diagrams and charts, and especially where the same artwork has to appear at very different sizes.
Converting between them
Common questions
- Can I convert a PNG to a real SVG?
- Only by tracing, which is an approximation rather than a conversion. It works on a logo with a few flat colours and fails on a photograph. If the artwork exists as vectors somewhere — in the design file it came from — exporting from there is the only way to get a genuine SVG.
- Which of PNG and SVG is better?
- Neither, in general — if one were simply better the other would have disappeared. They are good at different things, and the short answer above says which is which. The useful question is what the file has to do next: be edited, be published, be opened by somebody else, or fit inside a size limit.
- Does converting between them lose anything?
- It depends on the direction. Converting into a format that stores everything loses nothing but does not recover anything either; converting into one that discards detail loses a little each time. The table above says which of these two does which.
- Can I convert back afterwards?
- The file will convert back, but whether it comes back unchanged depends on the direction. Between two formats that store everything, a round trip is lossless. Where one of them discards detail, that detail is gone and the return journey cannot invent it.
- Can I use both?
- On a web page, often yes, and it is usually the right answer: serve the smaller modern format and list an older one as a fallback so each browser takes what it understands. For a file you are handing to a person, pick one — the one they can open.
- Which one does my software support?
- The side-by-side table above says which browsers read each, which is the part that varies most. Desktop support is harder to state in general and tends to lag browsers by years, so if the file is going to somebody else, the older and more widely read of the two is the safer choice.
- Is converting between them free?
- Yes, with no account and no limit on how many files you convert. Every converter linked from this page runs in your browser: the file is read from your device, converted by code running on it, and handed back as a download.
- Is my file uploaded?
- No. There is no conversion server here to upload it to, and no third-party service is involved. You can confirm it yourself: open your browser's developer tools, switch to the Network panel with no filter, and run a conversion — no request carries your file.