Skip to content
convertitiveLog in

SVG to PNG Converter — Free, Browser-Only

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

SVG is resolution-independent, while PNG is a fixed-size raster image. When a recipient, CMS, favicon workflow, or document needs a bitmap, you can rasterize the vector at the pixel dimensions that workflow expects. This tool accepts an SVG file or pasted SVG markup, renders it through the browser's SVG engine onto a canvas, and encodes one PNG locally. Transparent areas remain transparent unless you choose white or a custom background color; the source never leaves 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.

Continue preparing your image asset

Keep SVG when the destination supports scalable vectors. Export PNG when a fixed bitmap is required, then resize or compress the result if needed.

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 carry only a viewBox and no width/height attributes. This tool reads width and height when they are positive pixel values; otherwise it uses the viewBox aspect ratio at a 512px default width, or falls back to 512×512 when neither is available. You can override the detected width and height 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?
A 2× export is a practical starting point when a raster image will be displayed at a known CSS size—for example, 400×160 pixels for a logo shown at 200×80 CSS pixels. Use 1× when file size is the priority, and choose 4× only when the consuming workflow benefits from a larger raster. Larger dimensions also increase the PNG byte size.

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 verified by Buğra Sözeri.