Converting SVG to PNG at the right size

SVG is the better format for logos wherever it is supported, but plenty of places still want PNG: email, Google Slides, app store assets, some CMS fields, chat app emoji and the occasional upload form that rejects anything else. Converting is easy. Converting so the result is sharp, correctly sized and cleanly transparent takes a little more care.

The short version: decide the pixel sizes first, render each one directly from the SVG, keep the background transparent, and inspect the edges.

Work out the pixel sizes first

A PNG has a fixed number of pixels. Screens with higher pixel density draw each CSS pixel with more physical pixels, so an image displayed at 32 by 32 CSS pixels needs 64 by 64 real pixels on a 2x screen and 96 by 96 on a 3x screen to look sharp.

Most phones are 2x or 3x, and many laptops are 2x. If you can serve only one file, 2x is the usual compromise: sharp on most screens, and for small logos the extra bytes are modest. If you control the HTML, provide all three and let the browser choose:

<img
  src="/logos/sol-32.png"
  srcset="/logos/sol-32.png 1x, /logos/sol-64.png 2x, /logos/sol-96.png 3x"
  width="32"
  height="32"
  alt="Solana"
/>

The width and height attributes stay at the display size. The browser picks a file by density and scales it to fit. The size cheat sheet lists common display sizes for lists, cards, favicons and app icons.

Render each size from the SVG

Render every size directly from the vector. Don't export one big PNG and shrink it.

When a renderer draws an SVG at 48 px, it computes how much of each pixel every shape covers and anti-aliases the edges for that pixel grid. When you shrink a 1,024 px PNG to 48 px, a resampling filter averages pixels that were never designed for that grid. Good filters give acceptable results; poor ones give soft or jagged edges, and thin lines can fade to near-invisible.

Upscaling is worse. A 64 px PNG enlarged to 256 px is blurry, and no setting fixes that. Go back to the SVG.

At the smallest sizes, 16 and 24 px, even direct rendering can blur thin horizontal and vertical lines that fall between pixels. Icons drawn on a pixel grid avoid most of this; the pixel snapping guide explains the cause.

Keep the background transparent

PNG supports full transparency, and logos usually need it, since the same file may sit on white, gray or dark backgrounds. A few things quietly break it:

• A background shape in the SVG. Some exports include a full-size white or black rectangle behind the logo. Open the file and look for a <rect> or <path> covering the whole viewBox as the first shape.
• A tool default. Some export dialogs add a background color unless you turn it off. Look for a background or matte setting.
• The wrong format. JPEG has no transparency. If the output is a .jpg, transparency is gone.

Some logos are meant to have a background. The background style on Web3 Icons puts the mark on its own colored tile, so the tile in the PNG is intentional there.

Tools

Design tools. Figma, Illustrator, Affinity Designer and Inkscape all export PNG at chosen sizes or scale factors. Figma's export panel takes multiple rows, such as 1x, 2x and 3x, and produces all of them at once. Export the icon's full frame, not just the shape inside it, so the padding around the logo is kept.

The browser. A browser is an SVG renderer, and a few lines of JavaScript turn it into a converter:

export async function svgToPng(svgText, size) {
  const url = URL.createObjectURL(new Blob([svgText], { type: 'image/svg+xml' }))
  try {
    const img = new Image()
    img.src = url
    await img.decode()

    const canvas = document.createElement('canvas')
    canvas.width = size
    canvas.height = size
    canvas.getContext('2d').drawImage(img, 0, 0, size, size)

    return await new Promise((resolve) => canvas.toBlob(resolve, 'image/png'))
  } finally {
    URL.revokeObjectURL(url)
  }
}

Keep width and height attributes on the root <svg>. Some browsers won't draw an SVG without an intrinsic size onto a canvas, or draw it at a default size. SVG files downloaded from Web3 Icons have both attributes, set to the export size you chose. This snippet assumes a square icon; for other shapes, compute the height from the viewBox ratio. External resources referenced inside the SVG, such as web fonts or linked images, won't load in this context.

Command-line renderers. For batches, such as every logo at three densities, command-line tools built on SVG rendering libraries are the practical choice. They take an input file, an output file and a target width or height, and can be scripted over a folder. Renderers differ slightly in how they handle filters, masks and text, so compare a few outputs against the browser before converting hundreds of files.

Check the edges

Open each PNG and inspect it before you ship:

• Zoom to 400 to 800% in a viewer that shows pixels as hard squares. Edges should have a smooth one or two pixel ramp of partial transparency, not a stair step and not a wide blur.
• Look for halos. Place the PNG on a dark background and a light one. A pale fringe around a logo on dark, or a dark fringe on light, usually means it was rendered onto a solid color and the background was removed afterwards.
• Check for clipping. If a part of the logo touches the edge of the image and looks cut off, the artwork extends beyond the viewBox. Fix the SVG rather than the PNG.
• Compare the colors. Export in sRGB. A PNG tagged with a different color profile can look shifted in some apps.
• Check the file size. A 64 px logo PNG is typically a few kilobytes. If it is much larger, run it through a lossless PNG optimizer.

Finally, ask whether you need the PNG at all. On the web, the SVG is usually smaller, sharp at every density, and one file instead of three. The SVG, PNG or WebP guide compares the formats in more detail, and the email guide covers the main place where PNG is still required.