Why turn a vector into PNG?
An SVG is a set of drawing instructions, so it looks sharp at any size. That is perfect on a website, but many places want a plain picture: slide decks, office documents, email signatures, social media posts, app stores and plenty of upload forms. A PNG works in all of them and keeps the transparent background that logos and icons need.
Picking the size
Because the SVG is drawn fresh for every size, a bigger PNG costs nothing in sharpness, only in file size. 1× uses the size stored in the file. 2× suits screens with a high pixel density, and 4× gives you room for print or for cropping later. For a fixed target, like 1024 px for an app icon or 1200 px for a blog image, type an exact width; the height follows the shape of the drawing.
| SVG size | 1× | 2× | 4× |
|---|---|---|---|
| Icon, 24 × 24 | 24 × 24 | 48 × 48 | 96 × 96 |
| Logo, 200 × 60 | 200 × 60 | 400 × 120 | 800 × 240 |
| Drawing, 800 × 600 | 800 × 600 | 1600 × 1200 | 3200 × 2400 |
Making a website icon? The favicon generator takes an SVG and builds the whole set, and PNG to ICO packs a PNG into a Windows icon file. To shrink a large PNG for sharing, use the image compressor.
Converting SVG files
- 1Pick a size first: 1×, 2×, 4× or an exact width in pixels.
- 2Drop one SVG or a whole batch on the box. Each file is drawn at that size and saved as PNG, or as JPG if you switch.
- 3Check the pixel size under each file name, then save the files one by one or all together as a ZIP.
Frequently asked questions
Will the PNG be sharp at a large size?
Yes. The SVG is drawn again at the size you pick, instead of a small picture being blown up. Edges and text stay crisp at 4× or at an exact width of several thousand pixels.
Is the transparent background kept?
Yes. Everything the SVG leaves empty stays transparent in the PNG. If you choose JPG instead, those areas get the background color you set, because JPG has no transparency.
What size is 1×?
The width and height written in the SVG file. If the file only has a viewBox, its width and height are used as pixels. A file with neither becomes 300 × 150 px, the size a browser gives an image without any size.
Why is a photo or style missing from my PNG?
MDN notes that browsers may block outside files, such as linked images and stylesheets, when an SVG is shown as an image. They still work when they are embedded in the SVG as data URLs. Export the SVG with images embedded and convert again.
Are my files uploaded?
No. Your browser draws each SVG and saves the PNG on your own device. Nothing is sent to a server.