The one-line principle
SVG describes shapes mathematically — "draw a circle of radius 40 here". However far you zoom, the browser recalculates it, so it stays sharp.
PNG and JPG store a grid of pixels. Enlarging them stretches existing pixels; no new detail appears. Which means the sharpness of a converted SVG is decided entirely by the size you export at.
Picking the size
| Use | Export size |
|---|---|
| Small UI icon (displayed 24–32 px) | 64×64 or 96×96 |
| In-page graphic (displayed 600 px) | 1200 px wide (2×) |
| Article hero / cover (displayed 1200 px) | 2400 px wide |
| Print (full A4) | 2480×3508 px (300 DPI) |
| Social share card | 1200×630 |
The rule underneath: export at twice the display size. Phones and laptops are mostly high-DPI, and 2× is what makes edges look crisp. Beyond that you are just adding weight.
Why 2×
Suppose an icon occupies 24 CSS pixels on the page. On a high-DPI screen those 24 pixels are drawn by 48 physical pixels. Export a 24×24 bitmap and the browser has to stretch it to 48, which softens every edge. Export 48×48 and the mapping is one to one.
Does transparency survive?
Yes. SVG has no background of its own, so transparent areas stay transparent in PNG and WebP. They cannot in JPG, which has no alpha channel — the background gets filled with the colour you choose, white by default.
When to keep the SVG
- Icons, logos, simple illustrations: SVG on the page is best — a few kilobytes, and CSS can restyle it.
- Convert to PNG only when another program demands pixels (presentations, older design tools, some CMS upload fields).
- For a favicon, SVG to ICO is the right move — transparent, and several sizes in one file.
One easily missed detail
If the SVG references external fonts or linked images, those can vanish during conversion: the browser does not fetch remote resources while rasterising. Either convert the text to outlines first (every design tool has that option) or embed the images directly in the SVG before converting.
Try it
Open SVG to PNG, drop the file in, put your target width (2400, say) in Max width, and download.