SVG to PNG Converter

Convert SVG to PNG, JPEG or WebP in your browser. Set a scale or exact pixels, keep transparency, batch files into a ZIP. Missing xmlns fixed; nothing uploaded.

Runs in your browser
Your data never leaves your browser
Free · No Sign-Up

Size At 1x the image has the size written on the root element of the SVG; with only a viewBox, the viewBox size; with neither, 300 × 150. Scale takes any number above 0. Width and Height take a whole number of pixels from 1 to 65,535 and work out the other side from the aspect ratio. Width × height sets both sides; when the ratio differs from the SVG, the drawing is placed as its preserveAspectRatio says. A side can be at most 65,535 px, within the canvas limit of the browser.

Scale

Format JPEG and WebP show a Quality box: a whole number from 1 to 100, and 92 when it is empty or out of range. JPEG has no transparency, so with a transparent background the transparent areas are filled with white. When the browser cannot encode the chosen format, the file is saved in the format the browser returns and a note under the preview says so.

Background Transparent keeps the transparent areas of the SVG in PNG and WebP. White and Color paint the background first and draw the SVG on it. With JPEG, Transparent becomes white. With a transparent background, a result of up to 4,194,304 pixels is checked and a fully transparent one gets a note.

Drop SVG files here, or click to choose Several files are converted with the same settings. Files stay in your browser.

SVG code Drop .svg files anywhere on the tool, or click the box above to choose them. Several files are converted with the same settings; files that are not SVG are skipped and listed. Type or paste SVG code here, then press Convert or Ctrl/⌘+Enter. Outside a text field, Ctrl/⌘+V converts SVG code or an SVG file from the clipboard right away. Compressed .svgz files cannot be read.

Result Shows the pixel size, the file size, a preview and the download button. The file keeps the name of the SVG: a scale other than 1 adds a suffix such as @2x, the other size modes add -WIDTHxHEIGHT, and pasted code is saved as image. The notes under the preview list what was added and which references were not loaded. With several files, click a name in the file table to preview that file; each row has its own download, and Download all (.zip) saves svg-to-png.zip.

Drop an SVG, or paste code and press Convert. The image size, the preview and the download button appear here.

Examples, details and FAQ Worked examples, how it compares with other tools, and answers to common questions.

How the output size is worked out

At 1x the PNG has the size the SVG declares on its root element. Units follow CSS absolute lengths (1in = 96px, 1mm = 96/25.4px). The sizes below match what Chrome reports as the natural size of the same file in an <img>, except the viewBox-only row, where Chrome uses 300 × 150.

Root element	PNG at 1x
`width=“120” height=“60”`	120 × 60
`width=“200” viewBox=“0 0 24 12”`	200 × 100 (height follows the viewBox ratio)
`viewBox=“0 0 24 24”` only	24 × 24
`width=“50mm” height=“25mm”`	189 × 94
`width=“10em” height=“5em”`	160 × 80 (1em = 16px unless the root sets `font-size`)
`width=“100%” viewBox=“0 0 200 100”`	200 × 100 (percentages depend on a page, so the viewBox is used)
no width, height or viewBox	300 × 150

Before drawing, the tool writes the output size into the SVG’s width and height and adds a viewBox if there is none, so the browser renders the vector at the final resolution instead of stretching a small bitmap. With Width × height and a different aspect ratio, the drawing is placed the way its preserveAspectRatio says (centered by default) and the rest stays background.

Examples

These were run in the tool on 2026-09-30 in Chrome 152 on macOS; file sizes depend on the drawing.

Input	Settings	Output
Download icon, `viewBox=“0 0 24 24”`, stroked paths	Scale 4x, transparent	`download-icon@4x.png`, 96 × 96, 1,483 bytes
Logo, `viewBox=“0 0 240 80”`	Width × height 1280 × 640, white	`logo-1280x640.png`, 1280 × 640, 42,471 bytes; the logo is centered with white bands above and below
A4 poster, `width=“210mm” height=“297mm”`	Scale 1x, then 2x	794 × 1123 (41,880 bytes), then 1587 × 2245 (116,954 bytes)

The second row is a repository social preview. GitHub asks for a PNG, JPG or GIF under 1 MB and recommends 1280 × 640 px, so a wide logo needs the exact-size mode plus a background color.

What the tool fixes and what it reports

Missing xmlns. Inside HTML an <svg> needs no xmlns, so code copied from a web page or a React component often lacks xmlns=“http://www.w3.org/2000/svg”. A standalone file without it does not open as an image; the tool adds it, and adds xmlns:xlink when xlink:href is used.
External references. An SVG drawn as an image runs in the secure animated mode of SVG Integration: no scripts and no external files. In Chrome an external <image> is then painted as a broken-image icon, so the tool removes those links and lists them. External <use> targets, CSS @import and web fonts are listed too.
XML errors. The message gives the line and column and says what is wrong in the page language: for example an attribute quote that is not closed, an element closed by the wrong end tag, or   (an HTML entity, not XML) in text.
<foreignObject>. Chrome refuses to export a canvas that has drawn HTML inside SVG. The tool says so instead of producing nothing.
Empty output. A fully transparent result is flagged; it usually means the drawing lies outside the viewBox.

To shrink the SVG first, run it through the SVG Optimizer. For a React component use SVG to JSX, for a full icon set with ICO and apple-touch-icon use the Favicon Generator, and to inline the PNG in CSS or HTML use Image to Base64.

How it compares with other converters

Tested on 2026-09-30 in desktop Chrome with the same files. “Width-only” is width=“200” viewBox=“0 0 24 12”, which should give 200 × 100 at 1x.

Converter	Width-only SVG	No `xmlns`	External `<image>`	`<foreignObject>`
svgtopng.com (default 2x)	400 × 24, squashed	”Processing failed”	Dropped, no message	Transparent PNG, no message
CloudConvert	200 × 12, squashed	Uploads the file to `us-east.storage.cloudconvert.com` before converting
This tool	200 × 100	xmlns added, converted	Removed and listed	Error that names the cause

svgtopng.com also converts in the browser and accepts up to 20 files; CloudConvert handles formats a browser cannot draw. Neither says when part of the drawing was lost.

Limits

Rendering is the browser’s own SVG engine, so output can differ slightly between Chrome, Firefox and Safari, mostly in text antialiasing and filters.
Text uses fonts installed on your device unless the font is embedded as a data: URI. A PNG made on another computer can use a different font.
<foreignObject> cannot be exported in Chrome (tested in version 152) or Edge, which uses the same engine.
Animated SVG (SMIL <animate>) is saved as its first frame.
A browser that cannot encode WebP from a canvas returns PNG instead; the tool saves that PNG and says so.
The largest output is 65,535 px per side and whatever area your browser’s canvas allows (see the FAQ).
.svgz (gzip-compressed SVG) is not supported; decompress it first.

Batch conversion on the command line

For many files or a build step, the Node.js library sharp converts SVG with librsvg. Tested with sharp 0.34.5 (librsvg 2.61.2) on a viewBox-only 24 × 24 icon:

import sharp from 'sharp'; // npm install sharp

await sharp('icon.svg').resize(512, 512).png().toFile('icon-512.png');   // 512 × 512
await sharp('icon.svg', { density: 288 }).png().toFile('icon@4x.png');   // 4 × the SVG size

Without resize or density the PNG is the SVG’s own size (24 × 24 here). The default density is 72, so density: 288 gives 96 × 96. librsvg is a different renderer from the browser: text that depends on web fonts or CSS @import can come out differently, so compare one file with this page before converting a whole folder.

FAQ

Why does my 24 × 24 icon come out as a tiny PNG?

An SVG with only a viewBox has no pixel size of its own, so 1x means the viewBox size: viewBox="0 0 24 24" gives 24 × 24 px. Choose a scale such as 4x, or switch Size to Width and type the pixels you need. The drawing is rendered again at that size, so edges stay sharp.

Is the transparent background kept?

Yes for PNG and WebP when Background is Transparent. JPEG has no alpha channel; the HTML standard says a canvas exported to such a format is composited onto black, so the tool fills transparent areas with white instead and tells you so. Pick a background color if you want another one.

Why is a picture or a web font missing from the PNG?

The browser renders the SVG as an image, and in that mode it does not load anything outside the file: external <image> links, <use href="other.svg#id">, CSS @import and web fonts. The tool lists every such reference under the preview. Embed pictures and fonts as data: URIs to keep them; text otherwise uses a font installed on your device.

Are my SVG files uploaded?

No. The file is read and drawn inside this browser tab and the PNG is created there. Scripts and event handlers in the SVG do not run, because the SVG is drawn as an image. You can disconnect from the network after the page loads and the converter still works.

How large can the output be?

Up to 65,535 px per side, within your browser's canvas limit. Desktop Chrome allows 268,435,456 pixels (16,384 × 16,384); iPhone and iPad allow 4,096 × 4,096. Above the limit the tool shows an error instead of saving an empty image.