Our sample badge is 699 bytes of drawing instructions. At the default 2× size it became a 640×320 PNG of 32.4 KB, in a fraction of a second. An SVG describes shapes, not pixels, so you choose how many pixels the PNG gets and it stays sharp at any of them. The “Size” setting shows up under the drop zone as soon as an SVG is added.
Pixel sizes for each setting
The badge declares itself as 320×160, and a small square app icon as 64×64:
| Size | Badge (320×160) | Icon (64×64) | Good for |
|---|---|---|---|
| 1× | 320×160 | 64×64 | Older screens, email signatures |
| 2× (default) | 640×320 | 128×128 | Phones and laptop screens with sharp displays |
| 4× | 1280×640 | 256×256 | Print, slides, zooming in |
At 2×, the icon came out as a 4.1 KB PNG. If you are unsure, keep 2×: a picture with twice the pixels it is shown at looks crisp on a phone, and the file is still small. Go to 4× when the PNG will be printed or enlarged.
Where the starting size comes from
The tool reads the SVG’s width and height. When those are missing, or given in units other than pixels, such as 10cm or 100%, it uses the viewBox instead. An SVG with neither is treated as 300×150, which is what browsers do too. To get an exact width, say 1000 pixels from a 250-pixel-wide SVG, pick 4×; for sizes the three settings do not reach, convert at 4× and use Resize image afterwards.
Fonts and linked files
Your browser does the drawing, so the PNG looks the way the SVG looks in your browser. Text uses the fonts on your device. Anything the SVG pulls from other files or websites, such as linked images or web fonts, is blocked by the browser for security, and if the SVG cannot be drawn at all you will see: “This SVG could not be drawn. It may be invalid or rely on files the browser blocks for security.” Icons and logos exported from design apps are usually self-contained and convert as you see them.
Making a website icon? Favicon generator takes an SVG and produces the whole set of sizes in one go.