Image Tools·4 min read

Rasterizing SVG Correctly: Sharp PNG Exports

The upload form said PNG or JPG only, and your logo is an SVG. It happens on marketplace listings, email signature builders, ad platforms, print portals, and half the profile-picture dialogs on the internet. Rasterizing svg correctly is the skill that turns one vector master into a crisp pixel image at any size the platform demands, and the difference between doing it well and doing it carelessly is exactly the difference between a sharp logo and a blurry one. Resolution choice and font handling are where it's won or lost.

Open the tool All insights

Why platforms reject SVG and insist on PNG uploads

It's not arbitrary.

SVG is a document, not just an image. It can contain scripts, external references, and CSS, which makes it a security review problem for any site accepting user uploads. It also renders slightly differently across engines, so a marketplace can't guarantee your listing badge looks identical for every buyer. PNG solves both concerns: inert pixels, one appearance everywhere.

Email is the other big offender. Most email clients won't render SVG at all, so signature logos and newsletter graphics have to arrive rasterized. The vector stays your master; PNG is the diplomatic passport.

Rasterizing SVG correctly starts at the viewBox

How the tool computes your PNG.

An SVG has no inherent pixel size; its viewBox defines proportions, not resolution. The converter reads that viewBox, takes the width you type into the Output width field, anywhere from 32 to 8192 pixels, and derives the height to match. A logo drawn in a 0 0 600 200 viewBox exported at 1200 wide becomes exactly 1200 by 400.

The render happens on a browser canvas, drawing the vector fresh at your target size rather than scaling a small bitmap up. That's why a 24-unit icon can become a razor-sharp 4096-pixel poster asset, something no raster upscale can honestly deliver.

Choosing export resolution when SVG becomes PNG

The arithmetic, three ways.

Choosing export resolution means working backwards from the destination. For screens, take the largest size the image will display and double it, so a logo shown at 300 pixels exports at 600 to stay sharp on retina displays. For print, multiply physical inches by 300 DPI: a 3-inch logo needs 900 pixels, a 10-inch banner needs 3000. For platform uploads, find the stated minimum in their spec and exceed it comfortably.

Oversizing is nearly free with vectors, since the PNG stays sharp at any width and compresses well when it's mostly flat color. Undersizing is the unforgivable one; a 200-pixel export placed in a 400-pixel slot looks soft forever.

Worked example: one logo SVG out to PNG at three widths

Same file, three destinations.

Input: logo.svg with viewBox 0 0 600 200, a wordmark for a small business. Export one: width 600 gives a 600 by 200 PNG at 18 KB for a website header. Export two: width 1200 gives 1200 by 400 at 41 KB for retina screens and social profiles. Export three: width 3600 gives 3600 by 1200 at 210 KB, print-ready for a 12-inch banner at 300 DPI.

Three exports, three minutes, one master. The Use another button swaps files between runs, and each PNG downloads under the original name with the extension changed.

Fonts inside SVG exports: the silent PNG saboteur

Why your text changed typeface.

When a browser draws an SVG as an image, it locks out external resources: no linked stylesheets, no webfont downloads, no referenced images. Text set in a font that isn't embedded falls back to a default typeface, which is how a carefully kerned logo comes out wearing Times New Roman. Fonts inside svg exports must either be embedded as data URIs or, far more practically, converted to outlines.

Every design tool offers this: Illustrator calls it Create Outlines, Figma flattens text on export, Inkscape has Object to Path. Outlined text is just shapes, and shapes rasterize identically everywhere.

Mistakes that blur or break an SVG's trip to PNG

The usual suspects.

Five failure modes cover nearly every bad export:

Exporting at 1x display size and shipping a logo that goes soft on every retina screen.
Leaving live text in the file, so the PNG renders with a fallback font.
Referencing external images by URL inside the SVG; they're blocked during canvas rendering and vanish from the output.
Missing viewBox attributes, which force the tool to assume a square and distort non-square art.
Forgetting the transparent background when the destination composites over dark UI, making dark logo elements disappear.

Habits for repeatable SVG exports to PNG

Set up once, export forever.

Keep a plain-text note of the widths each destination needs, 600 for the site, 1200 for social, 3600 for print, so every re-export matches the last one. Outline text in a dedicated export copy of the SVG while your editable master keeps live fonts. And after any export destined for a dark interface, preview the PNG against a dark fill before uploading, since transparency surprises only show up in context.

Beyond rasterizing: PNG tools that pick up where SVG left off

The next step, whatever it is.

If the platform wants exact dimensions rather than just a format, follow the export with the Image Resizer or the Image Cropper. Favicon Generator exists precisely so you don't rasterize a logo at six sizes by hand; it builds the whole icon pack from one upload. When the destination is bandwidth-sensitive, PNG to WEBP compresses the rasterized art for web use. And if a form demands JPG specifically, PNG to JPG finishes the trip, flattening transparency onto white on the way.

Try it now

Open SVG to PNG

The tool is one click away. No sign up, no upload, no payment.

Open SVG to PNG

Write a review