Sign in
Back to Blog How to Convert SVG Code to PNG (Free, In Your Browser)

How to Convert SVG Code to PNG (Free, In Your Browser)

Paste SVG code and download a PNG at 500 to 2000 px with transparency kept. No sign-up, nothing uploaded. Here's how it works and what to watch for.

Snipsco Team·· 4 min read

You have a chunk of SVG markup: an icon copied from a library, a logo exported from Figma, or a chart your code generated. Now you need it as a PNG, because Slack, X, Google Slides or an email client won't take the SVG. This is the quickest way to get there without installing anything.

The short version

  1. Open the SVG code to image converter.
  2. Paste your SVG markup, or upload a .svg file (up to 500 KB).
  3. Pick a size: 500, 1000, 1500 or 2000 px.
  4. Click Download PNG, or copy the image to your clipboard.

The conversion runs in your browser. Your SVG is never sent to a server, and you don't need an account.

Why PNG and not just the SVG?

SVG is the better format for the web. It's tiny, it scales to any size, and you can style it with CSS. The problem is everywhere else. Most chat apps, social networks, slide tools and email clients only accept raster images. Some show a broken image, some show the raw XML, and some refuse the upload.

PNG is the safe choice for those places. It's lossless, so lines and text stay crisp, and it supports transparency, which matters for logos and icons.

Transparency: what you get and what you don't

PNG keeps transparency. If your SVG has no background rectangle, the PNG has no background either. Drop it on a dark slide or a colored banner and it sits there cleanly.

Two things catch people out:

  • Your SVG might have a background you forgot about. Design tools often export a full-size <rect> filled with white. If the PNG comes out with a white box, look for that <rect> near the top of the markup and delete it before converting.
  • The preview's checkerboard isn't in the file. Some viewers show a white or black fill behind transparent areas. That's the viewer, not your PNG.

If you want a solid white background instead, download JPG. It's covered in SVG code to JPG.

Picking a size from 500 to 2000 px

The size you choose is the longest edge. A square icon at 1000 px comes out 1000×1000. A 2:1 banner at 1000 px comes out 1000×500. The aspect ratio always comes from your SVG.

Rough guide:

Use Size
Favicon source, small UI icon, chat emoji 500 px
Blog post image, README, docs 1000 px
Slides, social posts 1500 px
Print-ish use, retina hero images, anything you might crop 2000 px

When in doubt, go bigger. Scaling a 2000 px PNG down looks fine. Scaling a 500 px PNG up looks blurry, and you'd have to come back and convert again.

Make sure your SVG will render

The converter needs an actual <svg> element. A few habits avoid most failures:

  • Include a viewBox. Without it, the browser may not know the drawing's real proportions, and you can get a clipped or oddly sized result. viewBox="0 0 24 24" is typical for icons.
  • Inline your fonts or convert text to paths. If the SVG uses a font your browser doesn't have, it falls back to a default font. For logos, convert the text to outlines in your design tool first.
  • Avoid external references. Images linked from other domains or external stylesheets may not load. Embed what you need.
  • Expect scripts to be stripped. The tool sanitizes the SVG before rendering, so anything interactive is removed. You'd lose it in a PNG anyway.

A quick example

Here's a small icon you can paste to try it:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#7c3aed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <polyline points="16 18 22 12 16 6"/>
  <polyline points="8 6 2 12 8 18"/>
</svg>

Paste it, pick 1000 px and download PNG. You get a purple < > icon on a transparent background, sharp at that size.

Command line alternatives

If you're converting hundreds of files in a build step, a CLI makes more sense. rsvg-convert -w 1000 icon.svg -o icon.png (librsvg) or Inkscape's --export-type=png both work well. For one-off conversions, pasting into a browser tab is faster than remembering flags.

Need HTML instead?

If your graphic is HTML and CSS rather than SVG, use the HTML code to image converter. It works the same way.

FAQ

Is the SVG to PNG converter free? Yes. There's no account, no watermark and no daily limit on the SVG converter. It runs entirely in your browser.

Does my SVG get uploaded anywhere? No. The conversion happens locally in your browser tab, and your code never leaves your machine.

Why does my PNG have a white background? Your SVG almost certainly includes a background <rect>. Delete it from the markup and convert again, and the PNG will be transparent.

What's the largest PNG I can export? 2000 px on the longest edge. For anything larger, use a CLI tool like rsvg-convert or Inkscape.