Tutorials

How to Convert SVG to PNG at Any Size

ToSVG Team
7 min read

To convert SVG to PNG at any size, render the SVG at the exact pixel width you need rather than resizing a small PNG afterward. Because an SVG is a vector, you can export it at 64 pixels for a favicon or 4,000 pixels for print from the same file, and both will be sharp. You can do this in a browser, in a vector editor like Inkscape or Illustrator, on the command line, or with an online tool, and every method can keep the background transparent.

  • Always set the output size at export time; never upscale a finished PNG.
  • PNG supports transparency, so an SVG without a background rectangle stays transparent.
  • For print, multiply inches by DPI: a 4-inch-wide graphic at 300 DPI needs a 1,200-pixel-wide PNG.
  • For batch jobs, command-line tools such as rsvg-convert or Inkscape's CLI are fastest.

Why Convert SVG to PNG (and When Not To)

You convert SVG to PNG when the place you're uploading to doesn't accept SVG. Common examples are social media posts, many email clients, marketplace listings, some presentation tools and older content management systems. PNG is universally supported and keeps sharp edges and transparency, which makes it the natural raster partner for vector graphics.

Keep the SVG as your master file, though. On websites, an SVG usually loads smaller and stays crisp on every screen density, so convert only for the destinations that need it. Our SVG vs PNG comparison goes through the trade-offs in detail.

Pick the right pixel size first

Decide on the output dimensions before you export, because that's the one thing you can't fix later without quality loss.

UseTypical PNG size
Favicon / app icon source32, 180 or 512 px square
Website image on high-density screens2× the display size (e.g. 800 px for a 400 px slot)
Social media graphicPlatform's recommended size, often 1,080 px or wider
Print at 300 DPIWidth in inches × 300 (5 in = 1,500 px)

Convert SVG to PNG in Your Browser

Any modern browser can render an SVG, so you can turn that rendering into a PNG without installing anything. Opening the SVG and taking a screenshot works in a pinch, but the size is tied to your screen and you lose transparency. A better option is a few lines of JavaScript that draw the SVG onto a canvas at the exact size you want.

Open your browser's developer console on any page and run this, adjusting the file URL and width:

const url = '/path/to/logo.svg';
const width = 2000;
const img = new Image();
img.onload = () => {
  const ratio = img.naturalHeight / img.naturalWidth;
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = Math.round(width * ratio);
  canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
  const a = document.createElement('a');
  a.download = 'logo.png';
  a.href = canvas.toDataURL('image/png');
  a.click();
};
img.src = url;

The canvas starts transparent, so any area the SVG doesn't paint stays transparent in the PNG. If the SVG lacks width, height or a viewBox, the browser may not know its natural proportions; adding a viewBox attribute fixes that. The SVG must also be loaded from the same site or allow cross-origin access, otherwise the browser blocks the export.

Export SVG to PNG in Inkscape, Illustrator or Figma

Vector editors give you precise control over size, DPI and background, and they're the easiest choice for a one-off export.

Inkscape

  1. Open the SVG with File > Open.
  2. Open the Export dialog from the File menu (Shift+Ctrl+E).
  3. Choose whether to export the whole page, the drawing or just the selection.
  4. Set the width in pixels or a DPI value; the other dimension updates automatically.
  5. Pick PNG as the format, choose a file name and export.

Inkscape keeps the background transparent unless the document has a background color with opacity set; check the document properties if you get an unexpected white fill.

Illustrator

Open the SVG and use the Export As command, choose PNG, and set the resolution or a custom pixels-per-inch value in the options dialog. Make sure the background option is set to transparent rather than white. Exporting with artboards enabled crops the PNG to the artboard; without it, Illustrator crops to the artwork.

Figma

Drop the SVG onto the canvas, select it, and add an export setting in the right-hand panel. Choose PNG and a multiplier such as 2x or 4x, or type a fixed width like 1000w. Figma exports transparent backgrounds by default when the frame has no fill.

Batch Convert SVG to PNG from the Command Line

For dozens or hundreds of files, a command-line tool converts them in one go and guarantees identical settings. Three widely used options are below; install whichever fits your system.

rsvg-convert (part of librsvg) is lightweight and fast:

rsvg-convert -w 1024 input.svg -o output.png

Inkscape 1.x can run headless:

inkscape input.svg --export-type=png --export-width=1024 --export-filename=output.png

ImageMagick works too; set a transparent background and a density high enough for the size you want:

magick -background none -density 300 input.svg output.png

To convert a whole folder with rsvg-convert in a Unix shell:

for f in *.svg; do
  rsvg-convert -w 1024 "$f" -o "${f%.svg}.png"
done

Different renderers can disagree on advanced features such as filters, embedded fonts and some CSS. If the PNG doesn't match what you see in the browser, try another renderer or convert text to paths in the source SVG first. Our help article on SVG browser compatibility lists the features most likely to render inconsistently.

Avoid Blurry PNGs and Lost Transparency

A blurry PNG almost always means the SVG was rendered too small and then stretched. Fix it at the source: export at the final pixel size, or at 2× for high-density screens, and never enlarge the PNG afterward.

  • Edges look soft: raise the export width or DPI. A 300 DPI export of a 2-inch logo is only 600 pixels wide, which is small for a large banner.
  • White box behind the graphic: the SVG contains a background rectangle, or the tool fills the background. Delete the rectangle or set the export background to transparent.
  • Fonts look wrong: the converter doesn't have the font installed. Convert text to outlines in the SVG before exporting.
  • Parts are cut off: the viewBox is smaller than the artwork. Resize the document to the drawing before exporting.
  • Huge PNG file: large dimensions with photographic content produce big files. Run the PNG through a compression tool, or ask whether the destination accepts SVG after all.

It also helps to clean the SVG before converting. An SVG optimizer removes hidden elements and editor metadata that can trip up some renderers, and it makes the master file lighter for the web.

Going the Other Way: PNG to SVG

Converting PNG back to SVG is a different process called tracing, because the converter has to guess the shapes from pixels. It works well for logos, icons and line art, and less well for photos. ToSVG is a free PNG to SVG converter that does exactly this, with no signup and no watermark. If you only need a vector icon to export as PNG, you can also start from the free SVG icon library and skip tracing entirely. For tips on handling SVG files on different systems, see how to open SVG files.

Frequently Asked Questions

Does converting SVG to PNG lose quality?

It loses scalability, not quality at the chosen size. The PNG will be sharp at the pixel dimensions you export, but it will blur if you enlarge it later, so export at the largest size you need.

How do I convert SVG to PNG with a transparent background?

Use any method that keeps the background empty: the canvas script, Inkscape, Figma, or ImageMagick with -background none. Also make sure the SVG itself doesn't contain a full-size white rectangle.

What resolution should I use for print?

Multiply the printed width in inches by 300. A graphic printed 6 inches wide needs a PNG about 1,800 pixels wide.

Can I convert SVG to PNG without installing software?

Yes. A browser can render the SVG onto a canvas and save it as PNG, and online converters do the same on a server.

Need to go the other direction? Turn a PNG logo or icon into a scalable vector with the free ToSVG PNG to SVG converter.

Related articles