SVG to PNG Converter

The SVG to PNG Converter rasterizes vector artwork into a PNG at the exact pixel size you choose. It accepts raw SVG markup pasted into the text area or an uploaded .svg file, shows a live preview of both the source and the result, and lets you keep transparency or flatten onto white. Because SVG is resolution independent, the converter re-renders the graphic at the target dimensions before drawing it to the canvas, so a larger export is sharp rather than an upscaled blur.

Converting an SVG in Four Steps

1. Add the SVG. Paste the markup into the text area or click Upload .svg File and pick a file. The preview renders as soon as the markup contains an opening svg tag.
2. Check the live preview and the detected size. The width and height fields are filled automatically from the file whenever you paste or upload.
3. Adjust the output. Type new pixel dimensions to scale the raster, and tick the white background option if you do not want transparency.
4. Convert and download. Click Convert to PNG, review the rasterized preview, then click Download to save the file.

How Output Size Is Determined

The tool resolves a size for each side independently, in this priority order:

1. A numeric width and height attribute on the svg tag. A unit such as px is fine; a percentage is ignored.
2. The viewBox width and height, used per side when the matching attribute is missing.
3. The SVG specification default of 300 by 150.

Detected values are rounded to whole pixels and clamped to a minimum of 1, since a canvas cannot have a fractional dimension. After detection you can overwrite either field, and the conversion uses whatever those fields contain.

The two dimensions are used exactly as entered, so the tool does not preserve the aspect ratio on its own. If the source artwork is 200 by 100 and you set the output to 400 by 100, the result is stretched horizontally to double width at the same height. Divide or multiply both numbers by the same factor to scale proportionally. The raster itself is produced with the Canvas API: the browser renders the SVG at the requested size, draws it onto a canvas of that many pixels, and exports the canvas as a PNG blob you can download.

Worked Examples

Source SVG	Detected size	Notes
width=“24” height=“24” viewBox=“0 0 24 24”	24 x 24	Attributes win; enter 48 x 48 for a 2x export.
viewBox=“0 0 100 50”, no width or height	100 x 50	Both sides fall back to the viewBox.
width=“100%” viewBox=“0 0 300 150”	300 x 150	The percentage is unusable, so the viewBox supplies the size.
No width, height, or viewBox	300 x 150	The spec default is the last resort.

Filenames are slugged as well: Company Logo v2.svg becomes company-logo-v2.png, icon_final(1).svg becomes icon-final-1.png, and markup with no filename downloads as image.png.

Transparency and Background

By default the canvas is cleared to transparent, drawn on, and exported as a PNG with an alpha channel, so the artwork composites onto any page color. Ticking the white background checkbox fills the entire canvas with #ffffff before the graphic is drawn, producing an opaque image. There is no other background color picker and no option to export JPEG or WebP; the output is always PNG. PNG is lossless, so a complex SVG can produce a fairly large file, which is where a separate image compressor helps.

What Rasterizes Reliably (and What Doesn’t)

Shapes, paths, inline fills and strokes, gradients, clipping paths, inline style blocks, and images embedded as base64 data URIs usually render faithfully. The following are the usual sources of trouble:

• External references. Linked images, remote fonts, and external stylesheets are not fetched from a blob-loaded SVG, so those elements disappear.
• Live text. Text is drawn with whatever fonts the browser can resolve; a webfont that is not embedded falls back to a default face. Convert text to paths when the exact typeface matters.
• foreignObject. HTML embedded inside SVG renders inconsistently across browsers and may be dropped entirely.
• Filters and advanced CSS. Some filter effects and CSS features are browser-dependent, so test the result on your target browsers.
• Canvas tainting. If an external image ever does load, it can taint the canvas and make the PNG export fail; the tool surfaces a conversion error in that case.

Common Mistakes

• Forgetting to embed assets. The most common cause of a half-empty PNG is artwork that references external files.
• Changing only one dimension. There is no aspect-ratio lock, so editing width without height stretches the image.
• Expecting a scale factor. For 2x you must double both numbers; there is no dedicated multiplier.
• Pasting a percentage-sized SVG and expecting the rendered width. It resolves to the viewBox or to 300 by 150, not to your page width.
• Treating the preview as pixel-accurate. The on-screen preview is scaled to fit the page; the exported PNG uses the numbers in the fields.
• Assuming batch mode exists. Each conversion handles one SVG.

Related Tools

• Image Compressor — compress and resize PNG/JPEG images in-browser.
• Favicon Generator — generate multi-size favicon PNGs for your site.
• Image Format Converter — convert PNGs to JPEG, WebP, and other formats.
• Image to Base64 — convert images to Base64 data URIs.