SVG to PNG Converter
Turn SVG files or SVG code into PNG images at the size you need. Scale up to 2× or 4×, set an exact width, and keep the background transparent or fill it with a color. Convert one file or a whole folder at once. Everything runs in your browser.
Drag and drop your SVG files here, or
Convert one SVG or many at once. Everything runs in your browser. Nothing is uploaded.
SVG vs PNG: what is the difference?
An SVG is a set of drawing instructions: draw a circle here, a line there, fill this shape blue. Because it is instructions rather than dots, it can be drawn at any size and always stays sharp. That makes it ideal for logos and icons.
A PNG is a grid of pixels. It has one fixed size, and enlarging it makes it blurry. In exchange, it works almost everywhere: social media, email, Word and PowerPoint, app stores, and older software that cannot open SVG at all.
Converting draws the SVG once at the size you choose and saves the result as pixels. So pick the size you will actually use. A PNG made at 1× and then stretched to twice the size will look soft. One made at 2× will not.
Why use our SVG to PNG converter
- ·Sharp at any size. The SVG is redrawn at the PNG size instead of drawn small and stretched, so a 4× PNG is as crisp as a 1× one.
- ·Files or code. Upload SVG files, or paste SVG markup straight from Figma, an icon library, or a web page.
- ·Many at once. Convert a whole icon set with one size and background, then download a single ZIP.
- ·Warns before it goes wrong. Missing sizes, linked images, and web fonts are flagged on each file, so you know why a PNG might differ from the SVG.
- ·Nothing is uploaded. Unreleased logos and client artwork stay on your device.
How to convert SVG to PNG
- 1
Add your SVG
Drag SVG files onto the box, pick them from your device, or paste SVG code copied from a design tool or icon site. You can add many at once.
- 2
Choose the PNG size
1× uses the size written in the SVG. 2× and 4× make it two or four times larger and sharper. Custom width sets an exact width in pixels for every file.
- 3
Pick a background
Keep None for a transparent PNG, or fill the empty areas with white, black, your own color, or a gradient.
- 4
Download the PNG
Download each PNG on its own, or every file at once as a ZIP. Each PNG is named after its SVG, with @2x or @4x added when you scale up.
What size PNG to make from an SVG
Make the PNG the size it will be shown at, or larger. Never smaller, since a small PNG cannot be enlarged without going blurry. Common targets:
| Use | PNG size | Notes |
|---|---|---|
| Website favicon | 32 × 32 px | Our favicon generator makes the full set of sizes from one SVG. |
| Apple touch icon (iPhone home screen) | 180 × 180 px | Use a solid background, since iOS fills transparent areas with black. |
| Web app icons (Android, PWA) | 192 × 192 and 512 × 512 px | Both sizes are listed in the web app manifest. |
| Logo on a website or in a document | 2× the size it is shown at | A logo shown 200 px wide needs a 400 px PNG to stay sharp on high resolution screens. |
| Printing | Inches × 300 | A logo printed 2 inches wide needs a PNG about 600 px wide. |
The @2x and @4x names the tool gives scaled files follow the convention used in app and web development, where logo.png is the normal size and logo@2x.png is the version for high resolution screens. For a full favicon set, use our favicon generator, which accepts SVG directly.
Why an SVG looks different after converting to PNG
An SVG that looks right on a website can come out wrong as a PNG, because on the website it was getting help from the page around it. These are the usual causes:
- ·Shapes turn black. Icon sets often color shapes with
currentColor, which borrows the text color of the page. On its own the SVG has no page, so the color falls back to black. Replace currentColor with a real color in the SVG code. - ·Fonts change. Text in an SVG is drawn with whatever fonts are installed on the device doing the converting. If the SVG names a font you do not have, a similar one is used instead. Converting text to outlines (paths) in your design app before exporting fixes this for good.
- ·Pictures or styles are missing. An SVG can link to photos, fonts, or stylesheets stored elsewhere. Browsers never load those when drawing an SVG as an image, for security reasons. Embed them in the SVG instead.
- ·The size is wrong. Without width, height, or a viewBox, an SVG has no size of its own, and browsers treat it as 300 × 150 pixels. Set a custom width here, or add a viewBox to the SVG.
The tool checks every file for the last three and shows a warning on any that are affected.
How to convert SVG to PNG in Figma, Inkscape, and the command line
Figma. Import or paste the SVG, select it, and add an export setting in the right panel. Choose PNG and a scale such as 2x, then click Export.
Inkscape. Open the SVG and choose File, then Export. Pick PNG as the format, set the width or the dpi, and export.
Command line. With Inkscape 1.0 or later, run inkscape logo.svg --export-type=png --export-width=1024. With librsvg installed, rsvg-convert -w 1024 logo.svg -o logo.png does the same. Both are good for converting files in a build script.
This page is quicker when you do not have those installed, need a batch of icons at one size, or only have SVG code to paste.
Frequently asked questions
- How do I convert SVG to PNG for free?
- Add the SVG file or paste its code, pick a size, and click PNG to download it. There is no signup, no watermark, and no limit on how many files you convert.
- How do I convert SVG to PNG at a high resolution?
- Choose 2× or 4×, or set a custom width up to 16,384 pixels. The SVG is redrawn at that size rather than stretched, so edges and text stay sharp however large the PNG is.
- How do I keep the background transparent?
- Leave the background set to None. Any part of the SVG that is empty stays transparent in the PNG. The preview shows transparent areas as a grey and white checkerboard.
- Why is my PNG black where the SVG had color?
- The SVG probably uses currentColor, which takes its color from the web page around it. A standalone SVG has no page around it, so currentColor falls back to black. Open the SVG in a text editor and replace currentColor with the color you want, then convert again.
- Why are images or fonts missing from my PNG?
- When a browser draws an SVG as a picture, it does not load anything outside the file, such as linked photos, web fonts, or stylesheets. The tool warns you when an SVG links to outside files. Embed the images in the SVG, or convert the text to outlines in your design app, and they will appear.
- Why is my PNG 300 × 150 pixels?
- Because the SVG has no width, height, or viewBox, so there is nothing to say how big it should be. Browsers use 300 × 150 in that case, and so does this tool. Use Custom width to set the size you want.
- Can I convert several SVG files at once?
- Yes. Add as many as you like, choose the size and background once, and download them all as a ZIP. Files with the same name are numbered so none of them overwrite each other.
- Can I paste SVG code instead of uploading a file?
- Yes. Click Paste SVG code and paste the markup, starting with <svg and ending with </svg>. This is useful for icons copied from Figma, icon libraries, or a web page's source.
- Is it safe to convert SVG files here?
- Yes. The SVG is converted inside your browser tab and never uploaded. Browsers draw an SVG used as a picture in a sealed off mode, so any scripts inside the file do not run.