Image Tools·5 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 doing it carefully is the difference between a sharp logo and a blurry one. Resolution choice and font handling are where it is won or lost.

Open the free SVG to PNG Converter 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 cannot 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 will not render SVG at all, so signature logos and newsletter graphics have to arrive rasterized. The vector stays your master, and PNG is the passport it travels on.

How the viewBox sets your PNG's shape

How the tool computes your PNG.

An SVG has no inherent pixel size. Its viewBox defines proportions, not resolution. The converter reads that viewBox, or the width and height attributes if there is no viewBox, takes the width you type into the Output width (px) field, up to 10,000 pixels, and derives the height to match. You can also size by height or by a scale such as 2x, and the result is shown before you convert. 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 is 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.

Work 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: 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. Quick buttons for 256, 512, 1024, 2048 and 4096 cover the usual icon and asset sizes in one click.

Oversizing is nearly free with vectors, since the PNG stays sharp at any width and compresses well when it is 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. Change the width and press Convert to PNG again for each size. Each PNG downloads under the original name with the extension changed, and Use another clears the page for the next file. For a whole icon set at one size, drop every SVG at once and download a single ZIP.

No file at all? Paste the markup, starting with <svg, into the code box and click Use pasted code. The preview appears on a checkerboard so you can see what will be transparent, and the download is named pasted.png.

Fonts inside SVG files: 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 is not embedded falls back to a default typeface, which is how a carefully kerned logo comes out wearing Times New Roman. Any text in the file must either carry its font as an embedded data URI or, far more practically, be converted to outlines.

Every design tool offers this: Illustrator calls it Create Outlines, Figma can flatten text into shapes, and 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 or stylesheets by URL inside the SVG. They are blocked during canvas rendering, and the tool may report that the browser could not render the file.
Missing both a viewBox and width and height attributes, which leaves the tool no choice but to assume a square. It tells you when it does, but non-square art will be distorted.
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. If a platform needs a solid background, turn off Transparent background and pick a colour before converting.

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 Crop Image. The Favicon Generator exists 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, the PNG to WebP Converter compresses the rasterized art for web use. And if a form demands JPG specifically, the PNG to JPG Converter finishes the trip, filling transparent areas with a colour you choose, white by default.

Try it now

Open SVG to PNG Converter

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

Open SVG to PNG Converter

Write a review