SVG to PNG: Rasterizing Vectors the Right Way
SVG is a wonderful format for logos and icons — it's made of mathematical shapes, so it stays razor-sharp at any size. But that same vector nature is also its weakness: many email clients, social platforms, marketplaces and older apps simply won't render an SVG.
The fix is to rasterize it — to convert the vector into a grid of pixels as a PNG. Done carelessly, that produces a tiny or blurry image; done properly, you get a crisp, transparent PNG that displays everywhere. This guide explains how to convert SVG to PNG the right way.
SVG to PNG
Rasterize scalable SVG vectors into crisp, transparent PNGs.
Vector vs raster: what rasterizing means
An SVG describes an image as instructions — draw a circle here, fill this path with that colour. Because it's math, it can be drawn at any resolution without ever getting fuzzy. A PNG, by contrast, is raster: a fixed grid of coloured pixels. Rasterizing means executing the SVG's instructions once, at a chosen resolution, and freezing the result into pixels.
The key consequence is that once you rasterize, the infinite scalability is gone. The PNG looks perfect at the size you exported it, but blowing it up much larger will show soft edges. So the important decision is what resolution to render at.
Getting a sharp, high-resolution result
Many SVGs don't specify an intrinsic pixel size, which is why some converters spit out a tiny image. PixelResize handles this by reading the SVG's width, height or viewBox and rendering unsized vectors so their longest edge is around 1024 pixels — big enough to look sharp in most uses.
If you need an even larger export, the cleanest approach is to set a bigger width and height directly in the SVG before converting. Because you're rasterizing from math, rendering at a larger size gives genuinely more detail rather than just stretching pixels.
Transparency carries across
One of SVG's strengths is transparency, and it survives the conversion. Transparent regions in the vector become transparent pixels in the PNG's alpha channel, so your logo or icon drops cleanly onto any colour or photo without a white box around it.
When to reach for PNG over SVG
Keep the SVG wherever it's supported — your website, your design files — because it stays sharp and stays small. Rasterize to PNG when a destination won't take SVG: email signatures, some social media uploads, app icons, product-listing images and documents. PixelResize renders the SVG to a canvas and exports the PNG entirely in your browser, so the file is never uploaded, and the result downloads instantly.
Key takeaways
- Rasterizing converts a scalable vector into a fixed grid of pixels at a chosen resolution.
- Once rasterized, a PNG no longer scales up cleanly — pick a large enough size upfront.
- Unsized SVGs are rendered at roughly 1024px on the long edge for a sharp result.
- Set explicit width/height in the SVG before converting if you need an even bigger PNG.
- Transparency in the SVG is preserved in the PNG's alpha channel.