SVG to PNG — Rasterise a Vector at Any Size
Render an SVG to PNG, JPG or WebP at whatever pixel size you need. Drop in a file or paste the markup, pick a size or a multiplier, keep the transparency or drop in a background colour, and download. The rendering is done by your own browser, which is the same engine that would display the SVG on a website, so what you get is exactly what you would see.
SVG is the right format until something will not take it: an email client, a marketplace listing, a social preview image, an older CMS, a printer driver, a slide deck. At that point you need a bitmap at a specific size, and the usual options either cap the resolution, add a watermark, or upload your artwork. None of that is necessary — rasterising a vector is a job a browser does natively.
Pick the pixel size, not a vague quality setting
A vector has no resolution of its own; it has a coordinate system. Exporting at 2× or 4× is not upscaling and loses nothing — the shapes are redrawn at the larger size with clean edges. The size that matters is the one the image will be displayed at, doubled for high-density screens. A 512-pixel export of a 24-unit icon is perfectly sharp; a 24-pixel export of the same icon on a Retina display is not. The exact output dimensions are shown under the preview before you commit.
Transparency and the format you choose
PNG and WebP keep an alpha channel, so a logo exported from either will sit correctly on any background. JPEG has no transparency at all, and anything transparent becomes the background colour you choose — white by default, which is why a JPEG logo so often ends up with a white box around it on a coloured page. WebP produces noticeably smaller files than PNG at the same visual quality and is supported everywhere that matters now; PNG remains the safest choice for anything that will be handed to someone else.
Fonts and external references
An SVG that references a font by name renders with that font only if it is installed on the machine doing the rendering — yours. If the export shows a different typeface than your design tool did, the fix is to convert the text to outlines in the design tool before exporting the SVG. Images and stylesheets pulled from another website are blocked by the browser during rasterisation for security reasons; inline them as data URIs and they render normally.
Related: go the other way with PNG to SVG, build an icon set with the favicon generator, or shrink the export with the image compressor.
How to use SVG to PNG
- Drop in an .svg file, or open the panel underneath and paste the markup directly.
- Use a multiplier — 1×, 2×, 4×, 8× — or type exact pixel dimensions. The aspect ratio is kept unless you unlock it.
- Choose PNG, JPG or WebP. PNG and WebP can stay transparent; JPG always needs a background colour.
- Set the background colour if you are exporting JPG or have turned transparency off, and the quality if the format is lossy.
- Download. The filename includes the exported dimensions, which is useful when producing several sizes of the same asset.
Features
- Any output size — up to 8000 pixels on a side, with exact width and height or a simple multiplier.
- Three formats — PNG and WebP with transparency, JPG with a background colour of your choice.
- True vector rendering — the SVG is redrawn at the target size, not scaled up from a small bitmap.
- Paste markup as well as files — handy for an icon copied straight out of a component or a design tool.
- Chequerboard preview — see where the artwork is actually transparent before you export.
- Nothing is uploaded — unreleased logos and client artwork stay on your machine.
Frequently Asked Questions
Does exporting at 4× lose quality?
No. An SVG describes shapes, not pixels, so it is redrawn at whatever size you ask for with clean edges. Exporting larger is genuinely lossless, unlike enlarging a PNG.
Will the PNG keep its transparent background?
Yes, as long as you leave transparency on and export PNG or WebP. JPEG has no alpha channel at all, so transparent areas are filled with the background colour you pick — white unless you change it.
What size should I export?
The size it will be displayed at, doubled for high-density screens. A logo shown 200 pixels wide should be exported at 400; a favicon source is usually 512. Exporting far larger than needed only makes the file heavier.
The text looks wrong in the export.
The SVG references a font by name and your browser does not have it, so it substituted another. Convert the text to outlines or paths in the design tool before exporting the SVG, and it will render identically everywhere.
Nothing rendered, or part of the image is missing.
The SVG almost certainly pulls an image or a stylesheet from another website. Browsers block those during rasterisation for security reasons. Inline the referenced assets as data URIs and it will render completely.
Is the file uploaded to a server?
No. The SVG is rendered by your own browser onto a canvas and the result is saved locally. Nothing is transmitted, so unreleased branding and client artwork stay private.
Why did it pick that default size?
From the SVG itself — its width and height attributes if it has them, otherwise its viewBox. An SVG sized in percentages has no intrinsic pixel size, so a sensible default is used and you should set the dimensions you actually want.