SVG to PNG

What this tool does

This tool converts an SVG into a PNG or JPG raster image. SVGs are vector graphics — brilliant for scaling, but not every program, platform, or workflow accepts them. The tool takes your SVG, either pasted as markup or supplied as an .svg file, renders it through the browser’s image engine, draws it onto a <canvas> at the scale you choose, and exports either a transparent PNG or a quality-tuned JPG. You get a live preview, a download button, and an optional background colour for SVGs that would otherwise export with a transparent backdrop. The PNG output is the default; switch the Output format toggle to JPG when you need universal compatibility or a smaller file.

Why you might need it

Vector and raster formats each have their place, and you frequently need to cross between them. An icon designed as an SVG has to become a PNG to be used as a favicon source, an app store asset, an email graphic, or a social preview image. A logo built in vector form must be rasterized before it can go into a document, a slide, or a tool that simply does not understand SVG. Doing this by opening a full design application is slow when all you want is one export at one size. This tool does exactly that one job, quickly, and lets you pick the resolution so the result is crisp wherever it lands. Because everything runs in your browser, it is also a safe way to convert brand assets or unreleased artwork.

How to use it

1. Paste your SVG markup into the input box, or drop an .svg file onto it (the Choose .svg file button works too).
2. Pick an output scale: 1× keeps the SVG’s native size, 2× and 3× multiply it, and Custom width lets you set an exact pixel width.
3. If you need an opaque image, tick Fill background and choose a color.
4. Click Convert to PNG. A preview appears below.
5. Click Download PNG to save the file, named after its dimensions.
6. Use Load sample to see a working example, or Clear to start over.

Common pitfalls

The transparency surprise is the one people hit most: a PNG exported from an SVG with no background is transparent, which looks like a blank or broken image on a white page. Enable Fill background when you need a solid color behind the artwork. The second common issue is external references — if your SVG points to a web font, a linked image, or an external stylesheet, the browser renders it in a sandbox and those resources are usually dropped, so text may fall back to a default font. Embedding fonts and images inside the SVG avoids this. Finally, watch the output size: a large SVG exported at 3× can become very big, so the tool caps any dimension at 8192 pixels and tells you if you exceed it.

Tips and advanced use

For icons and logos that will appear on modern displays, export at 2× or 3× so the result stays sharp on high-density screens — a 1× export can look soft when scaled up by the operating system. When the destination has a strict size, such as a 512 × 512 app icon, use Custom width to hit it exactly; the height follows the SVG’s aspect ratio automatically. If your SVG defines its size only through a viewBox and has no width or height attributes, the tool reads the viewBox to determine the base dimensions, so scaling still behaves predictably. And because the SVG is parsed, rendered, and exported entirely on your own device, you can convert confidential or pre-launch graphics without any of them ever leaving your browser.