A vector is infinite until you have to pick a number
The selling point of SVG is that it scales forever. The moment you export one to PNG, that stops being true and you have to choose a pixel size — and the choice is permanent. Pick too small and the logo is soft on a retina screen. Pick too large and you ship a megabyte where forty kilobytes would do. This guide covers how an SVG decides its own size, what number to export at for each use, and the three ways an export comes out wrong.
How an SVG decides how big it is
Three attributes on the root element interact, and misunderstanding them causes most bad exports:
viewBoxdefines the coordinate system —viewBox="0 0 24 24"means the artwork is drawn in a 24-by-24 space. It has no units and no intrinsic size.widthandheightgive a default rendered size. They are optional, and many icon sets omit them deliberately so CSS can control the size.- Aspect ratio comes from the viewBox. If you export at dimensions with a different ratio, the renderer letterboxes or stretches depending on
preserveAspectRatio.
An SVG with only a viewBox has no natural pixel size at all. Different tools invent different defaults — often 300×150, the CSS default for a replaced element — which is why the same file exports at wildly different sizes in different software. A converter that lets you type the output width explicitly removes the guesswork, which is what SVG to PNG does.
What size to export at
| Use | Export at | Why |
|---|---|---|
| Favicon set | 16, 32, 48 — into an .ico | Each rendered at its true size, not resampled |
| iOS home screen icon | 180 × 180 PNG, opaque background | iOS composites transparency onto black |
| Android / PWA manifest | 192 and 512 | The two sizes the manifest spec actually uses |
| Logo on a website | 2× the largest CSS display size | Covers retina; beyond 2× the gain is invisible |
| Email signature | 2× display size, then compress | Email clients rarely honour srcset, so one size must serve all |
| Social share image | 1200 × 630 | The ratio Open Graph previews crop to |
| Display size in inches × 300 | A 2-inch logo at 300 dpi is 600 px | |
| App store or press kit | 1024 × 1024 or larger | Recipients downscale; nobody can upscale |
The general principle: export at the largest size the image will ever be displayed at, multiplied by two for screens. Downscaling a PNG later is lossy but acceptable; upscaling one never is. And if you still have the SVG, re-exporting at a new size is always better than resizing a PNG.
The three ways an export goes wrong
- Missing fonts. An SVG containing a
textelement references a font by name. If the renderer does not have that font, it substitutes one, and the export shows different letterforms and different spacing. The fix is upstream: in your vector editor, convert text to outlines before exporting the SVG. Then the letters are paths and no font is needed. - External references. An SVG can link to an external image, stylesheet or font. Renderers generally refuse to fetch those for security reasons, so linked content vanishes. Embed images as data URIs and inline the CSS before converting.
- Transparency turning black or white. An SVG with no background rasterises to transparent pixels. Exported to PNG that is usually what you want; exported to JPG the transparency has to become some solid colour, and which colour depends on the tool. If the destination cannot take transparency, add an explicit background rectangle in the SVG so you control the result.
A fourth, subtler one: filters such as blur and drop shadow render differently across engines, and some converters skip them entirely. Check any SVG that uses filter effects at full size before shipping it.
When not to convert at all
On a website, serving the SVG itself is almost always better: it is smaller for simple artwork, sharp at every zoom level and on every display density, and can respond to CSS — including switching colours in dark mode, which a PNG cannot do. Convert to PNG only when the destination cannot take a vector: email clients, which strip SVG for security reasons; app icons and store listings; office documents; printers and print shops that have asked for raster; and favicon files for older browsers.
For placing vector artwork into a document rather than a web page, SVG to PDF keeps it as vectors all the way through, so it stays sharp at any print size. Converting to PNG first and then placing it into a PDF throws that away.