Make the PNG
you meant to make.

Written by Jianming Duan · Updated October 18, 2026

A PNG is a grid of pixels. An SVG describes shapes in a coordinate system. This converter asks the browser to draw those shapes into a canvas at your chosen pixel dimensions, then saves the canvas as a PNG. Your editable SVG stays unchanged.

A checkable first export

Paste this SVG into the converter. Choose width 200, height 100 and a transparent background, then create and download the PNG.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 50">
  <rect x="20" y="10" width="60" height="30" fill="#6852b8"/>
</svg>

The result should be 200 × 100 pixels. Its center is purple (#6852b8), while the corners are transparent. Choose solid white and export again: the corners should be white, while the rectangle stays purple. The checkerboard is part of the preview only.

Pixel dimensions and proportions

The root SVG’s positive pixel width and height define the original viewport when both exist. Otherwise, the converter uses the width and height from its viewBox. For example, viewBox="0 0 100 50" describes a 2:1 viewport; at 2× it exports as 200 × 100 pixels.

“Keep original proportions” changes the other dimension as you edit one. After pasting new source, use “Read dimensions from SVG” to refresh its original ratio. The 1×, 2× and 3× buttons always start from the original viewport. If you unlock proportions, SVG’s own preserveAspectRatio setting controls how the shapes fit inside the new rectangular output; an SVG may add empty space rather than stretch.

A viewBox also defines the visible region. Content outside it can be cropped. This tool does not automatically trim empty margins or rewrite an illustration’s geometry. Change the viewBox in your editor if you need a tighter crop.

What the converter accepts

Why some files are rejected

This is a defined subset of static SVG, not a renderer for every SVG feature. The converter rejects scripts, event handlers, external or data resource URLs, embedded images, stylesheets, foreignObject, use/symbol copies, animation, masks, patterns, markers, filters and nested SVG viewports. Non-rendering editor metadata, unused standard namespace declarations, and class, role, aria-*, data-* and enable-background attributes are stripped. Other unknown elements and attributes are reported instead of silently discarded.

For Illustrator, export with Styling set to Presentation Attributes; style blocks remain unsupported. Inkscape editor metadata and unused standard namespaces are removed automatically. Expand linked copies, convert text to paths, and replace unsupported effects with ordinary shapes. If you need photographic images or complex effects, export a PNG directly from the editor. Do not simply delete important markup and assume the result will look the same.

Fonts are part of the artwork

An SVG with text may ask for a font that the device does not have. Browser image rendering can substitute a fallback, changing line lengths, spacing and appearance. Remote fonts and embedded font resources are not loaded here. A successful export therefore does not prove font fidelity. Compare the preview, or convert text to paths before conversion.

Transparent is not the same as white

Transparent output leaves unpainted pixels transparent. It does not erase white shapes already present in the SVG. Solid color paints your chosen background before drawing the SVG. Transparent PNGs can look different in a viewer that displays them on black or white.

Source notes

The implementation uses the browser’s image and Canvas APIs. MDN explains the restrictions for SVG used as an image and the Canvas toBlob method. Those platform references explain the mechanism; this converter applies the narrower feature rules above. Limits and rejection messages describe this tool, not the entire SVG standard.