How to Convert SVG to PNG at the Right Resolution

An SVG and a PNG describe the same picture in two opposite ways, and the difference is the whole reason this conversion trips people up. An SVG is a set of drawing instructions: move to this point, curve to that one, fill with this color. It has no pixels at all, so it scales to any size and stays crisp. A PNG is a fixed grid of pixels. The moment you export one, you have frozen the resolution. That single fact decides whether your output looks sharp or soft, so the most important choice you make is not the format — it is the pixel dimensions you ask for.

Why You Even Need a PNG

If SVG scales perfectly, why convert at all? Because a lot of the software you actually ship to refuses it. Email clients are the worst offenders: Gmail, Outlook, and Apple Mail strip or reject inline SVG, so an email signature or newsletter graphic has to be raster. Slide decks are nearly as bad — Keynote and older PowerPoint builds either decline SVG or render it with the wrong stroke widths. Social platforms want a flat PNG or JPG for share cards. Older Android modules consume PNG drawables, not vectors. App stores, chat apps, and many CMS upload fields all assume a bitmap.

So the SVG stays your source of truth, and the PNG is the delivery copy you cut for a specific destination. Keeping that mental model straight is what stops you from accidentally shipping a 16-pixel icon blown up in CSS.

Choosing the Export Width

Here is the part people skip. Because the PNG bakes in its resolution, you have to pick a target size on purpose. The trap is exporting at the SVG's intrinsic size — the width/height on the root element, or whatever the viewBox implies. Icons are commonly authored at 24×24 or even 16×16. Export at that, then display it at 96px on a page, and the browser stretches 24 real pixels into 96 and it goes soft.

The fix is to decide where the image will live and export to that. If a hero logo renders at 480px wide in your layout, export it at least 480px wide, not at its tiny authored size. With the SVG to PNG Converter you set the output width and height directly, lock the aspect ratio so the other dimension follows, and the tool re-rasterizes from the vector at that exact size — it never upscales a small bitmap, so thin lines and small text stay clean.

Scale and Retina: Why 2x Matters

Retina and 4K screens pack more physical pixels into the same CSS space. A "48px" slot on a Retina display is actually 96 physical pixels wide. Hand it a 48-pixel PNG and the device doubles every pixel, and you see the softness immediately on the crisp edges of an icon.

The answer is the scale control. Export at 2× and a graphic meant to display at 48px comes out 96 pixels wide — one physical pixel per device pixel, perfectly sharp on Retina. 3× covers the densest phone screens and Android's xxhdpi tier. The rule I use: figure out the largest size the image will display at, then multiply by the pixel density of the worst screen it has to survive. Most of the time that lands on 2×, occasionally 3×. There is little reason to go past 3× for screen work — you only pay in file size after that.

A Worked Example: a 512px Logo and Its 2x Version

Say you have a brand mark authored as SVG and you need a clean app icon. Paste the SVG source, and the converter reads its intrinsic size — let's say it reports 128×128. You want a 512px icon, so you have two equivalent ways to get there: type 512 into the output width with the aspect ratio locked, or set the scale to 4×. Either produces a 512×512 PNG rasterized straight from the vector, with no fuzzy upscaling.

Now the Retina copy. Your design comp shows the logo at 256px, but it has to stay sharp on a 2× display. Export the same SVG at 512px and tag it as your @2x asset — 256 CSS pixels, 512 physical pixels, one-to-one on a Retina screen. You end up with two PNGs, logo.png at 256 and logo@2x.png at 512, both re-rendered from the vector rather than one stretched from the other. That is the whole trick: every size is a fresh rasterization, so quality never degrades between them.

Transparency and Solid Backgrounds

PNG's other reason to exist over JPG is the alpha channel. A full 8-bit alpha means the transparent regions of your SVG stay genuinely transparent, so a logo composites cleanly over a dark title slide and a white content page without a visible box around it. Keep the background on transparent — that is the default — and you are done.

There is one case to watch. A few destinations flatten alpha to black: older email clients, some chat apps, and certain link-preview crawlers that generate share thumbnails. For those, switch to a solid background and pick a hex fill that matches where the image will sit. The preview sits on a checkerboard so you can actually see the transparency rather than guess at it. If your image went blank instead, the usual cause is an external reference — a web font called by name but not embedded, or an <image>/<use> pointing at an external file. Rasterization sandboxes those out, so convert text to outlines and inline referenced images before exporting.

A Note on Local, Private Conversion

The conversion runs entirely inside your browser tab. The SVG dimensions are read as read-only XML, a blob URL feeds the markup into an off-screen image element, a canvas rasterizes it, and the canvas hands back the PNG. Nothing is uploaded, nothing is logged, and there is no analytics on what you converted. Open the DevTools Network panel during a conversion and the request count stays at zero. That matters when the artwork is an unreleased logo or a client deliverable — it never leaves your machine, and once the page is cached the tool keeps working offline.

In my own work this is the part I lean on most. I batch a dozen Open Graph variants and app-icon sizes in one sitting, and because every export is local I never think about an API quota or whether a vendor is quietly keeping a copy of the brand assets. I paste, set the width, pick the scale, download, repeat — and the only thing I have to remember is which physical size each destination really needs.

Where to Go Next

Once you are exporting PNGs at the right resolution, the next questions are usually about file weight and source cleanliness. If the source SVG is bloated with editor cruft, run it through the SVG Optimizer first — a smaller, cleaner vector rasterizes faster and more predictably. And if you need to resize a batch of finished raster images to a set of fixed widths afterward, the Image Resizer handles that without another round trip through a design app.

The short version: keep the SVG as your master, export a PNG sized for exactly where it will live, multiply by the screen's pixel density for retina, and let transparency do its job. Get those four right and the conversion stops being a guessing game.

---

Made by Toolora · Updated 2026-06-13