SVG to PNG

An SVG file is a set of drawing instructions written in XML: paths, shapes, gradients and text. A PNG is a fixed grid of pixels. Turning one into the other is called rasterization, and the key decision is output size. Because the SVG has no fixed pixel count, a 24 × 24 icon can become a 24 px PNG or a 2400 px PNG with equally clean edges, as long as it is drawn at the target size rather than enlarged afterwards.

This converter reads the root svg element to work out the drawing’s natural size. Explicit width and height win, and units such as pt, mm, cm and in are converted at the CSS standard of 96 px per inch. If the file only has a viewBox, as most icon sets do, the viewBox size is used, and if there is nothing at all it falls back to 1024 px. The tool then pins the width and height to your output size (adding a viewBox when one is missing so the artwork scales), loads the markup into an image element from a local object URL and draws it onto a canvas at exactly that resolution.

Choose a multiplier of 1×, 2×, 3× or 4× for retina-ready assets, or type an exact width and the height follows the aspect ratio. PNG keeps the alpha channel, so transparent areas stay transparent. WebP also keeps transparency at a smaller size, and JPG is available for places that need it; because JPG can’t store transparency, it always gets a solid background colour, which you can also add to PNG and WebP.

A few SVG features need care. Browsers render an SVG used as an image in a locked-down mode, so web fonts and pictures linked by URL won’t load, and CSS animations are captured at their first frame. Convert text to outlines or embed fonts for an exact match. Markup copied from HTML often lacks the SVG namespace; the tool adds it so the paste still renders, and files with syntax errors get a clear message instead of a blank image.