Skip to content
Utilboxes

How to convert an SVG to a PNG at the right size

Turn an SVG logo or icon into a sharp PNG for places that only accept pixel images, choose the export size, and fix missing fonts and images.

Published

Tools for this job: SVG to PNG Converter · Favicon Generator · PNG to WebP Converter

SVG is the ideal format for logos and icons: it scales to any size without blurring. But many places only accept pixel images — social media, many document editors, email signatures, upload forms. Converting to PNG solves that, as long as you choose the size carefully.

What makes SVG different

An SVG contains no pixels. It is a set of drawing instructions: a circle here, a curve there, this colour. A program draws it fresh at whatever size it is displayed, which is why it never goes blurry. A PNG, by contrast, is a fixed grid of pixels. Converting means drawing the SVG once, at a size you choose, and keeping the result.

Convert step by step

  1. Add the SVG to SVG to PNG.
  2. Set the output width. The height follows the drawing's proportions.
  3. Keep the background transparent, or switch it to white.
  4. Render and download the PNG.

The drawing is rendered in your browser at exactly the size you set.

What size to export

Because a PNG cannot be enlarged without going soft, export at the largest size you will need. A good rule is twice the size it will be displayed at, so it stays sharp on high-density screens such as phones and modern laptops.

  • A logo shown 200 pixels wide on a website: export at 400.
  • A logo for slides and documents: around 1,000–2,000 pixels wide.
  • An icon: export at the size requested, or the largest of several sizes.

When unsure, 1,024 pixels wide covers most uses.

Transparent or white?

Keep transparency for logos that will sit on coloured backgrounds. Choose white for documents and presentations that show transparency as a grey checkerboard, and for any destination that may turn transparent areas black.

When the result looks wrong

  • Text in the wrong font, or missing. The SVG refers to a font that is not available. In your drawing program, convert text to outlines (paths) and export the SVG again.
  • Missing pictures. The SVG links to an external image file that is not included. Embed the image in the SVG before exporting it.
  • Missing styles. An SVG styled by an external stylesheet loses those styles when drawn on its own. Export with styles inline.
  • Animation. Only the first frame is drawn; a PNG cannot hold animation.

Smaller files for the web

A PNG of a simple logo is usually small. For larger graphics on a website, PNG to WebP keeps the transparency at a fraction of the size. But on your own website, consider using the SVG directly — it is often smaller still and perfectly sharp.

Website icons

If the SVG is your logo and you need a browser-tab icon, the Favicon Generator accepts SVG directly and produces every size browsers and phones look for. See how to make a favicon.

Tools used in this guide

More tools for this job

All guides