SVG to PNG Converter

Rasterize SVG markup to a PNG at any size, scale or background — rendered by your own browser, never uploaded.

0 bytes uploaded

Size by

SVG markup

Paste the markup, drop an .svg file, or pick one — nothing is uploaded.

Output size

Scale

Custom scale

Width (px)

Height (px)

Lock aspect ratio

Pixel ratio

The pixel ratio multiplies the output in both modes: at 2 a 512 px width writes a 1,024 px PNG.

Background

Background color (#rrggbb)

PNG keeps an alpha channel, so transparent stays transparent — pick a solid color only if you want one painted in.

Also export 1×, 2×, 3× and 4×

PNG result

The rendered PNG appears here once the markup parses.

—

The stage shows the neutralized copy of your markup — the same copy the canvas rasterizes, so what you see is what downloads.

PNG keeps an alpha channel, so transparent stays transparent — pick a solid color only if you want one painted in.

0 B · 0 lines · Scalewaiting for markup

Press ? for shortcuts

Do it offline:$ sips -s format png --resampleWidth 512 icon.svg --out icon-512.png

How to use it

Paste markup into the source pane, drop a .svg file on it, or load the sample.
Choose Scale for a multiple of the drawing's own size, or Size to type an exact width.
Leave the background transparent, or pick a hex color to paint under the artwork.
Check the pixel figure under the stage, then download or copy the PNG.

Paste SVG markup, pick a size, and download the PNG. Multiply the drawing's own size by 1×, 2×, 3× or a typed number, or give an exact width and let the aspect lock solve the height. Transparency survives unless a color floods the sheet. Your browser draws it — nothing is sent anywhere.

How it works

A vector has no resolution, so the first job is deciding how many pixels to allocate. Absolute lengths convert at 96 units to the inch — a point is 4/3 of a pixel, a pica 16, a centimetre 96/2.54 — while a plain number already counts as pixels. A percentage or an em resolves to nothing here, so the viewBox proportion takes over.

The drawing is done by the machinery that puts an image on a page: the markup is neutralized, wrapped in a blob URL and handed to an image element, which browsers run without network access or scripting. Those pixels go onto a canvas of the planned size, which is why a linked font is missing rather than late.

Examples

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2 2 22h20Z" fill="#f97316"/></svg>

intrinsic 24 × 24 px · basis view-box · ratio 1
request   scale 4× · dpr 1 · background transparent
output    96 × 96 px · 9,216 pixels
file      triangle-96x96.png
N_RASTER_VIEWBOX_ONLY  This <svg> carries no width or height attribute, so its size was read from the viewBox: 24 × 24 px at 1×.

A 24-unit glyph with no size of its own: the viewBox supplies the 24, the multiplier the rest, and the name carries the pair.

<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360"><rect width="640" height="360" fill="#0f172a"/></svg>

intrinsic 640 × 360 px · basis mixed · ratio 1.7778
request   size 512 × auto px · dpr 1 · background #ffffff
output    512 × 288 px · 147,456 pixels
file      banner-512x288.png
N_RASTER_ASPECT_SOLVED  You gave a width, so the height follows this drawing's ratio of 1.7778: 512 × 288 px.

One typed number, in Size mode. The height is not guessed: 512 over the ratio lands on 288, and both figures are quoted.

<svg xmlns="http://www.w3.org/2000/svg" width="16mm" height="9mm" viewBox="0 0 160 90"><rect width="160" height="90" fill="#22d3ee"/></svg>

intrinsic 60.4724 × 34.0157 px · basis mixed · ratio 1.7778
request   scale 2× · dpr 1 · background transparent
output    121 × 68 px · 8,228 pixels
file      card-121x68.png
N_RASTER_ROUNDED  The output width works out to 120.9449 px, and a canvas takes whole pixels, so 121 px was used.
N_RASTER_ROUNDED  The output height works out to 68.0315 px, and a canvas takes whole pixels, so 68 px was used.

Millimetres, converted at 96 to the inch before anything is multiplied. Neither doubled side is whole, so both roundings are reported with fractions.

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><image href="https://cdn.example/photo.png" width="512" height="512"/><text x="16" y="480" font-family="Inter" font-size="48">Q4</text></svg>

intrinsic 512 × 512 px · basis mixed · ratio 1
request   scale 1× · dpr 4 · background transparent
output    2,048 × 2,048 px · 4,194,304 pixels
file      slide-2048x2048.png
W_RASTER_EXTERNAL_REF_ABSENT  1 reference points outside this file. An SVG drawn onto a canvas is loaded through <img>, which runs it in secure static mode: nothing can be fetched over the network from there, so remote images, web fonts and external stylesheets are missing from the PNG.
W_RASTER_DPR_CAPPED  A device pixel ratio of 6 is above the 4 this converter applies, so 4 was used. The PNG is 4× the requested size, not 6×.

Two warnings in one run: the remote picture will be a gap, the Inter text falls back to a local font, and a requested ratio of 6 is answered with 4. The ratio field on this page stops at 4 itself, so only a direct engine call can ask for more.

Every example on this page is executed against the same engine that powers the tool, on every build.

Gotchas worth knowing

A percentage width has nothing to measure against

width="100%" or width="4em" is legal markup that yields no pixel count: the box it measures against does not exist while a canvas is sized. The value is quoted back and the viewBox read instead.

No viewBox and no size means 300 × 150

A root carrying neither gets the default CSS gives a replaced element with nothing to declare, and a note says so rather than letting that figure look deliberate.

A viewBox offset does not shift the PNG

viewBox="40 40 24 24" starts the window away from the origin, and the whole window still maps onto the whole sheet: the offset picks what is shown, never where it lands.

Transparency is kept, and a color goes under it

An alpha channel is stored per pixel, so an unfilled corner stays see-through in the file. A hex color floods the sheet first, for placements that cannot handle alpha.

Sloppy markup is refused rather than guessed at

An unquoted attribute or a bare ampersand stops the read with the position and a probable cause: an image element applies the same XML rules, so a repair here would still draw nothing.

An image element does the drawing, and it inherits nothing

So the namespace is required: a root without xmlns="http://www.w3.org/2000/svg" never decodes, and is refused with that line to add. fill="currentColor" lands on the initial color, black, since no page CSS reaches inside. A prefers-color-scheme block in the markup's own style element does resolve, against the viewer's browser setting.

Common errors

Input is larger than the 4 MB limit for this tool.: Past four megabytes the paste is declined whole: a partial document rasterizes as a broken picture. A file that big is usually a traced photograph, and the printed command handles it on disk.
The root element here is not <svg>, so there is no drawing to rasterize. Paste markup whose first element is <svg>, or open the file you meant to convert.: The check an HTML page, another XML document or a loose fragment trips, before anything is measured: a root that is not svg has no size to resolve.
viewBox="0 0 24 0" gives a user-space window 24 wide and 0 tall. A side that is zero or negative switches rendering off, so the PNG would be blank. Give the viewBox a positive width and height.: A collapsed window disables rendering per the specification, so a refusal beats a blank sheet that looks like a bug. It usually follows a hand edit.
An output of 8,192 × 8,192 px is past what this converter will draw: that is 67,108,864 pixels, and no side may pass 10,000 px and the total may not pass 16,777,216 pixels (4,096 × 4,096). Lower the scale, or type a smaller width, and the rest is recalculated for you.: Both ceilings are printed with the figure that broke one of them, so the next attempt is arithmetic. The area ceiling is the smaller documented allowance.

FAQ

What size should I export at?

Whatever the destination measures in pixels, times the density it is shown at. The presets cover the common doubling; Size mode takes a number.

Why is the text in my PNG in the wrong font?

Because a font referenced by URL cannot be fetched while the drawing is rendered, so the browser substitutes one it has. Convert letters to paths first.

Does a transparent background stay transparent?

Yes — alpha is written per pixel into the file, and only a hex color replaces it. Pick one when nothing will show behind the image.

Can I convert a PNG back to SVG here?

No — and this page does not attempt it. That direction is edge tracing rather than conversion, and its results depend on settings tuned per image.

Is my file uploaded?

No. The markup is parsed, drawn and encoded in this tab, and the download comes from a blob it made. The stage carries the copy the canvas rasterizes, so what you see is what downloads.

Keyboard shortcuts

⌘/Ctrl + Enter: Render again with the source and the options as they stand.
⌘/Ctrl + S: Download the PNG, ahead of the browser's own save-page action.
⌘/Ctrl + C: Copy the PNG to the clipboard when nothing is selected; a selection copies as usual.
⌘/Ctrl + Shift + C: Copy the PNG even when text is selected.
? or ⌘/Ctrl + /: Open the shortcut list; Escape closes it.

Nothing you paste here leaves this tab. State only ever travels in links you explicitly create.

W3C SVG 2 — the viewBox attribute and intrinsic sizing · W3C CSS 2.1 §10.3.2 — replaced element with no intrinsic size (300 × 150) · W3C CSS Values and Units — absolute lengths at 96 units to the inch · WHATWG HTML — canvas.toBlob() · W3C SVG Integration — secure static mode · W3C PNG (Third Edition) — alpha representation

Last reviewed: 2026-08-12