ToolSink
Back to blog

Converting SVG to PNG: What Actually Happens During Rasterization

ToolSink Team

SVG and PNG solve different problems: SVG describes an image mathematically (paths, curves, shapes) and scales to any size with no quality loss; PNG is a fixed grid of pixels that looks perfect at its intended size and degrades if enlarged. Converting SVG to PNG means picking a specific pixel size and "baking" the vector math into that fixed grid — a process called rasterization.

Why you'd convert a scalable format into a fixed one

  • Compatibility — many legacy applications, email clients, and older office software don't render SVG correctly or at all; PNG works everywhere
  • Social media / Open Graph images — most platforms' upload and link-preview systems expect raster formats, not SVG
  • Rendering consistency — a complex SVG with hundreds of paths and filters can render slightly differently across browsers/engines; a rasterized PNG looks identical everywhere because the pixel data is already fixed
  • Avoiding SVG's small security surface — some platforms restrict SVG uploads specifically because SVG can embed scripts; a PNG has no such risk

What actually happens during rasterization (and the gotcha to know)

Since SVG has no inherent fixed size, a converter needs a target width/height (or a DPI/scale factor) to know how many pixels to generate. This is where a common issue comes from: an SVG's viewBox defines its internal coordinate system, but doesn't necessarily match its width/height attributes. If a converter uses one and ignores the other inconsistently, you can get unexpected cropping or scaling — checking that your source SVG has both a sensible viewBox and explicit dimensions avoids most of this.

<!-- Has both viewBox and explicit dimensions - converts predictably -->
<svg viewBox="0 0 100 100" width="100" height="100" xmlns="...">

Converting programmatically

For batch conversion or automation, here's the actual shape of it using resvg (a fast, accurate Rust-based SVG renderer) via command line, and Python's cairosvg:

# CLI - explicit output size
resvg input.svg output.png --width 1024 --height 1024

import cairosvg

cairosvg.svg2png(
    url="input.svg",
    write_to="output.png",
    output_width=1024,
    output_height=1024
)

Both approaches let you script conversion across many files at consistent, predictable sizes — useful if you're generating icon sets or asset variants rather than converting one file by hand.

Best practices

Convert larger than you think you need. You can scale a large PNG down (via CSS or any image editor) with no quality loss, but you can't scale a small PNG up without visible blurring — since you're moving from infinite to fixed resolution, err large. For icons, 2-4x your display size gives headroom for high-DPI screens; for a hero image or logo, 1920px+ on the long edge is a reasonable starting point.

Check for an unintended background. If your SVG should have a transparent background but includes a solid white rectangle in the code (common when exporting from some design tools with a default artboard fill), the PNG will inherit that opaque background rather than true transparency. Open the SVG source and check for this before converting if transparency matters.

Verify the result at actual size. Rasterization can occasionally handle complex filters, gradients, or blend modes slightly differently than a browser's live SVG rendering — a quick visual check after conversion catches this before it ships.

Quick conversion without scripting

For a one-off conversion, ToolSink's SVG to PNG converter lets you set an output size directly and handles the transparency/viewBox details described above. As with any web-based converter, check the tool's specific stated behavior on file handling if you're converting anything you'd consider sensitive — general privacy branding on a site doesn't guarantee every individual tool works the same way.

Back to blog