Rasterising an SVG
An SVG is XML that describes shapes, paths and text, so it has no fixed pixel size until something draws it. This tool loads your markup as an image, then paints it onto a canvas whose width and height you choose and exports the canvas as PNG. Because the drawing is re-done at the target size, rather than enlarged afterwards, edges stay sharp even at big sizes. The preview is capped to 420 px on screen, but the download uses the exact numbers in the width and height boxes.
Where the starting size comes from
- The
widthandheightattributes of the root element, if both are positive numbers. - Otherwise the third and fourth numbers of the
viewBox. - Otherwise the size the browser decoded, and as a last resort 300×150.
Unit suffixes are converted to CSS pixels at 96 per inch: px, in, cm, mm, pt, pc and em all work, so width="2cm" becomes 76 px. A percentage such as width="100%" has no fixed size, so the tool falls back to the viewBox (and, if only one side is a percentage, derives it from the viewBox ratio). You can always type the exact size yourself.
Worked example
An icon with viewBox="0 0 24 24" and no width or height starts at 24×24. To get a crisp 512×512 PNG, set the width to 512; with the lock on, the height follows to 512. That is a scale of about 21.3 times, with 262,144 pixels in the result. A 1200×630 social image would need width 2400 to give a 2x export for high-density screens (height 1260). The file is named like converted-512x512.png.
What does not render
| SVG content | Result |
|---|---|
| Inline shapes, gradients, clip paths | Drawn normally |
Images embedded as data: URIs | Drawn |
Linked images (href="https://...") | Usually blank, since browsers block external loads in SVG used as an image |
Web fonts via @import or @font-face URLs | Not fetched, so text falls back to a system font |
| Scripts and animations | Ignored; you get a static frame |
For exact typography, convert text to outlines in your design tool before exporting the SVG.
Common mistakes
- Pasting markup without the namespace. The root element needs
xmlns="http://www.w3.org/2000/svg", or the browser will not treat it as an image and you will see the parse error. Press Render SVG after pasting. - Forgetting the background. The default is transparent. Choose White if the PNG will sit on a dark or unknown background and you do not want a see-through logo.
- Setting an enormous size. A 10000×10000 export needs 400 MB of canvas memory and may be refused by the browser.
Need an icon set instead of one image? See App Icon Generator, or resize a raster file with the Image Resizer.