How does this SVG to PNG converter work?
It asks your browser to draw the SVG at the size you want, then saves those pixels as a PNG. The browser already knows how to render SVG, because every web page uses it for logos and icons, so no server is needed.
- Read: the file is read as text and parsed with the browser's XML parser. Nothing is shown on the page yet, so nothing in it can run.
- Resize: the tool writes your chosen width and height onto the
<svg>element. If the file has noviewBox, one is added from its size so the drawing can scale. - Draw: the edited SVG becomes a
blob:image and is painted onto a canvas. Because it's redrawn at the final size, curves and text stay sharp. - Export: the canvas saves a PNG (or JPG or WebP). PNG keeps every pixel and any transparency exactly.
Server-based converters such as the CloudConvert SVG to PNG page upload your file, convert it remotely and send it back. That works, but it adds a wait and puts a copy of your artwork on someone else's disk. Here the SVG to PNG conversion happens on your own device.
SVG vs PNG: what's the difference?
SVG stores shapes as instructions, so it can be drawn sharp at any size. PNG stores a fixed grid of pixels, so it looks exactly the same everywhere but goes blocky when enlarged. That's the whole SVG vs PNG trade-off.
| SVG | PNG | |
|---|---|---|
| What it stores | Shapes, paths and text as XML | A grid of pixels |
| Scaling up | Stays sharp | Blurs or goes blocky |
| Transparency | Yes | Yes (8-bit alpha) |
| Photos | Poor fit | Good, but files get large |
| Where it works | Browsers, design apps | Almost everything: email, Office, social sites, app stores |
| Editable later | Yes, in any text or vector editor | Only as pixels |
So why convert from SVG to PNG at all? Because plenty of places refuse SVG: many social networks, email clients, slide tools, marketplace listings and upload forms. Chrome's own extension manifest won't take SVG icons either. Keep the SVG as your master file and export PNGs for wherever they're needed.
SVG to PNG high resolution: how big can you go?
Pick a bigger scale or a custom width and the SVG is redrawn at that size, so a 24-pixel icon exported at 1,024 pixels is just as crisp as the original. You're limited only by how much canvas memory your browser allows.
Scale is relative to the size written in the file. An SVG with width="120" exported at 4x gives 480 pixels. An SVG with only a viewBox of 0 0 24 24 counts as 24 × 24, so 4x gives 96. For print or large screens, use Custom and type the pixel width you need; the height follows the shape of the drawing.
| You need | Setting | Why |
|---|---|---|
| Crisp on retina screens | Scale 2x | Most phones and laptops use two or more device pixels per CSS pixel |
| A slide, doc or social post | Custom width 1600–2400 | Enough pixels for full-width display |
| A print file | Custom: inches × DPI | A 4-inch logo at 300 DPI needs 1,200 pixels |
| Extension or app icons | Icons: 16, 32, 48, 128 | One file per size, drawn separately |
SVG to PNG transparent background, or a solid colour
The background stays transparent by default: any area the SVG doesn't paint comes out see-through in the PNG. Choose Colour under Background to fill it with white, your brand colour or anything else.
The checkerboard behind the preview shows which areas are transparent. If the result has a white box you didn't expect, the SVG itself probably contains a full-size white <rect> behind the artwork. Delete that element in your editor, or in the code box here, and convert again.
JPG can't store transparency, so when you pick JPG the colour option is switched on and see-through areas are filled. WebP keeps transparency like PNG and usually makes a smaller file.
Why does my PNG look different from the SVG?
Usually because the SVG relies on something outside the file. When a browser draws an SVG as an image, it switches off scripts and won't load external files such as linked images, stylesheets or web fonts. The tool scans for these and warns you on the card.
- Missing images
- An
<image href="https://…">pointing at another file stays blank. Embed the picture as a data: URL in your editor, then convert again. - Wrong font
- Text set in a web font loaded with
@importor@font-facefalls back to another font. Fonts installed on your device do work. Safest fix: convert text to outlines (paths) before you export. - No width or height
- The size is read from the
viewBox. With neither, browsers fall back to 300 × 150 pixels; the card flags this so you can set a custom size. - Animation or interactivity
- Scripts and hover effects don't run, and CSS animations are captured at a single frame. A PNG is one still picture.
- Error: not valid SVG
- SVG is strict XML. An unclosed tag, a missing quote or a bare
&stops it. The error names the line and column to fix.
Make Chrome extension icons from one SVG
Choose Icons, tick 16, 32, 48 and 128, and each SVG becomes four square PNGs named like logo-16.png and logo-128.png. Chrome's documentation says extension icons can't be SVG or WebP and recommends PNG for its transparency support.
- 128 × 128: shown during installation and in the Chrome Web Store.
- 48 × 48: shown on the extensions management page.
- 16 × 16: the favicon for the extension's own pages.
- 32 × 32: used in Chrome's example manifest; worth including for high-density screens.
Artwork that isn't square is centred with transparent padding, so nothing gets stretched. At 16 pixels fine details vanish; if the icon turns to mush, make a simpler version of the SVG just for the smallest size. Picking the brand colours first? Our colour picker from image reads exact HEX values from a screenshot.
How to convert SVG to PNG on Windows, Mac or with Inkscape
Any modern browser can do it, which is why this page works the same on Windows, macOS, Linux and ChromeOS. If you'd rather use desktop software, these are the dependable routes.
| Method | How | Catch |
|---|---|---|
| Inkscape (free, all systems) | File > Export, choose PNG, set width or DPI, click Export | Large download for a one-off job |
| Inkscape command line | See the command below; good for folders of files | Needs a terminal |
| Chrome DevTools | Open the SVG in a tab, press F12, then Ctrl+Shift+P and run Capture full size screenshot | Captures the page background too, so no transparency |
| Figma, Illustrator, Affinity | Select the artwork and export as PNG at 1x to 4x | Needs the app and an account or licence |
# Inkscape 1.x: export logo.svg as a 1024-pixel-wide PNG
inkscape logo.svg --export-type=png --export-width=1024 --export-filename=logo.pngDevelopers who need an SVG as a data URL rather than a PNG can encode it with our Base64 encoder. For bitmap formats, the WebP to PNG converter handles WebP, JPG, GIF and AVIF the same private way.
PNG to SVG: why converting back is a different job
Turning PNG to SVG isn't the reverse of this tool. A PNG has no shapes in it, only pixels, so a PNG to SVG converter has to guess the shapes by tracing edges. That's called vectorising, and this page doesn't do it.
Tracing works well on flat logos, icons and line art with a few solid colours. It works badly on photos, gradients and soft shadows, which turn into thousands of blobs and a file far larger than the PNG. Some online tools simply wrap the PNG inside an SVG file; that isn't vector at all and won't scale any better.
How to open SVG files
Drag the file into any browser window. Chrome, Edge, Firefox and Safari all display SVG, and on Windows .svg files usually open in Microsoft Edge by default. To edit one, use a vector editor such as Inkscape, Figma or Illustrator.
Because SVG is text, you can also open it in any code editor to see and change the XML. Windows File Explorer doesn't show SVG thumbnails out of the box; Microsoft's free PowerToys adds SVG previews and thumbnails. Designers comparing tools can browse our picks for designers, including extensions like ColorZilla.