Convert SVG to PNG Online

rasterise SVG to PNG at any size · batch · transparency preserved · renders fonts, filters & gradients

Convert SVG to PNG at exactly the size you need — set width and/or height, or leave one blank to keep aspect ratio. Everything runs in your browser, so files never upload, and the page renders the SVG with full fidelity (gradients, filters, CSS, embedded fonts) before capturing a crisp, transparent PNG. Setting the target size up front is far sharper than rasterising small and upscaling — or skip the pixel fields and just set a scale (×2, ×3) for a quick retina export.

Drop SVG files here

Multiple files allowed

Width (px) — blank = source width Height (px) — blank = source height Scale × (retina export)

no files

Ready.

Common output sizes

Favicon source: 512×512 or 1024×1024 → drop into Favicon kit.
iOS app icon: 1024×1024.
Android adaptive icon: 432×432 foreground.
Slide deck asset: 1920×1080 max for full-screen, less for inline.
Print at 300 DPI: width = inches × 300 (e.g. 4 inch wide = 1200 px).
Retina @2x: twice the CSS display size.

Why rasterise at all?

Favicon generators, app icon tooling, and prepress shops want PNG.
Slide tools (Keynote, PowerPoint, Google Slides) render PNG more reliably than SVG.
Some CMSes won't accept SVG due to script-injection concerns.
Sharing previews (Slack, social) need a raster.

FAQ

How do I convert SVG to PNG without losing quality?

Set the output width/height to the largest size you'll actually use before exporting. SVG is vector, so it's scaled to your target and rasterised once — the PNG is crisp at any dimension (up to 8192×8192 here). Rasterising small and upscaling later is what looks blurry.

Will external fonts and images render?

Only if CORS allows it. For maximum portability, embed fonts as base64 inside the SVG (@font-face with data: URL) and inline any <image> references the same way.

What if the SVG has no width / height?

The browser falls back to a default size (usually 300×150). Pass explicit width and / or height in this tool to override.

Are SVG filters / blends applied?

Yes — the browser renders the SVG normally, including filters, gradients, masks, and CSS styles. The PNG captures what you'd see in a browser tab.

Result looks blurry — why?

Either the SVG itself is anti-aliased low-res content, or you set the output too small. SVG → PNG at the size you actually need is sharper than rasterising small then upscaling.