SVG to PNG Converter

How to turn an SVG into a PNG

1. Drop your .svg file onto the box above, or paste the code into the text area.
2. Pick PNG if you want a see-through background, JPG if a form demands it, or WebP for your own website.
3. Tap 2× for a picture that stays sharp on a phone screen, or type an exact width.
4. Check the preview, then press Download.

Behind the scenes the tool reads the width, height and viewBox written at the top of your SVG to work out its natural size. It then draws the whole thing onto a blank sheet at the size you asked for and saves that sheet as a picture. Because the drawing is redrawn from the original instructions at the new size — not stretched from a small copy — the result is properly sharp at every size, right up to 4×.

Why you should export at 2× for phone and laptop screens

A modern phone or laptop squeezes more than one screen dot into every dot a web page asks for. A page that says "make this logo 200 wide" is often really painting 400 screen dots on a phone, and 600 on the sharpest tablets. If you save your PNG at exactly 200 dots wide, the screen has to stretch it to cover that space, and stretching a fixed grid of dots always softens the edges. Fine lines go grey and small text turns fuzzy. The picture is not broken — it simply does not have enough dots to fill the screen it landed on.

The cure is to hand the screen more dots than it strictly needs. Save the picture at twice the size it will be displayed at, and then tell the page to show it at the smaller size. On an ordinary screen the extra dots are quietly ignored; on a sharp screen they are exactly what makes the edges crisp. This is why designers talk about "2× assets" — and it is the whole reason the quick-size buttons above exist. Two practical notes: 2× is almost always enough, because 3× and 4× add a lot of weight for a difference most eyes cannot see; and doubling the width also doubles the height, so a 2× picture holds four times as many dots and the file grows roughly four times as well. Save at 2×, keep the file honest, and only reach for 3× when the picture will be shown very large.

What each quick-size button gives you

Every number in this table is worked out by the same piece of code the tool itself runs, so it matches what you will actually get. Under each size is the total number of coloured dots the picture holds — a good rough guide to how heavy the file will be.

Notice the last row: a 1200 × 630 link-preview picture at 4× is 4800 × 2520 dots. That is a genuinely huge picture and it will be a heavy file. For anything that is going on a web page, 1× or 2× is what you want.

PNG, JPG or WebP — which one should you save?

Short version: PNG unless you have a reason not to. SVG drawings are usually logos, icons and diagrams — flat colours and hard edges — and that is exactly the sort of picture PNG stores perfectly and JPG smudges. Pick JPG only when something on the other end refuses to take anything else, and remember it will paint over your see-through background.

When the size in your file is not written in dots

SVG files that came out of a print or drawing program often measure themselves in millimetres, points or inches instead of screen dots. The tool converts those for you using the standard web rule that one inch is exactly 96 dots; everything else follows from that single number.

If your SVG gives its size as a percentage, or gives no size at all, there is nothing to convert — a percentage only means something inside a page. In that case the tool falls back to the viewBox, which nearly every SVG has, and uses the width and height written there. If there is no viewBox either, it starts you at 300 × 150, the size a browser gives any picture whose own size is unknown, and tells you so above the preview. You can type whatever size you actually want.

Things that trip people up

• Text turns into the wrong font. The font has to be on the device doing the drawing. Convert your text to outlines in your drawing program before you export the SVG.
• A linked picture inside the SVG comes out blank. Anything the SVG points at over the internet is blocked while it is drawn on its own. Embed it in the file instead.
• The result has a white box behind it. You are saving as JPG. Switch to PNG or WebP and tick the see-through box.
• Nothing happens at all. Make sure you pasted the whole file, starting at <svg and ending at </svg>. A fragment on its own will not draw.
• You asked for a giant size. Browsers refuse to make a sheet beyond about 16,000 dots on a side. Ask for more and the tool quietly brings it back inside that limit and says so.

Your file never leaves your device

There is no upload here and no server doing the work. Your browser already knows how to read an SVG, how to draw on a blank sheet and how to save a picture, and this page simply asks it to do those three things one after another. That means an unreleased logo, a client's artwork or anything else confidential is safe, the tool is instant because nothing is travelling over a network, and it keeps working after the page has loaded even if you go offline.

Frequently asked questions

Why does part of my picture go missing after I convert it?

An SVG can point at things that live outside the file. If it links to another picture with an image tag, or uses a font that is only installed on your computer, the browser is not allowed to fetch those while it draws the SVG on its own, so they come out blank or in a different typeface. The fix is to put everything inside the file first: paste the picture in as data instead of a link, and turn your text into outlines or paths in your drawing program. Once the SVG stands on its own, what you see here is exactly what you get.

What is the difference between an SVG and a PNG?

An SVG is a set of drawing instructions, so it stays perfectly sharp at any size at all. You can blow one up to fill a billboard and every edge is still crisp. A PNG is a fixed grid of coloured dots, so it only looks sharp up to the size you saved it at. Past that it goes soft and blocky. That is the trade you are making here: you give up the endless sharpness of the SVG and get a file that every app, every phone and every old upload form can open without complaining.

Which size should I pick?

Start with the size the picture will actually be shown at, then double it. If your logo sits in a 200-pixel-wide box on a web page, export it at 400 pixels wide using the 2× button. Most modern phones and laptops pack two or more screen dots into every one of those design pixels, so a picture made at the exact size looks slightly soft on them. Going bigger than 2× rarely helps and makes the file much heavier, so 2× is the sensible default and 3× is only worth it for very large screens.

Can I keep the background see-through?

Yes, if you save as PNG or WebP. Both of those can store empty pixels, so the parts of your SVG with no drawing in them stay clear and your logo will sit on any colour of page without an ugly white box around it. Just leave the see-through box ticked. JPG works differently: it has no way to store an empty pixel at all, so whenever you pick JPG the tool fills the empty parts with the colour you choose. That is why the colour picker turns on by itself the moment you switch to JPG.

Is my file sent anywhere?

No. Everything happens on your own device. The tool reads your SVG, draws it, and saves the result using parts that are already built into your browser, and none of that involves the internet. Your file is never uploaded, never stored and never logged, and there is nothing for us to see even if we wanted to. That makes it safe for a company logo you have not launched yet, a client design under an agreement, or anything else you would rather not hand to a stranger. It also keeps working with the internet switched off once the page has loaded.

Why is the file bigger than I expected?

A PNG stores a colour for every single dot in the picture, so the file grows with the area, not with how complicated the drawing is. Doubling the width also doubles the height, which means four times as many dots and roughly four times the file size. A tiny SVG of a few hundred characters can easily become a PNG of a few hundred kilobytes at 4×. If the file is too heavy, drop to a smaller size first, and only then try WebP, which usually saves another quarter or so at the same quality.

Related tools

• Image Format Converter (PNG ↔ JPG ↔ WebP)
• Image Resizer (change the size)
• Image Compressor (make the file smaller)
• Favicon Generator (site icons)
• Image to Base64 (data URI)
• XML Formatter (tidy up SVG code)