SVG to PNG Converter (also converts to JPG)
Convert an SVG file or pasted SVG code to a PNG or JPG image for free. Choose the exact output size you need — everything runs entirely in your browser.
PNG or JPG — which should you choose?
| Format | Characteristics | Best for |
|---|---|---|
| PNG | Lossless compression with no quality loss, and it keeps a transparent background intact. | Logos, icons, and illustrations where you need transparency or crisp edges |
| JPG | Lossy compression that keeps file size small, but transparent areas get filled with your chosen background color. | Images with a photographic background, or when minimizing file size matters most |
What is the SVG to PNG converter?
The SVG to PNG converter lets you turn an SVG (vector image) file or pasted SVG code into a PNG or JPG image at a pixel size of your choosing. SVG is widely used for icons, logos, and illustrations, but there are plenty of situations — uploading to a web form, or displaying in an app or older environment that does not support SVG — where you need a conventional image format instead. This tool bridges that gap in seconds.
The conversion runs entirely client-side using the browser's Canvas API, so your SVG file or code is never sent to a server. Because SVG is a vector format, the pixel size at export time needs to be decided somewhere; this tool detects a sensible default from the SVG itself and lets you adjust it freely.
How to use it
- Load your SVG Choose a file (drag & drop works too), or paste SVG code directly.
- Pick an output format Choose PNG (keeps transparency) or JPG (fills transparency with a background color).
- Adjust the output size Type a width/height directly, or use the scale buttons (1x/2x/4x) to change both at once.
- Convert and download Click "Convert" to see a preview, then download it right away.
Tips for getting more out of it
- If your SVG has no width/height attributes or viewBox, the initial output size defaults to 512×512px. You can change it to whatever size you need.
- The scale buttons (1x/2x/4x) multiply the size detected from your SVG at once — handy for exporting icon sets at 2x/4x for Retina (high-DPI) displays.
- Choose PNG if you need to keep a transparent background. JPG has no alpha channel, so any transparent area gets filled with the background color you pick (white by default).
- Complex gradients and filter effects in your SVG are rendered as your browser sees them. If the SVG references external fonts or images, they only render correctly if your browser can actually load them.
- Keep "Lock aspect ratio" checked to change width or height while preserving proportions. Uncheck it to set width and height independently.
Use cases
Rasterizing icons and logos
Convert an SVG icon exported from a design tool to PNG before embedding it in a system or app that does not support SVG.
Uploading to web forms
Many forms and services do not accept SVG uploads — convert to PNG/JPG ahead of time to work around that.
Exporting multiple sizes for Retina displays
Use the scale buttons to quickly generate 1x/2x/4x versions for a high-DPI icon set.
Pasting into social media or slides
Convert to a conventional image format for platforms and slide decks that will not accept an SVG directly.
Glossary
- SVG (Scalable Vector Graphics)
- A vector image format that describes shapes as coordinates and paths in XML text. It never looks jagged when scaled up or down.
- Rasterize
- The process of converting a vector image into a grid of pixels (a raster image) at a specific size.
- viewBox
- An SVG attribute that defines the coordinate range its content occupies internally. Used as a fallback for dimensions when width/height are absent.
- Alpha channel
- The transparency information stored per pixel in an image. PNG preserves it; JPG has none, so transparent areas get filled with a background color on conversion.
- Canvas API
- The browser's standard JavaScript interface for drawing and manipulating images. This tool rasterizes SVG using only the Canvas API, with no extra library required.
Frequently Asked Questions
Side Note — an SVG is really just a text file written in XML
Unlike PNG or JPG, which store an image as a grid of pixels, SVG (Scalable Vector Graphics) describes shapes as mathematical coordinates and paths written in XML text. That is why it scales up or down without ever looking jagged, and why you can open one in a plain text editor and read its contents directly. This structure is exactly why SVG is the format of choice for logos and icons that need to look sharp at many different sizes.
SVG has no inherent notion of "resolution" — it is stored purely as a vector description. Whenever you rasterize it into a conventional pixel-based format like PNG or JPG, something has to decide the pixel dimensions to render at. That is precisely why this tool lets you specify width and height: it is a direct consequence of what SVG fundamentally is.
Plenty of real-world SVG files omit width/height attributes altogether, or express them in relative units like percentages. For those cases, tools commonly fall back to the viewBox attribute, which defines the coordinate range the SVG content occupies internally. This tool follows the same convention, using viewBox as a stand-in for pixel dimensions whenever width/height are missing.