Skip to content

Convert SVG to PNG

Rasterise SVG to PNG at any scale or exact pixel width. Transparent or solid background, batch input, rendered entirely in your browser.

  • Runs in your browser
  • Files are never uploaded
  • Free, no account
Drop SVG files herePick a scale or an exact width below, then download the PNG.SVG · up to 250 MB each
Output settings
Everything is encoded to PNG on this device. PNG is lossless, so there is no quality trade-off.

Off keeps the alpha channel. Turn it on to paint a solid background behind transparent pixels.

Raster size for vector (SVG) input

Aspect ratio is always preserved. SVGs with no width/height attributes are measured from their viewBox.

Metadata is stripped. Re-encoding rebuilds the file from raw pixels, so EXIF — GPS coordinates, camera model, serial number, capture time — and any XMP or IPTC block are dropped. Pixels are written in sRGB.

Nothing leaves this tab. The encoders are WebAssembly builds of libjpeg-turbo (MozJPEG), libpng/oxipng, libwebp and libavif running inside a worker on your machine.

How to convert SVG to PNG

  1. Drop your .svg files onto the box above. Batches are fine — every file uses the same size setting.
  2. Choose how big the PNG should be. Scale factor multiplies the SVG's own dimensions (2× is the usual choice for retina assets). Fixed width or fixed height pins one dimension and derives the other from the aspect ratio.
  3. Leave the background transparent, or switch it on and pick a colour.
  4. Save each PNG, or download the batch as a ZIP.

The SVG is rendered by your browser's own SVG engine — the same one that draws it on a web page — into a canvas at the size you asked for, and the resulting pixels are encoded as PNG. Nothing is uploaded, and no external resources are fetched.

Why size is a decision, not a property

An SVG has no pixels. It is a set of drawing instructions, so it can be rendered at any resolution with identical sharpness. That is its whole advantage — and it means "convert this to PNG" is incomplete until you say how large. The tool works out a sensible starting point from the file itself:

What the SVG declares Intrinsic size used
width="512" height="512"512 × 512 px
width="4cm" height="3cm"Converted at 96 dpi → 151 × 113 px
viewBox="0 0 24 24" only24 × 24 px
width="100%" plus a viewBoxThe viewBox dimensions
Neither width/height nor viewBoxThe CSS default, 300 × 150 px

Icon sets are the classic trap: a 24 × 24 viewBox rendered at 1× gives you a 24-pixel PNG. Set a fixed width, or a scale factor of 16 or more, when exporting icons for anything other than their native size.

Common export sizes

Purpose Recommended output
Favicon source512 × 512 px, transparent
App icon (iOS / Android)1024 × 1024 px, opaque background
Website logo, retina2× or 3× the CSS display width
Slide deck or document2× the placed size, transparent
Social sharing image1200 px wide, solid background
Print at 300 dpiPhysical inches × 300 as the fixed width

Things that can render differently than expected

  • Fonts. Text drawn with a font-family that is not installed on your machine falls back to a default. Nothing is downloaded, because the tool never touches the network. Convert text to outlines in your editor for a guaranteed match.
  • External images. An SVG that links to a remote bitmap renders that region blank. Embed the image as a data: URI first.
  • CSS from the surrounding page. Styles that live outside the SVG file do not apply. Only what is inside the file is rendered.
  • Filters and blend modes. These render exactly as your browser draws them, which is usually correct but can differ subtly between browsers.
  • Very large outputs. Canvas has a hard limit around 16384 px per side; the tool refuses a scale that would exceed it rather than silently producing a blank image.

Need a different raster format? The universal image converter also accepts SVG and can write JPG, WebP or AVIF. For a flattened photo-style export, PNG to JPG is the natural next step.

Questions

What size will the PNG be?

Whatever you choose. Scale mode multiplies the SVG’s own width and height — 2× is right for retina assets — or you can set an exact output width or height and the other dimension follows the aspect ratio.

My SVG has no width or height attribute. What happens?

The viewBox is used instead, which is how browsers themselves size such files. If there is no viewBox either, the CSS default of 300 × 150 px applies, so set an explicit output width to be sure.

Why do my fonts look wrong in the PNG?

An SVG that references a font by name renders with whatever your system has installed, and nothing is downloaded because the tool never touches the network. Convert text to paths in your editor before exporting for a guaranteed match.

Is the background transparent?

By default yes — PNG keeps the alpha channel, so unfilled areas stay transparent. Switch on the background option to composite the artwork onto a solid colour instead.

Does it work with SVGs that link to external images?

Only if the images are embedded as data: URIs. Remote references cannot be fetched offline, so those parts render blank — which is the price of never sending your file to a server.