Skip to content
HexSlate

SVG to PNG Converter

No SVGs yet

Drop a few above. Icon sets convert in one go.

An SVG has no size until you give it one

A raster image is a grid of pixels and knows exactly how many. An SVG is a description of shapes in an abstract coordinate space, and the only thing tying that space to pixels is the width and height on its root element, which most icon sets omit deliberately so the icon scales to whatever box it lands in.

Drawn to a canvas with no size, such a file rasterises at the browser's default replaced element size: 300 by 150 pixels in every current browser. That is where a blurry logo comes from. This page reads the viewBox to recover the aspect ratio, writes explicit dimensions onto the root before drawing, and asks you for the target instead of guessing. Files that are marked viewBox only are exactly the ones this matters for.

External references taint the canvas

If an SVG contains <image href="https://…">, an @import, or a webfont loaded from another origin, drawing it marks the canvas as cross-origin-contaminated. The draw itself succeeds. The failure comes later, at toBlob, as a SecurityError with no explanation of which file caused it. That is a genuinely miserable thing to debug.

So the source is scanned first and the reference is named before anything is drawn. The fix is to inline it: convert an external image to a data URL, and convert text to outlines so the font is no longer needed. Fragment references like href="#gradient" and data URLs are safe and are ignored by the check.

Common problems

  • The text came out in the wrong font. The SVG names a font that is not installed, so the browser substituted one. Convert text to paths in your vector editor before exporting; it also removes the tainting risk.
  • The PNG has a transparent background and you wanted white. SVG has no background by default. Turn on the white background option, which matters for anything going into a document or an email.
  • The edges look soft at small sizes. Rasterising a detailed vector at 16px is genuinely hard, and the result will never match a hand-tuned bitmap. Draw icons on a pixel grid at the size they will be used.
  • Nothing rendered at all. An SVG with a broken root, or one that is really an EPS or a PDF with the wrong extension. The check here reads the actual bytes rather than the file name.

Frequently asked questions

Can it convert PNG back to SVG?

No, and nothing honest can. Going from pixels to vectors requires tracing, which invents shapes the image never contained and usually produces a file larger than the source. That is a different tool with different failure modes, and it is not this one.

What scale should I export at?

Twice the display size covers every current high-density screen. For an app icon set, export each required size separately rather than scaling one large PNG down: the vector renders cleanly at each size and a downscaled bitmap does not.

Why PNG and not JPEG?

Because vector art is flat colour with hard edges, which is precisely what JPEG is worst at and what PNG is best at. A JPEG of a logo is both larger and visibly ringed around the edges. If you need a smaller file, convert the PNG to WebP afterwards.

Does it run in a worker like the other image tools?

No, and that is deliberate. createImageBitmap refuses SVG blobs in most browsers, so the only reliable path is an <img> element, which does not exist in a worker. Drawing one vector document is nothing like the cost of decoding a 20-megapixel photograph, so the main thread is fine here.