The difference in one sentence
PNG is a raster format: it records the colour of every pixel in a fixed grid, say 512 by 512. SVG, Scalable Vector Graphics, is in MDN's words an XML-based markup language for describing two-dimensional vector graphics: circles, paths, rectangles and text, with their positions, colours and strokes. A renderer draws an SVG fresh at whatever size is asked for, so the same file is sharp as a 16-pixel icon and as a poster. A PNG has exactly the detail it was saved with and no more.
Side by side
| SVG | PNG | |
|---|---|---|
| Stores | Shapes, paths and text as XML | A fixed grid of pixels |
| Scaling | Any size without loss of quality | Sharp only at or below its pixel size |
| High-resolution screens | Always crisp | Needs a 2× or 3× version to stay crisp |
| File size | Tiny for simple shapes, large for complex art | Grows with pixel count, not with complexity |
| Transparency | Yes | Yes (alpha channel) |
| Photos and gradients-heavy art | Poor fit | Fine, though JPG is smaller for photos |
| Editable | Yes: text, colours and shapes, even in a text editor; styled with CSS, driven by JavaScript | Only pixel by pixel |
| Searchable text | Yes, the text is in the file | No |
| Can contain scripts | Yes, which is why some uploaders refuse it | No |
| Works in | All browsers; not every email client, CMS, app store or social network | Everywhere |
When SVG is the right choice
- Logos and icons. One file for every size, crisp on every screen, and the colours can be changed with CSS for a dark mode or a hover state.
- Charts and diagrams built from lines, bars and labels. The labels remain real text: selectable, searchable and translatable, which MDN notes as a property of the format.
- Illustrations drawn as vectors in a design tool, as long as they are not photo-realistic. Flat illustrations compress to a fraction of the equivalent PNG.
- Anything that must print large. A vector logo on a banner is the same file as the one in the footer.
When PNG is the right choice
- Screenshots. They are pixels to begin with, and PNG keeps them exact.
- Images with transparency that are not vector: a cut-out product photo, a rendered 3D object, a sticker.
- Destinations that refuse SVG. Email signatures, many CMS media libraries, app store listings, social profile pictures and favicons for older systems want PNG or ICO. The SVG to PNG converter renders a vector at the pixel size you choose, and the PNG to ICO converter packs the result into an icon file.
- Complex vector art whose SVG has become larger than the PNG would be. At that point the vector advantages are costing more than they return.
Photos belong to neither: JPG, WebP or AVIF are the formats for them, as the image format guide explains.
Why "which is smaller" has no fixed answer
An SVG's size depends on how much is drawn; a PNG's depends on how many pixels it has. A simple icon is a few hundred bytes of SVG and several kilobytes as a 512-pixel PNG. A detailed illustration traced into thousands of path points can be a multi-megabyte SVG while the PNG stays under a megabyte. The rule of thumb: if the picture is made of a handful of shapes and text, SVG wins by a wide margin; if it is made of texture, shading and noise, pixels win. Because SVG is text, it compresses well on the way to the browser, which closes part of the gap for mid-sized files.
Converting between them
SVG to PNG is a one-way street that works perfectly: the renderer draws the vector at the requested size and saves the pixels. Choose the size for the destination, not the largest you can, and export a 2× version for high-resolution screens when the platform allows it; the image resizer makes the smaller variants from the large one. PNG to SVG, by contrast, is tracing: software guesses shapes from pixels, which works for clean logos with flat colours and fails for anything with gradients or photos. For a logo that only exists as a PNG, the honest fix is to redraw it as vector once, then export PNGs from that forever. The favicon generator takes either format and produces the set of icon sizes a site needs.
Decision table
| You have | Use | Why |
|---|---|---|
| A logo or icon as vector artwork | SVG, plus PNG exports for places that need them | One master file, crisp everywhere |
| A screenshot | PNG | Exact pixels, no artefacts |
| A chart for a web page | SVG | Scales, text stays text |
| A chart for an email or a slide deck | PNG at 2× the display size | Those tools handle pixels reliably |
| A photo with a transparent background | PNG (or WebP) | Pixels plus alpha channel |
| A favicon | SVG for modern browsers, PNG and ICO as fallbacks | Coverage of old and new systems |
Frequently asked questions
What is the difference between SVG and PNG?
SVG describes an image as shapes, paths and text in XML, so it can be drawn at any size without losing sharpness; MDN describes it as an XML-based markup language for two-dimensional vector graphics. PNG stores a fixed grid of pixels. Scale a PNG up and the pixels get bigger; scale an SVG up and the browser redraws it.
Which is better for a logo?
SVG, whenever the logo exists as vector artwork. One file serves every size from a favicon to a billboard, it stays crisp on high-resolution screens, and the text and colours can be edited. Export a PNG from it for the places that cannot take SVG, such as some email clients, app stores and social profiles.
Can a photo be an SVG?
Not usefully. A photograph is pixels, and tracing it into shapes either loses detail or produces a file far larger than the JPG. Use JPG for photos, PNG for screenshots and images with flat colour or transparency, and SVG for anything drawn: icons, logos, charts, diagrams.
Is SVG safe to use everywhere?
Every current browser renders SVG, and it has been a W3C standard since 1999. The gaps are elsewhere: some email clients, document tools, CMS uploaders and social networks reject or strip SVG, partly because an SVG file can contain scripts. For those destinations, convert to PNG at the size they need.
Why is my SVG bigger than the PNG?
Because it was exported from a drawing with thousands of points, or it embeds a bitmap. A clean icon is a few hundred bytes of text; a traced illustration can run to megabytes. Simplify the paths in the editor, remove embedded images, and compress on the server (SVG is text, so it gzips well). If the image is a photo at heart, PNG or JPG is the right format.