How to use it
- Choose a size. 2× suits most screens; 4× is good for print or large displays.
- Drop in your SVG files.
- Download the PNGs. The pixel size is shown next to each one.
How the size setting works
An SVG describes shapes rather than pixels, but it usually declares a natural size in its width and height or its viewBox. At 1× you get a PNG at that natural size. At 2× every dimension doubles, which is what high-density phone and laptop screens need to look sharp. The SVG is redrawn at the larger size, so edges stay clean.
If an SVG has no size information at all, it is treated as 300 × 150, the default browsers use.
When an SVG will not convert properly
Browsers draw SVGs used as images in a locked-down mode for safety. Anything the SVG pulls in from elsewhere, such as web fonts, linked images or external stylesheets, will not load. The usual symptom is text falling back to a default font, or a missing picture inside the graphic. The fix is to convert text to outlines and embed images before exporting the SVG from your design tool.
Scripts and animations are also ignored. You get a still image of the SVG's starting state.
SVG and PNG compared
| SVG | PNG | |
|---|---|---|
| First released | 2001 | 1996 |
| Compression | Vector, stored as text | Lossless |
| Transparency | Yes | Yes, including soft edges |
| Animation or pages | Animation via CSS | Only as APNG, rarely used |
| Best for | Logos, icons and diagrams | Screenshots, graphics, text and transparency |
| Support | Browsers and design tools | Universal |
Questions people ask
What resolution should I choose?
For web use, 2×. For printing, work out the pixels you need from the print size and DPI, then pick the scale that reaches it.
Is the background transparent?
Yes, unless the SVG itself draws a background. Use SVG to JPG if you need a solid background.
Why does the text look different?
Fonts the SVG links to are blocked when drawing as an image. Convert text to paths in your editor before exporting.