SVG to PNG
Drop an SVG, pick the width in pixels, and download a PNG drawn by this browser. The preview is the PNG itself — same pixels, same transparency — and the width field is the only resolution decision there is: an SVG has no pixels until something rasterises it.
Drop an SVG here
or choose a file · one at a time · up to 8 MB · transparent PNG
One SVG at a time · 8 to 4096 px wide · PNG with transparency · no upload · no account · no watermark
SVG to PNG: Instructions Become Pixels
An SVG is a set of instructions. It names shapes, colours, a viewBox, and often a font, and it deliberately does not say how many pixels wide it should be. Turning it into a PNG is the moment that question gets answered — by you, or by whatever converter you picked.
The numbers below come from one 566-byte file: a rounded card with a gradient, a circle, a triangle and one line of text, all inside a 512 × 341 viewBox. At 64 px wide it becomes a 2,275-byte PNG. At 2,048 px wide the same instructions become 295,195 bytes. Nothing about the drawing changed. Only the grid it was poured into.
How to turn an SVG into a PNG here
- Add the file. Drop an .svg on the box above, or click to choose one. One file at a time, up to 8 MB.
- Set the width. Type a number or drag the slider, 8 to 4,096 px. A very long or very tall drawing stops earlier, because the canvas has a pixel budget; the slider's top follows the file. Height follows the viewBox, so the shape cannot be stretched.
- Read the notes. The panel lists what the browser will not draw: outside images, web fonts, scripts,
<foreignObject>. Ten seconds there saves a download you have to redo. - Download. The card shows the real pixel size and file size. The preview is the PNG itself, transparency included, not a redraw of the SVG.
Changing the width redraws on its own. No Run button, no queue.
What each control does
Width is the only resolution control, because an SVG has no native resolution to preserve. The number field is for an exact value; the slider is for hunting one. Presets jump to the file's own width, twice that, or four times, and they disappear when a preset would fall outside 8–4,096 px or past the file's canvas cap. Background offers transparent (the default, and what an SVG without a background really is), white for viewers that paint transparency black, and a custom colour — #f5f5f5 is the grey most shop fronts use — which fills the canvas before the drawing goes on. There is no quality or compression setting because PNG is lossless: there is nothing to trade away.
One drawing, six widths
| Width | Pixels | PNG size | Bytes per pixel |
|---|---|---|---|
| 64 px | 64 × 43 | 2,275 B | 0.83 |
| 128 px | 128 × 85 | 5,342 B | 0.49 |
| 256 px | 256 × 171 | 13,189 B | 0.30 |
| 512 px | 512 × 341 | 36,878 B | 0.21 |
| 1,024 px | 1,024 × 682 | 105,683 B | 0.15 |
| 2,048 px | 2,048 × 1,364 | 295,195 B | 0.11 |
Two numbers matter more than the rest. The total: 1,015 times the pixels produced 130 times the bytes, not 1,015 times. And the per-pixel cost, which falls from 0.83 bytes at 64 px to 0.11 at 2,048 px — about eight times cheaper per pixel at the top of the range.
Smoothness explains it. At 64 px the whole drawing is edge: almost every pixel sits next to a colour change, and a colour change is exactly what PNG's row filters cannot predict. At 2,048 px the inside of the circle is thousands of identical pixels in a row, which deflate turns into a short repeat. A bigger canvas is not four separate bills; it is one bill for detail plus a much cheaper bill for area.
That also sets the practical rule. Export at the size the PNG will be displayed, double it for high-density screens, and stop. Rendering at 2,048 px to show at 320 px multiplies the file by 130 and the visible detail by nothing.
What the browser leaves out
A browser draws an SVG as an image with a short list of permissions, and it does not tell you when something is missing. Six small files show where the line falls.
An <image> pointing at an http address was skipped: 0 of 20,000 pixels in the output were red. The identical picture embedded as a data: URI did draw — 10,000 of 20,000 pixels, half the frame, because an 8 × 8 square keeps its shape inside a 200 × 100 box and leaves the rest white.
A <script> block never ran: the global flag it sets stayed empty, while the blue rectangle beside it drew normally. A <style> block inside the file did apply — a rectangle painted by a CSS class came out exactly rgb(0, 255, 0). And currentColor, with no page colour to inherit, resolved to rgb(0, 0, 0).
The last case is the one that stops a download. Chrome drew the HTML inside <foreignObject> (blue text covered 4.2% of a 200 × 100 frame), then marked the canvas as tainted: reading a pixel threw SecurityError, and toBlob threw "Tainted canvases may not be exported." The file opens fine in a browser and still cannot be turned into a PNG by a page. This tool reports that instead of handing you a broken download.
Text moves when the font is missing
A font is not part of an SVG unless the file embeds it or the designer converted the text to paths. Everything else is a request: draw this string in this family, and hope the machine has it.
The same eleven characters at 32 px, measured in the output pixels: Arial 227 px wide, Georgia 221 px, and a file asking for Inter (a family this machine does not have) came out 232 px after substitution. An 11 px spread on one line is enough to push a label past a border or wrap a heading that used to fit.
If the exact shape of the text matters, convert text to outlines in the design tool before export. If only the words matter, any modern sans-serif will do, and the browser's fallback is fine.
Picking a width
For screens, use the CSS size the PNG is displayed at, multiplied by two for high-density displays: a card shown at 160 CSS px needs 320 px. Text and thin strokes benefit from the same doubling.
For print, multiply inches by the printer's dots per inch. One inch at 300 DPI is 300 px; a six-inch figure is 1,800 px; A4's 8.27-inch printable width is 2,480 px, which still fits under the 4,096 px cap. For app icons and favicons, 512 px covers the largest slot most systems ask for.
Why the file never leaves the tab
The page has no server step in the conversion. The browser reads the file, draws it on a canvas, and writes the PNG; the tool only decides the width and the background colour. Open the Network panel and convert: no request carries the file anywhere. Disconnect the network and it still works — the 256 px render came out at 13,189 bytes both online and offline, byte for byte.
Quick answers
Does the PNG keep the transparent background? Yes. The output is 8-bit RGBA, and the transparent corners of the test card stayed at alpha 0. If a viewer paints transparency black, switch Background to white before downloading.
What width counts as high resolution? Pixels are the only resolution a PNG has. "High resolution" means at least as many pixels as the place it will be shown. A 300 px logo displayed at 150 px is already 2×; a 300 px logo stretched across a 1,200 px banner is not.
Why does the PNG look softer than the SVG? Because it is a snapshot on a fixed grid. Curves that were mathematically smooth become stair-steps at the pixel level, and no later zoom adds information back. Export larger if the image will be inspected closely.
Can I convert an SVG that contains text? Yes, but the text is drawn with the fonts installed on your computer. If the file asks for a family you do not have, the browser substitutes one and the line can change width.
Will this work with an SVG exported from Figma or Illustrator? Usually. Those exports are usually self-contained; files fail here when they link to an outside image, use a web font, or wrap HTML in <foreignObject>. The notes above the result name the reason.
Can I convert several SVGs at once? No. One file per run. The width control applies to a single drawing, and each export is its own download.
Is anything uploaded? No. There is no upload step: the file is read from disk by the page, drawn by the browser, and saved by you. The offline test above is the check anyone can repeat.