SVG to PNG
Convert SVG to PNG at any size — scale, width, or height, keeping transparency.
Rendered locally — your SVG never leaves this browser.
What is SVG to PNG?
SVG to PNG rasterizes an SVG file or pasted markup into a PNG at exactly the size you need — by scale factor (2× for retina), exact width, or exact height, with the aspect ratio preserved. Keep the transparent background or flatten onto a solid color. A free SVG to PNG converter that runs in your browser.
Key features
- Convert an .svg file or pasted SVG markup
- Size by scale factor, exact width, or exact height
- Aspect ratio preserved automatically from the source
- Keep transparency or flatten onto a chosen background color
- Reads width/height attributes or falls back to the viewBox
SVG to PNG — rasterize vectors at any size
SVG scales infinitely, but plenty of places refuse it: social-share previews, most email clients, older apps, and image fields that only accept raster formats. This tool rasterizes an SVG into a PNG at exactly the pixel size you specify, drawing it on a <canvas> in your browser — your file is never uploaded, so even confidential logos and diagrams stay on your device.
Choosing the output size
You add the SVG by choosing a file or pasting the markup, then pick one of three sizing modes:
- Scale multiplies the SVG's intrinsic size by a factor — set 2 or 3 to export crisp assets for retina/high-DPI screens.
- Width renders to an exact pixel width and computes the height from the aspect ratio.
- Height does the same from a target height.
The default is a 512 px width. Whichever mode you choose, the aspect ratio is preserved automatically, so nothing comes out stretched.
How the base size is determined
To know the SVG's starting proportions, the tool reads the root element's width and height attributes first. If those are missing, it falls back to the viewBox dimensions — which is why an icon that only declares a viewBox still exports at the right shape. If an SVG has neither width/height nor a viewBox, there's nothing to measure, so it defaults to 512 × 512.
Transparency or a solid background
Leave Transparent background on to keep the SVG's transparency in the PNG. Turn it off and pick a color to flatten the artwork onto a solid fill — useful when the final surface isn't white, or when a downstream tool won't accept transparency.
The gotcha: external fonts and images
This is the one that surprises people. The SVG is rendered through an image element loaded from a local blob URL, and for security the browser won't fetch external resources during that render. So a @font-face that points at a remote font URL, an <image> referencing a remote file, or an external stylesheet won't load — text can fall back to a default font, and remote images can vanish. The fix is to make the SVG self-contained before converting: convert text to outlines/paths, or inline fonts and images as data: URIs. Text set in a font that's simply installed on your system will render, but don't rely on that for assets you'll reuse elsewhere.
Output
Click Convert to PNG to render and preview the result; the panel shows the exact output dimensions, and Download saves it as image.png. Everything — parsing, drawing, and encoding — happens locally on your device.
One direction this tool can't go is backward: a PNG is a grid of pixels, so it can't be turned back into an editable SVG here. Keep your .svg as the source of truth and re-export a fresh PNG whenever you need a different size, rather than scaling up a PNG you already made and losing sharpness.
Frequently asked questions
- My text or fonts disappeared in the PNG — why?
- The SVG is rendered through an image element loaded from a local blob URL, and for security the browser won't fetch external resources during that render. So a font referenced by a remote @font-face URL, or an external image, won't load. Fix it by making the SVG self-contained first: convert text to outlines/paths, or embed fonts and images as data: URIs.
- How do I export a sharp image for retina screens?
- Use Scale mode and set the factor to 2 or 3, which multiplies the SVG's intrinsic size for high-DPI displays. Alternatively, use Width or Height mode and enter the exact pixel dimension you need; the aspect ratio is preserved automatically either way. The default is a 512 px width.
- What size does it use if my SVG has no width or height?
- It reads the root width and height attributes first, then falls back to the viewBox dimensions, which is why an icon that only declares a viewBox still exports at the right shape. If the SVG has neither, there's nothing to measure and it defaults to 512 by 512 pixels.
- Can I put a solid background behind a transparent SVG?
- Yes. Turn off Transparent background and pick a color to flatten the artwork onto a solid fill, useful when the final surface isn't white or a downstream tool won't accept transparency. Leave it on to keep the SVG's transparency in the PNG.
- Is my SVG uploaded anywhere?
- No. Parsing, drawing on a canvas, and encoding to PNG all happen locally in your browser, so confidential logos and diagrams never leave your device. You can paste raw SVG markup or choose a file, and the result downloads as image.png.
Privacy
Rasterizing the SVG is done locally using the browser's own rendering engine; the file you provide is never uploaded.
