How to Convert SVG to PNG at Any Resolution

You drag an SVG into a converter, click convert, and get back a PNG that is 300 pixels wide and looks soft on any screen. Nothing warned you. The file downloaded normally. It is just small.

This is the single most common problem with SVG to PNG conversion, and it is not a bug in the converter. It is a rule in the SVG file itself, and once you know it you can export a crisp PNG at literally any size you want — 16 pixels or 4,000.

This guide covers why it happens, the one-line fix, and how to get exactly the resolution you need using the free SVG to PNG converter, which runs entirely in your browser — your file is never uploaded to a server.

An SVG is a set of drawing instructions, not a grid of pixels. It has no inherent size. When something rasterizes an SVG, it has to ask the file how big it wants to be — and it reads the width and height attributes on the opening <svg> tag to find out.

If those attributes are missing, or set to a percentage, the browser falls back to a default of 300 x 150 pixels. That default is written into the HTML specification. Every browser does it, so every browser-based converter inherits it.

Here is what actually happens for each case, measured in Chrome:

The second and third rows are the everyday culprits. Figma, Illustrator and most icon libraries export SVGs with a viewBox and no width or height, because on a web page CSS is expected to size them. That is perfect for a website and useless for a converter.

1. Open your SVG in a text editor first. An SVG is plain text — Notepad, TextEdit or VS Code will open it. Look at the first line.
2. Check for width and height. If the opening <svg> tag has them as plain numbers, skip to step 4. If they are missing or set to percentages, do step 3.
3. Add the size you want. Copy the two numbers from the viewBox and add them as attributes, scaled to your target. See the next section for exactly how.
4. Open the SVG to PNG converter. Drag your file into the drop zone, or click to browse.
5. Click Convert. The conversion happens in your browser using its own rendering engine, so it takes well under a second.
6. Download the PNG. Check the dimensions before you use it. If it says 300 x 150, go back to step 3.

Transparency is preserved automatically. PNG supports an alpha channel, so anything transparent in the SVG stays transparent in the PNG. (If you convert to JPG instead, transparency becomes white — JPG has no alpha channel.)

This is the part almost nobody explains, and it is the reason SVG is worth keeping as your source format.

Because an SVG is math rather than pixels, changing the width and height attributes does not stretch anything. It tells the renderer to redraw the artwork from scratch at that size. A 4x export is genuinely 4x the detail, not an upscale.

Say your file starts like this:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 256">

To get a 2048 x 1024 PNG, add the attributes at 4x the viewBox numbers and leave the viewBox untouched:

<svg xmlns="http://www.w3.org/2000/svg" width="2048" height="1024" viewBox="0 0 512 256">

Save, convert, and you have a 2048 x 1024 PNG with edges as sharp as the original vector. We tested exactly this: the resulting edge resolves in a single pixel step, with no blur band — the hallmark of a true re-render rather than an upscale.

Keep the aspect ratio. Multiply both numbers by the same factor. If you change only one, the artwork letterboxes inside the frame instead of filling it, because the viewBox controls the coordinate system.

Set width and height to the size you need, convert, repeat. These are the sizes worth having on hand:

For anything going on a screen, export at 2x the size it will be displayed at. A logo shown at 200 pixels wide should be a 400 pixel PNG, or it will look soft on high-density displays.

If you have already converted and just need a different size, the Image Resizer will scale the PNG — though going back to the SVG and re-exporting always gives a sharper result, because the vector is redrawn instead of resampled.

SVG is the better format almost everywhere it is supported. Convert only when something refuses to accept it:

• Email. Outlook, Gmail and Apple Mail have inconsistent SVG support and often strip it. Always use PNG in email.
• Social media. No major platform accepts SVG for profile images, posts or link previews.
• App and OS icons. iOS, Android and Windows all want fixed-resolution raster files.
• Older CMS platforms and marketplaces. Many block SVG uploads for security reasons, since an SVG can contain scripts.
• Documents. Word and PowerPoint handle PNG far more predictably.

Keep the SVG as your master file in every case. It stays editable and resolution-independent, and you can re-export a PNG at any size in seconds. Going the other way is much harder — if you only have a raster file, the PNG to SVG converter can trace it, and our guide on that explains what tracing can and cannot recover.

• Check the dimensions of every PNG you export. Nothing warns you when a conversion falls back to 300 x 150. Making this a habit catches the problem in two seconds.
• Edit a copy, not your master SVG. Adding fixed width and height can affect how the file behaves when embedded in a web page.
• Convert files locally when they matter. Logos and unreleased brand assets should not be uploaded to a stranger's server. Browser-based conversion keeps the file on your machine.
• Convert text to outlines for unusual fonts. Common system fonts render correctly, but a font that is not installed will be substituted silently. Outlining the text in your design tool removes the risk entirely.
• Export the largest size first. If you need several sizes, do the biggest one and check it. If that looks right, the rest will too.
• PNG for transparency, JPG for photographs. If your SVG is a flat logo or icon, PNG is smaller and sharper. Use the Image Converter if you need a different output format.