Choosing the width, the one decision that matters
An SVG describes shapes, not pixels, so it has no resolution of its own. The width you choose becomes the width of the PNG. The height follows the drawing's shape.
- Own size. The tool reads the width and height written in the SVG, or its viewBox when there are none. Units are converted at 96 pixels to the inch, so a drawing 40 mm wide comes out 151 pixels wide. Many icons are drawn on a 16, 24 or 48 unit grid, and they come out 16, 24 or 48 pixels wide. That is rarely what you want.
- 512 to 4096. For a logo on a web page, 2 times the display width keeps it sharp on high density screens. For a print or a slide, ask for the width you need in pixels, or the size in inches times the resolution of the print.
- Nothing declared. An SVG with no width, height or viewBox is drawn 1024 pixels wide.
If an SVG declares a huge size, such as 20,000 pixels wide, the own-size setting is refused above 100 megapixels. Pick a smaller width and convert it again.
What the browser draws, and what it does not
The page hands your SVG to the browser as an image. That is the same safe route a browser uses for an SVG in an img tag, so the rules are the same.
- Scripts do not run. An SVG containing a script drew normally, and the script's side effects did not happen.
- Nothing is fetched. A picture linked from another address is not loaded, so it is missing in the result. Embed pictures in the SVG as data instead.
- Text uses fonts on your device. The test SVG asked for Georgia, Courier New and a font that does not exist. The first two were drawn with those fonts, and the missing one was replaced by a default serif font. A font that is stored on a web server is not loaded, so convert text to outlines in your editor if the lettering must be identical everywhere.
- Features depend on your browser. Gradients and clipping are widely supported. Very new CSS or unusual filters may not draw.
Transparency and edges
A PNG can hold 256 levels of transparency, so smooth anti-aliased edges and soft shadows survive. A rounded rectangle in an SVG gave transparent corners and solid inside pixels, and a shape at half opacity gave pixels at half transparency, exactly as the SVG describes.
A transparent PNG looks right on any background, but a dark logo can disappear on a dark page. If you need a solid background, choose SVG to JPG or add the background in the SVG itself.
When to keep the SVG
Keep the SVG for anything that has to scale: logos on websites, icons, diagrams. A PNG made from it is fixed at one size and gets blurry when enlarged. Make a PNG when a program or site will not take SVG, such as many upload forms, email programs and presentation tools.
For a website icon set, the Favicon Generator draws an SVG at every size it needs, which stays sharper than resizing one PNG.