# SVG vs PNG: when to use each, and when to convert
> Use SVG for anything vector - logos, icons, diagrams. It is usually a tenth the size and scales infinitely. Convert to PNG only where SVG is not accepted: email clients, Open Graph images, app store assets and social previews.
Source: https://rankcert.com/blog/svg-vs-png
Published: 2026-08-29 · Updated: 2026-08-29
---
SVG and PNG are not competing formats - they describe images in fundamentally different ways, and each is wrong for the other's job.
## The difference
**PNG** stores a grid of pixels. A 512×512 PNG holds 262,144 colour values. Scale it up and the browser invents the missing pixels, which is why it goes soft.
**SVG** stores instructions: draw a circle here, fill this path with that colour. There is no resolution. The renderer executes the instructions at whatever size you ask for, so it is sharp at 16px and sharp on a billboard.
For a typical logo:
| Format | Size | Scales |
|---|---|---|
| SVG | 1–4KB | Infinitely |
| PNG at 512px | 15–40KB | Down only |
| PNG at 2048px | 100–300KB | Down only |
## Use SVG for
Logos, icons, diagrams, charts, illustrations, and anything with flat colour and defined edges. It is smaller, it is sharp on every display, it can be styled with CSS, and it can respond to dark mode.
An SVG icon set inlined into your CSS also removes a network request per icon, which matters more than the byte count on a page with twenty of them.
## Use PNG for
Photographs - never put a photo in an SVG, it just embeds a raster image with extra overhead - and anywhere SVG is not accepted:
- **Email.** Most clients strip or refuse SVG.
- **Open Graph images.** No social platform renders SVG previews.
- **App store and platform assets.** Every store wants specific PNG sizes.
- **Favicons**, as a fallback alongside the SVG.
Free tool: [SVG to PNG](https://rankcert.com/tools/svg-to-png) - Convert an SVG to a PNG at 1x to 8x scale, so logos and icons export crisp at whatever pixel size you need. Runs in your browser.
## Exporting at the right size
Work out the pixel size you need, then pick the scale that reaches it. An SVG with a 256px viewBox exported at 2× gives 512px.
Rough guide:
- **Retina UI asset:** 2× the display size.
- **Open Graph image:** exactly 1200×630.
- **App icon:** whatever the store specifies, exactly.
- **Print:** 300 DPI at physical size - a 2-inch logo needs 600px.
## Why an SVG renders wrong when converted
Almost always external references. Inside a canvas, an SVG cannot resolve things it links to:
- **Webfonts.** Text using a font the renderer cannot load falls back or disappears. Convert text to paths before exporting.
- **External images.** Embed them as data URIs.
- **External stylesheets.** Inline the styles.
- **Missing width/height or viewBox.** Without dimensions the renderer has to guess, and different renderers guess differently. Always set a `viewBox`.
## Optimising SVGs
Design tools export enormous SVGs full of editor metadata, empty groups and needless decimal precision. A logo exported from a design tool is routinely 40KB and 4KB after cleanup.
The wins, in order: strip editor metadata, round path coordinates to two decimals, merge duplicate paths, remove empty groups, and drop the XML prolog for inline use.
If your logo is a PNG, you probably have the vector original somewhere. Converting the PNG back to SVG never works well - auto-tracing produces bloated paths and soft edges. Find the source file.