Skip to content
user@convertitive:~$convertitive

SVG to PNG Converter

Drop an SVG or paste its markup, pick a size, download a PNG. Nothing leaves your browser.

SVG is resolution-independent — the same file renders crisply at 16 pixels or 16,000 — but plenty of the web still cannot cope with it. Email clients strip it, older CMSes refuse the upload, favicon pipelines want fixed-size bitmaps, and a designer handing assets to a non-design team often needs something that just opens everywhere. That is when you flatten a vector to a raster, and because the source has no fixed resolution, youget to choose the output dimensions. This tool renders your SVG through the browser's own rasterizer onto a canvas at exactly the size you specify, then encodes a PNG — with transparency preserved — without the file ever leaving your machine.

Drop an .svg file here, or

SVG up to 8 MB. Stays in your browser.

How to use

  1. Load your SVG

    Drag an .svg file (up to 8 MB) onto the dropzone, click to choose one, or paste raw SVG markup into the text box. Either way, the tool reads the width, height, and viewBox attributes to detect the intrinsic size.

  2. Set the output size

    Type an exact width or height in pixels — with the aspect ratio locked, the other dimension follows automatically — or hit the 1x, 2x, or 4x buttons to multiply the intrinsic size. For retina screens, 2x is the usual choice.

  3. Choose a background

    Transparent (the default) keeps the SVG's alpha channel intact in the PNG. Pick White or a custom color if the image will sit somewhere that doesn't handle transparency, like a JPEG-only workflow or certain email clients.

  4. Preview and download

    The result renders live on a checkered background so you can see exactly which areas stay transparent. Click Download PNG — the file is generated locally by your browser's canvas encoder and never uploaded anywhere.

Frequently asked questions

Does my SVG get uploaded to a server?
No. The SVG is turned into a local blob URL, rendered by your browser's own SVG engine into an off-screen image, drawn to a canvas, and encoded to PNG with canvas.toBlob() — all in JavaScript on your machine. There is no upload request at all.
Why is my SVG rendering at a weird size?
Many SVGs — especially icon exports — carry only a viewBox and no width/height attributes. Browsers displaying such a file in an <img> fall back to a default size (often 300×150, sometimes 0×0), which is why converters can produce oddly-sized output. This tool parses the SVG source directly: if width and height are present it uses them; if only a viewBox exists it takes the viewBox aspect ratio at a 512px default width; failing both, it falls back to 512×512. You can always override the detected size before exporting.
Why does text in my SVG look different in the PNG?
SVG <text> elements are rendered with whatever fonts the rasterizing browser has, and in the <img> context external webfont references are not fetched — so your carefully chosen typeface falls back to a generic browser font. If exact typography matters, outline the text in your design tool (convert text to paths) before exporting the SVG; paths rasterize identically everywhere.
Why don't embedded images or external CSS show up?
When a browser rasterizes an SVG inside an <img> element, it treats the file as a standalone document: external references — linked stylesheets, webfonts, and <image> tags pointing at other URLs — are not fetched, and cross-origin content can taint the canvas and block export entirely. The fix is to make the SVG self-contained: inline the CSS and embed any raster images as data: URIs.
Is transparency preserved?
Yes. PNG has a full alpha channel, and with the background set to Transparent, every area your SVG leaves unpainted stays transparent in the output. The checkered preview shows exactly where. Choose White or a custom color only when you deliberately want to flatten the backdrop.
What scale should I use for retina / high-DPI screens?
Export at 2x the size the image will be displayed at — a logo shown at 200×80 CSS pixels should be a 400×160 PNG. High-DPI screens pack roughly four physical pixels into each CSS pixel, so a 1x export looks soft on them. 4x is only worth it for print-adjacent uses; for normal web display it just quadruples the file size again.

About

How browsers rasterize SVG in an image context

Loading an SVG through an <img> element (or drawing it to a canvas) puts the browser's SVG engine in a restricted mode: scripts inside the file never execute, event handlers are ignored, and external resources — fonts, stylesheets, referenced images — are not fetched. The document is rendered as a pure, self-contained picture. That restriction is exactly what makes a client-side converter like this one safe to use with any SVG you find: even a malicious file is only ever treated as pixels, never as code. It is also the source of the tool's main limitation — anything the SVG pulls in from outside itself simply will not appear.

Choosing dimensions: rasterize big, downscale later

Scaling a vector up costs nothing, but scaling a raster up always degrades it. So the sound workflow is to rasterize once at the largest size any consumer will need — say, 4x the nominal design size — and produce smaller variants by downscaling that master PNG, which is a nearly lossless operation. Going the other way (exporting small, then enlarging) throws away detail the SVG could have provided for free. Since PNG is losslessly compressed, the only real cost of a generous export size is bytes on disk.

Sources & references

Authoritative references behind the math, constants, and tables on this page. Verified by Buğra Sözeri on the dates shown and re-checked at every deploy.