SVG → PNG Converter
Rasterize SVG to a PNG at any size, with transparent or solid background, all in the browser.
How to use
- Drop an SVG file or paste SVG markup.
- Adjust scale (1× matches the intrinsic size).
- Pick a background — transparent, white, or custom color.
- Click Download to save the PNG.
About this tool
ShowHide
Drop an SVG file or paste the markup, pick a scale and a background, and download a PNG. The intrinsic size is read from the root <svg> element only — a child's width or height is ignored — falling back to the viewBox when width and height are absent, and deriving the missing one from the viewBox aspect ratio when only one is present. With none of the three the tool assumes 200×200. Your scale multiplies that base and the result is rounded, so the file arrives named for its real pixel size.
The markup is handed to the browser through a blob URL and drawn into a canvas, which has a consequence worth knowing before you debug a missing logo: an SVG loaded as an image runs in the browser's secure static mode. Scripts inside it never execute, and external references — an <image> pointing at a URL, a linked stylesheet, a webfont fetched over the network — are not loaded at all. This is not a CORS handshake you can configure around; embed the bitmap as a data: URI and the font as a data: URI inside @font-face, or convert text to paths in your vector editor. The upside is that nothing external is ever fetched, so the canvas is never tainted and the download always succeeds.
The background is painted underneath the artwork before it is drawn, and the PNG always carries an alpha channel, so transparent really is transparent — which matters because an icon drawn in black on nothing is invisible against a dark interface until you give it a colour. Two last caveats: text is rasterised with whatever fonts the machine running the browser happens to have, so the same SVG can convert differently on two computers, and rasterising only goes one way. Enlarging the PNG afterwards interpolates what is already there; raise the scale and export again instead. Nothing is uploaded.
Frequently asked questions
Why is the output 200×200 by default?
If the SVG has no width / height / viewBox the tool falls back to 200×200. Add a viewBox or explicit dimensions to the SVG for a different default.
Some fonts look different in the PNG
Browsers rasterize SVG with the fonts available on the user's system. If your SVG uses a custom font, embed it as a data: URL or convert text to paths in your vector tool.
Is my SVG uploaded?
No. The SVG is parsed and rasterized in your browser via Canvas. Nothing is sent to a server.
Does it handle external images inside the SVG?
No, and not because of CORS — an SVG loaded as an image runs in the browser's secure static mode, where external references are never fetched at all, not even same-origin ones. Chromium then paints its broken-image glyph in the element's place, so the PNG comes out with a visible placeholder rather than a gap: a <image> pointing at a real URL and one pointing at a made-up domain rasterise to byte-identical pixels. Embed the bitmap as a data: URI inside the SVG and it draws normally.
What scale should I export at?
Match the density of the screens the image is for. 1x is the CSS pixel size, 2x covers most modern phones and laptops, 3x covers the densest phone displays. If the PNG is going into a document or a slide rather than an interface, exporting at 2x and letting it scale down is the safe default.
Why is my PNG blurry?
Because it was rasterised too small and then enlarged. The SVG itself has no resolution, so the sharpness of the PNG is decided entirely at export - raise the scale and export again rather than resizing the PNG afterwards, which can only interpolate what is already there.
Why does the PNG lose colours or styling from my SVG?
Because only what the file carries can be rendered. Styles that live in an external stylesheet, CSS custom properties inherited from the page, and fonts that are referenced rather than embedded are all unavailable once the SVG is rendered on its own. Inline the styles into the markup and convert text to paths, and the export will match what you designed.
Related tools
SVG Optimizer
Shrink an SVG with SVGO — strip editor cruft, round coordinates, merge shapes — and see before and after side by side. Nothing is uploaded.
Image
QR Code Generator
Create custom QR codes from any text or URL and download them.
Image
Maze Generator (SVG / PNG)
Generate printable mazes with adjustable size, cell scale, and reproducible seed — recursive-backtracking algorithm with optional solution overlay.
Random
Barcode Generator
Make an EAN-13, EAN-8, UPC-A, Code 128, Code 39 or ITF-14 barcode and download it as SVG or PNG. Runs in your browser.
Image
Image Duotone Effect
Apply a two-color duotone effect to any image — pick a shadow color and a highlight color, adjust midpoint and contrast, download the result.
Image
Image Compressor
Compress and resize JPEG, PNG, and WebP images in your browser.
Image
Markdown → HTML Converter
Convert Markdown to clean HTML — copy the source for emails, CMS pages, or anywhere a rendered preview isn't enough.
Text