From vector to pixels: choose the size first
An SVG is a set of drawing instructions with no fixed pixel size. Converting it to PNG fixes the resolution for good, so pick the output size before you convert rather than enlarging the PNG later, which only blurs it.
Because the browser redraws the vector at the target size, scaling up costs no sharpness: in our test a 20×20 SVG drawn at 400×400 had perfectly crisp edges. That is why this page offers 1×–4× and fixed long-edge sizes.
How the output size is decided
- width and height in the root svg tag (plain numbers or px) are used as the declared size.
- If only a viewBox is present, its proportions are kept and the long edge is set to 1,024 px.
- Percent or em sizes are ignored, because they only mean something inside a web page.
- With no size information at all, the image is drawn on a 1,024×1,024 area and the row tells you so.
This matters because browsers otherwise fall back to 300×150 pixels for such files, which is why many converters return tiny or cropped PNGs.
Which size to pick
- App and store icons: 512×512 or 1024×1024.
- Favicons: 32×32 for the browser tab, 180×180 for the Apple touch icon.
- High-density screens: 2× or 3× the size the image is displayed at.
- Print: pixels = inches × 300. A logo printed 2 inches wide needs 600 px.
Transparency and backgrounds
PNG keeps the SVG’s transparent areas. Our 344×64 logo, 80% transparent, became a 9,586-byte PNG with its background still clear, and the row reports the transparent share.
If you need a solid background, place the PNG on a coloured layer in your editor, or convert the SVG to JPG with a background colour in the image converter.
Fonts, images and effects that do not come along
For security, browsers render an SVG loaded as an image without fetching anything external. Web fonts linked from another site, and images referenced by URL, are not loaded: text falls back to a font installed on your device and linked pictures appear blank.
Scripts and animations do not run either; the PNG shows the drawing’s initial state. Convert text to outlines and embed images in your design tool before exporting the SVG if they must appear.
Cut-off, blank or capped PNG output
- Parts are cut off: the SVG has no viewBox, so the drawing extends beyond the declared area. Add a viewBox in your editor and export again.
- The PNG is blank: the SVG may reference external images or use features the browser cannot render as an image.
- A huge size was capped: output is limited to 4096 px on the long edge and 16 megapixels; the row is marked when that happens.