SVG to PNG: Vector, Raster, and Export Scale

Converting an SVG to a PNG is a one-way trip from a description of shapes to a grid of pixels. The whole art of doing it well is deciding, before you press the button, how many pixels you actually need. Our SVG to PNG converter gives you a single scale multiplier to make that decision with, and this article is about how to set it.

What actually changes when you rasterize

An SVG file is a set of instructions: draw a path from here to there, fill it with this colour, stroke it two units wide. Nothing in it has a size in pixels. When a browser displays it, the renderer runs those instructions at whatever size the layout asks for, so the edges are crisp at 40 pixels and crisp again at 4000.

A PNG is the opposite - a fixed grid of colour values with no memory of the shapes that produced it. Rasterizing samples the vector at one specific resolution and throws the instructions away. Enlarging the result afterwards interpolates between pixels that already exist, which is why a 200 pixel logo blown up to 800 looks soft while the original SVG at 800 does not. The conversion is where quality gets decided, and it cannot be revisited later.

Where the base size comes from

The converter renders the SVG at its intrinsic size multiplied by your scale value. Intrinsic size comes from the width and height attributes on the root element of the file, so an icon authored as a 24 by 24 sprite renders at 24 by 24 with the multiplier set to 1. If your SVG only carries a viewBox and no explicit dimensions, browsers apply their own default, and you will notice the preview comes out smaller than expected. Adding explicit width and height attributes to the source file is the cleanest fix; nudging the multiplier upward is the quick one.

Picking a scale

Work backwards from the destination. Decide the pixel size you need, divide by the SVG's intrinsic size, and enter that number. The field accepts anything from 0.1 to 10 in steps of 0.1.

Destination	Sensible target	Why
UI icon in an app or page	2x and 3x the display size	Covers standard and high-density screens
Social post or thumbnail	1000 to 1200 px on the long edge	Platforms re-compress; give them headroom
Slide deck or document	About 2x the on-slide size	Survives projection and PDF export
Print	Physical inches multiplied by 300	300 dpi is the usual press expectation

Two habits keep this simple. First, always export at least twice the CSS or layout size, because high-density displays render one CSS pixel across two or three device pixels and a 1x export looks visibly soft on them. Second, do not chase the maximum. A 10x export of a detailed illustration can run into tens of megapixels, which is slow to draw, large to download, and no sharper on screen than the 3x version.

Transparency survives, but some things do not

Transparent regions of the SVG stay transparent in the PNG, because the canvas is cleared before the vector is drawn and PNG carries a full alpha channel. That is the main reason to prefer PNG over JPG for logo and icon exports - JPG has no alpha at all, so the transparent area collapses to a solid colour.

What does not always survive is anything the SVG depends on from outside itself. When a vector is loaded as an image the way this tool loads it, external stylesheets, scripts, and remotely linked assets are not fetched. The practical consequences:

Text needs outlines. If the SVG references a font that is not installed on the machine doing the conversion, the renderer substitutes another one and your wordmark shifts. Convert text to paths in your vector editor before exporting.
Styles must be inline or embedded. Rules in a linked CSS file will not apply.
Embedded raster images are already pixels. An SVG that wraps a photo does not gain resolution from a higher multiplier; only the vector parts get sharper.

Keep the SVG as the source of truth

Treat PNG exports as disposable build artifacts, not as your master file. Store the SVG in version control, export the sizes each destination needs, and re-export rather than resizing when requirements change. Vector files are also dramatically smaller for flat artwork, which is worth remembering before you replace an SVG on a web page with a PNG of it. If you do keep the SVG on the site, run it through the SVG optimizer first to strip editor metadata and excess coordinate precision.

Doing it privately

Rasterizing happens on an HTML canvas inside your own tab. The SVG is read with a local file reader, drawn, and downloaded straight from the canvas - unreleased brand marks, client logos, and product artwork never touch a server. That matters more for vector assets than most people assume, since a logo file usually leaks a launch before the launch does.