Why convert SVG to PNG?
SVG (Scalable Vector Graphics) stores shapes as instructions: “draw a circle here, fill it blue”. That makes SVG perfect for logos and icons, because it stays sharp at any size and the file is tiny. But many places do not accept SVG: social networks, email signatures, Microsoft Office on older versions, app stores, marketplace listings, favicon generators and most upload forms. PNG works everywhere and keeps transparency, so it is the usual export format.
How this converter works
- Your browser reads the SVG and works out its intrinsic size, from the
widthandheightattributes, or from theviewBoxwhen those are missing. - The tool rewrites only the outer
<svg>tag so the drawing is rendered at exactly the size you picked. If the file has noviewBox, one is added from the original size, so the picture scales instead of being cropped. - The browser draws the vector shapes straight onto a canvas of that size, then saves it as PNG.
Nothing is uploaded and nothing in the SVG can run: browsers treat it as a plain picture, so scripts inside a file never execute.
Choosing the size
| Option | What it means | Typical use |
|---|---|---|
| Scale 1× | The size written in the SVG | Matching a design exactly |
| Scale 2×–3× | Two or three times as many pixels per side | Websites and apps on phones and Retina screens |
| Width in pixels | An exact width; height follows the shape | Icons for app stores (512, 1024), social images |
| DPI (print) | Pixels per inch of the SVG, plus a DPI tag | Printing logos, stickers and posters |
How DPI works: on the web, one inch is 96 CSS pixels. A logo that is 2 inches wide in the SVG (192 CSS pixels) becomes:
The PNG also stores 300 DPI in its pHYs header, so layout and print software know it is meant to print 2 inches wide.
Worked examples
- App icon: a 24 × 24 icon SVG, width mode set to 1024 px, gives a crisp 1024 × 1024 PNG for an app store listing.
- Website logo: a 160 × 40 logo at 2× gives 320 × 80 pixels, which looks sharp on phones while displayed at 160 × 40.
- A4 poster: an SVG sized
210mm × 297mmat 300 DPI gives 2480 × 3508 pixels, the standard print resolution for A4.
The list below the tool shows the SVG’s own size and the PNG size for every file, so you can check before downloading. Scale exports are named like logo@2x.png, the convention used by iOS and web developers.
Fixing common SVG problems
- Text looks like a different font. If the SVG uses a font that is not installed on your device, the browser substitutes another. In your design tool, convert text to outlines (Illustrator: Create Outlines; Inkscape: Object to Path; Figma: Outline stroke / Flatten) before exporting the SVG.
- Photos or textures are missing. SVGs sometimes link to images in another file or website. For privacy, linked files are not loaded during conversion. Embed the images in the SVG instead.
- Everything is tiny or the wrong shape. Files with
width="100%"and noviewBoxhave no real size, so browsers fall back to 300 × 150. Use Width in pixels, or add aviewBoxin your editor. - Huge sizes fail. Browsers cannot draw canvases over about 16,384 pixels per side or 100 megapixels. The tool tells you before trying.
After converting
- Make a website favicon from the PNG with PNG to ICO.
- Shrink PNGs for the web with PNG to WebP (lossless keeps every pixel) or Compress Image.
- Need a JPG for a form that refuses PNG? Use SVG to JPG, which fills transparent areas with white or a colour you choose.
- Resize the result later without going back to the SVG with Resize Image, though for the sharpest result it is better to export at the final size here.