SVG to PNG — when you genuinely need pixels (and when you shouldn't)

There's a particular kind of frustration in having a perfect logo and nowhere to put it. The SVG is crisp at any size, weighs almost nothing, and looks flawless in the browser — and then you try to drop it into an email, or set it as a social preview image, or paste it into a slightly-too-old piece of software, and it just doesn't show up. Blank. The file is fine. The place you're putting it simply doesn't speak vector.

That's the whole reason SVG-to-PNG exists as a task. Not because PNG is better — it usually isn't — but because a lot of the world can only read pixels.

Vector and raster, quickly

An SVG isn't a picture. It's a set of instructions — draw a circle here, this path there, fill it this color. The browser follows the instructions and renders them fresh at whatever size you ask, so it's razor sharp at 16 pixels or 16,000, and the file stays tiny because it's just math.

A PNG is the opposite. It's a fixed grid of colored pixels, decided once, at one resolution. Blow it up past its native size and it goes soft and blocky, because there are no more pixels to draw — just the ones baked in. The upside is that everything can read a grid of pixels. It's the universal currency of images.

So converting SVG to PNG is trading infinite scalability for universal compatibility. Whether that's a good trade depends entirely on where the image is going.

When you genuinely need PNG

Three cases where I rasterize without hesitation, because vector simply won't work:

Email. Email clients don't render SVG — Gmail, Outlook, Apple Mail, essentially all of them refuse it for security reasons. A logo in an email signature or a newsletter has to be a raster format. PNG, because you want the transparency.

Social and OG preview images. The little card that appears when you share a link — the Open Graph image — has to be a fixed-size raster, typically 1200x630. The platforms won't render an SVG there. If your source art is vector, you export a PNG at that exact size.

Older or offline software. Plenty of desktop apps, presentation tools, document editors, and print workflows either can't import SVG or make a mess of it. Handing them a PNG at a generous resolution just works, every time, with no surprises.

In all three, the deciding factor is the same: the destination physically cannot read vector, so scalability is irrelevant. A format that renders beats a format that doesn't, always.

The one thing to get right: resolution

Here's the mistake I see most, and made myself early on. Because a PNG is fixed at the size you export it, you have to export it big enough — and ideally at the exact size you'll display it.

Export a logo as a 100x100 PNG and then show it at 300 pixels on a high-density screen, and it'll look soft and jagged. The pixels to fill that space don't exist. The fix is easy: export at the size you'll actually use, or larger, especially for Retina and 4K displays where you often want 2x the nominal size. This is the one real advantage you give up by leaving vector, so spend a moment getting the target resolution right.

When you should NOT rasterize

If the destination can read SVG, keep the SVG. Full stop.

On your own website, an icon or logo should stay vector. It'll be sharp on every screen at every zoom level, it'll be smaller than the equivalent PNG, and you'll never have to re-export a bigger version when a new higher-density display comes out. Rasterizing it there is pure downside — you'd be throwing away the format's best trait to gain compatibility you already have.

And don't rasterize your master. The SVG is the source of truth; it can generate a PNG at any size, any time. A PNG can't go back the other way — you can't recover clean vector paths from a grid of pixels. So keep the SVG, and treat each PNG as a disposable export for one specific place. Same principle as everything else: convert the copy you ship, keep the original you edit.

How I actually do it

When I need pixels out of a vector, I use the SVG-to-PNG converter here. It renders the SVG in your browser and hands you the PNG, so nothing gets uploaded anywhere — the whole thing happens on your machine. Pick a size that fits where it's headed, get a clean PNG with transparency intact.

But the real skill isn't the conversion. It's the question you ask first: does this place read vector? If yes, leave the SVG alone and enjoy the sharpest, smallest option there is. If no — email, OG card, some stubborn old app — then rasterize, at the right size, and keep your SVG safe for next time. Get that call right and you'll never have a blank box where your logo should be again.