SVG → PNG / JPG

about this tool

How an SVG becomes pixels

Drop SVG files or paste markup, and each is drawn by the browser onto a canvas at the size you choose and encoded as PNG, JPEG or WebP. To get the size right the tool first reads the drawing's own size the way a browser does: the width and height attributes in any CSS unit (px, mm, pt, in…), or the viewBox when they are missing or in percent, or the browser's 300 × 150 default when there is nothing — flagged as assumed, because the result is probably not what you want. It then rewrites the root element with the pixel size, adds a viewBox when there was none so the content scales rather than clips, and adds the SVG namespace when it is missing, since an image element will not decode an SVG without one.

Sizes

Scale by ×1 to ×4 (or any factor; ×2 is the default, for high-density screens, named icon@2x.png), or give a width or a height and let the other side follow the drawing's ratio, or set both sides exactly — with a warning when that stretches the drawing. Each side is capped at 8192 px, the size browsers reliably allow a canvas to be; a request beyond it is refused with the numbers rather than producing a blank image.

Formats and backgrounds

PNG is lossless and keeps transparency; WebP is smaller and keeps it too; JPEG has no transparency and is filled with a background colour, white by default. PNG and WebP can be filled as well. Lossy formats take a quality setting.

What the browser cannot draw

An SVG rendered as an image runs in a sealed box: external fonts, images and stylesheets referenced by URL do not load, scripts do not run, and <foreignObject> content is skipped. The tool inspects the markup and lists what applies — text that will fall back to a local font, linked files that will be missing — so a surprise in the output has an explanation next to it. The fix is to embed fonts and images as data URIs, or convert text to outlines in the editor.

Limits

The output is only as good as the browser's SVG renderer, which handles SVG 1.1 well and parts of SVG 2 and CSS filters unevenly; compare against your editor for anything exotic. Animations render their first frame. Files are rendered one after another and previewed for the first item; a large batch takes a moment. Nothing is stored.

Optimising the source first usually gives a cleaner render and a smaller file — SVG optimizer does that. For raster-to-raster work, use the image format converter.

questions

What size will the PNG be?

By default twice the SVG’s own size — a 64 × 64 icon becomes 128 × 128, named icon@2x.png — which is what a high-density screen needs. Choose a scale of ×1 to ×4 or type one, or give a width or height and the other side follows the drawing’s ratio, or set both sides exactly. The SVG’s own size comes from its width and height attributes in any CSS unit, or its viewBox.

Why is my text in the wrong font?

When a browser draws an SVG as an image it cannot load external fonts or files, so text falls back to a local font and linked images are missing. Embed the font or the image as a data URI inside the SVG, or convert the text to outlines in your editor, and it will render as designed.

Why does JPEG have a white background?

JPEG has no transparency, so anything transparent in the SVG has to be filled; white unless you pick another colour. PNG and WebP keep transparency, with a switch to fill them too.

Is there a maximum size?

Each side is limited to 8192 px, which is what browsers reliably allow for a canvas; a 24-megapixel export is fine. The tool tells you when a scale would exceed the limit rather than producing a blank image.

Is the SVG uploaded?

No. The browser itself draws the SVG onto a canvas and encodes the PNG, JPEG or WebP; the file never leaves the page and nothing is stored.