tooly

Convert SVG to PNG online

Rasterize SVG icons and illustrations into crisp PNG images at the exact width you need. Transparency is preserved and nothing is uploaded.

Your files never leave your browser

How to use

  1. 1

    Enter the output width in pixels, or leave it empty to keep the SVG's own size.

  2. 2

    Drop your SVG files into the box, or click to choose them.

  3. 3

    Download each PNG or grab them all as a ZIP.

Vector in, pixels out

An SVG file does not contain pixels. It is a text description of shapes: a circle at these coordinates, a path through these points, filled with this colour. That is why an SVG logo looks sharp on a phone and on a 5K monitor alike, and why the same file can be 4 KB at any display size.

Many places cannot use that description directly. Social networks, marketplaces, email newsletters, Office documents, most messengers, app stores and many content systems require a raster image. Converting to PNG renders the shapes at a fixed size, with transparency intact, so the result works anywhere an image is accepted.

Because the drawing happens at the moment of conversion, the target size costs no quality. A PNG rendered at 3000 px directly from the SVG is perfectly sharp, while the same logo exported at 300 px and enlarged afterwards would be blurry.

How the output size is decided

There is a single setting, the width in pixels. The height is always calculated from the SVG's proportions, so the drawing is never stretched.

With the field left empty, the converter uses the SVG's own size:

  1. The width and height attributes on the root <svg> element, when both are plain numbers or pixel values, such as width="512" height="256".
  2. Otherwise the viewBox: viewBox="0 0 120 80" gives 120×80 px. This is also what happens when the size is given in percent, em or centimetres.
  3. Otherwise whatever size the browser assigns the image.

Many icon sets declare a size of 24×24 or 16×16, which gives a very small PNG. Enter a width to render it larger: 512 for a crisp app-style icon, 1200 for a social preview graphic. The file list shows the resulting width × height and the file size of each PNG, so you can confirm the result before downloading.

All files in a batch use the same width. For icons of mixed proportions, that means equal widths but different heights.

Choosing a width for common uses

  • Retina and high-density screens: render at two or three times the size you display. A logo shown at 200 px wide in a page header should be 400 or 600 px wide as PNG.
  • Documents and slides: 1500 to 2000 px wide keeps a logo sharp even when the slide is projected full screen.
  • Print: multiply the printed width in inches by 300. A logo printed 4 inches wide needs 1200 px.
  • Favicons and app icons: for the full set of icon sizes in one go, the favicon generator is more convenient.

Very large widths are limited by the browser rather than by the tool. Browsers cap the total pixel count of a canvas; on iPhones and iPads the limit is around 16 million pixels, roughly 4000×4000. If a conversion fails at a large width on a phone, try a smaller one or use a desktop browser.

Why the PNG may not look like the editor's preview

The SVG is rendered by your browser as an isolated image, the same way an <img> tag on a web page would show it. For safety, an SVG in this mode cannot run scripts or load anything from the network. In practice that causes a few typical differences:

  • Fonts. Text set in a web font that is linked rather than embedded falls back to a default font. A font name that happens to be installed on your device is used, which means the same SVG can render differently on another computer. Converting text to outlines in the design tool removes the issue.
  • Linked images. Raster images referenced by URL are missing; images embedded as data inside the SVG appear normally.
  • Animation and interactivity. Hover effects and scripted behaviour do not apply, and animated SVGs are captured as a single still.
  • Effects. Filters and blend modes depend on the browser's SVG support, so complex effects can differ slightly between Chrome, Firefox and Safari.

Background, files and privacy

Empty areas stay transparent in the PNG. If you need a solid background, for example for a platform that shows transparency as black, run the result through PNG to JPG and pick the background colour there.

SVG files up to 20 MB are accepted. Rendering and PNG encoding happen in your browser, so the files, which often contain unreleased logos and brand artwork, are never uploaded. Results can be downloaded one by one or as a ZIP.

FAQ

Are my files uploaded to a server?

No. The SVG is rendered by your browser and encoded to PNG locally. Nothing is sent over the network.

Will the PNG be blurry if I choose a large width?

No. SVG is a vector format, so it is rasterized directly at the size you choose — 4000 px is as sharp as 400 px.

What size is used if I leave the width empty?

The width and height declared in the SVG, or its viewBox. SVGs without either default to 300×150.

Is transparency preserved?

Yes. Areas without shapes stay transparent in the PNG.

Why does my SVG render differently?

External images, fonts and scripts referenced from the SVG are not loaded for security reasons. Embed fonts or convert text to paths for identical output.

Read more

Related tools