SVG to PNG Converter: Any Size or DPI

How to convert SVG to PNG

Paste SVG code into the box, or open or drop one or more .svg files. The preview updates as you type. Choose the output format and size, then download the image, copy it to the clipboard, or download every file at once as a ZIP. The page starts with an example you can replace.

Choosing the size

An SVG is a vector drawing, so it can be rendered sharply at any size. The converter first works out the SVG’s own (intrinsic) size from the rules that browsers use for SVG images:

• From the width and height attributes. Units are converted at the CSS rate of 96 pixels per inch: 1in = 96 px, 1cm ≈ 37.8 px, 1mm ≈ 3.78 px, 1pt ≈ 1.33 px, and 1em = 16 px, the default font size.
• If one of them is missing, from the other plus the proportions of the viewBox. Percentages such as 100% describe a page that an image does not have, so they are ignored.
• With no usable width or height, from the viewBox itself: viewBox="0 0 24 24" gives 24 × 24 pixels, the size the drawing was designed at. (Browsers have only a shape to go on here and size such an image to fit the page.)
• With neither, browsers fall back to 300 × 150.

Then pick how to size the output: a scale factor (2× suits high-density screens), an exact width or height with the other side in proportion, both width and height (the drawing is centred and keeps its proportions), or a print resolution in DPI.

In DPI mode the resolution is also written into the PNG (pHYs chunk) or JPG (JFIF header), so print and layout programs place the image at its intended physical size.

Transparency and background

PNG and WebP keep transparent areas. Untick Transparent to fill them with a colour. JPG has no transparency, so the background colour is always used there, white unless you choose another.

What cannot be rendered

The SVG is drawn by your browser as an image, the same way an <img> tag shows it. In that mode browsers never load anything the SVG refers to by URL, so linked images, web fonts and imported stylesheets are left out, and nothing is fetched from the internet. The converter lists such references when it finds them. To include them, embed images as data: URIs and convert text to outlines in your drawing program, or use a font installed on your device.

Scripts and event handlers inside the SVG never run, which makes it safe to convert files from unknown sources. HTML embedded with a <foreignObject> element is left out in browsers such as Chrome, which refuse to turn it into pixels; the converter tells you when that happens. Animations are captured in their first frame. Gradients, patterns, masks, clipping paths, filters and CSS styles inside the file render as they do in the browser.

Copied from a web page, inline SVG often lacks the xmlns="http://www.w3.org/2000/svg" attribute that standalone SVG files need, or uses HTML entities such as  . The converter adds and replaces these for you and says so.