Convert SVG to PNG
Drop an SVG file or paste its markup, choose the size, and download the PNG. The picture is drawn in this tab and redrawn as you change the settings.
The PNG appears here once an SVG is open.
How to use it#
- Drop an SVG file onto the box above, or paste its markup into the box below it.
- Set the width or the height in pixels, or press 1×, 2×, or 4× for a multiple of the SVG's own size. The other side follows.
- Leave the background transparent, or press White or Black, pick a colour, or type its hex code.
- Check the preview, then download the PNG.
Pick the size first, because it cannot be changed later#
An SVG is a set of drawing instructions, so it is sharp at any size. A PNG is a grid of pixels, fixed at the moment it is made. Scaling a small PNG up afterwards gives a blurry picture, so choose the largest size you will need.
For a picture shown on a web page, the useful size is the one it is displayed at, doubled for high density screens: an icon shown at 32 pixels wants a 64 pixel PNG. For an app store listing, a slide, or print, use the exact pixel size the destination asks for. A high resolution PNG costs nothing in sharpness, only in file size, so a 4096 pixel logo for a poster is as crisp as a 64 pixel icon.
What can look different in the PNG#
The PNG is drawn by your browser, with the SVG sealed off from everything else, which is the same way a browser draws an SVG used as an image. In that mode it cannot fetch anything: an image linked from another site, a web font, or an external stylesheet is left out. The tool warns you when it spots one, and names it.
Text is drawn in a font your computer has. If the SVG names a font you do not have installed and does not carry it, the browser falls back to one it has, so text can come out in a different typeface. Converting the text to outlines in the design tool that made the SVG avoids that.
Transparent or a colour#
Most SVGs have no background, so the PNG keeps its transparency by default, and the preview shows the transparent parts as a grey checkerboard. That is right for a logo or an icon placed over something else.
Choose a colour for somewhere that fills transparency by itself, as some email clients, older software, and document converters do, some with black and some with white. A logo with dark lines vanishes on black, and one drawn in white for a dark header vanishes on white. Painting the colour it is meant to sit on, typed as a hex code from the brand guide, makes the PNG look the same everywhere.
Frequently asked questions#
Is my SVG uploaded to convert it?
#
No. The SVG is drawn into a PNG by your own browser, in this tab. Nothing is sent to a server, so an unreleased logo or icon set stays on your machine.
What size should the PNG be?
#
The size it will be shown at, doubled for sharp screens. An icon displayed at 48 pixels wants a 96 pixel PNG. For a destination with its own rules, such as an app icon, a favicon, or a print, use the exact size it asks for. The largest a browser can draw is 8192 pixels on a side.
Should the background be transparent or a colour?
#
Transparent, if the PNG goes on a web page, a slide, or into a design tool, since it then sits on whatever is behind it. A colour, if it goes somewhere you cannot check, such as an email or a document converter, or if the SVG is white line art that needs a dark ground to be seen. Type the exact hex code, such as #0f172a, to match a background you already use.
Is it safe to paste an SVG that contains scripts?
#
Yes. The SVG is only ever drawn as an image, which is a mode where browsers do not run scripts at all, and it is never placed into the page itself. A script inside it is ignored, and the PNG is a picture of what the SVG draws.
Why are parts of my SVG missing from the PNG?
#
An SVG drawn as an image cannot load anything from outside itself, so linked images, web fonts, and external stylesheets are left out. Embed the images in the SVG, or convert text to outlines, and it will come out complete. The tool names any outside file it finds.
Why does the text look different?
#
The browser draws text with the fonts installed on your computer. When the SVG names a font you do not have and does not embed it, one you do have takes its place. Converting text to outlines before exporting the SVG makes it look the same everywhere.