Export SVG as PNG at any size: viewBox, transparency, safety

To turn an SVG into a PNG, you have to choose the pixel size yourself, because an SVG is a drawing described in text and has no pixels of its own. Open an SVG converter, load the file or paste its code, pick PNG, JPG or WebP, say whether you want a scale, a width or a height, and download. If you want a see-through background, choose PNG or WebP and leave the background transparent. This article explains how the natural size of an SVG is worked out from its viewBox and its width and height, how to export for sharp results, and why an SVG from an unknown source deserves the same care as any other file.

Why convert at all

SVG is the best format for logos and icons: it is tiny, it stays sharp at any size, and you can edit it as text. But many places do not accept it. Social networks, e-mail clients, slide decks, app stores, marketplaces and most upload forms ask for a PNG, a JPG or a WebP. Converting means drawing the SVG on a pixel grid of a size you choose and saving that grid. Once it is a PNG, it is fixed: you can shrink it, but enlarging it later makes it soft. That is why you pick the size when you convert, not afterwards.

viewBox versus width and height

Two different things are easy to confuse here.

• `viewBox="minX minY width height"` defines the drawing's own coordinate system: the rectangle of the drawing that is visible. It has no unit.
• `width` and `height` on the root <svg> element say how large the drawing is shown.

Take <svg viewBox="0 0 24 24">, which is how most icon sets ship. It says "the drawing is a 24 by 24 square" and nothing about pixels. The converter reads the natural size like this:

Lengths with units are converted at 96 pixels per inch, so width="10cm" height="5cm" is about 378 by 189 pixels and width="3in" is 288. A percentage, such as width="100%" height="100%", has no fixed size, so the viewBox is used instead. That is common in the wild, and it is why a file that "has no size" still converts correctly.

One more rule is worth knowing. When width and height have a different shape from the viewBox, for example width="200" height="200" viewBox="0 0 100 50", the drawing is fitted inside the box and centred, with empty bands above and below. That is how a browser draws it, and the converter follows the browser.

Converting step by step

1. Open the SVG converter. Drop the file on the box, choose it, or paste the SVG code into the text field. "Try an example" loads a small icon.
2. Choose the Format. PNG is lossless and keeps transparency. WebP is usually smaller and keeps transparency. JPG is for destinations that insist on it and has no transparency.
3. Under Size, pick Scale, Width or Height. With a width or a height, the other side follows the aspect ratio, so the picture is never stretched.
4. For JPG and WebP, set the Quality. The slider starts at 92.
5. Decide about the background. With "Transparent background" on, PNG and WebP keep the see-through areas. Switch it off to fill the image with a colour of your choice. JPG always gets a fill, white by default.
6. Check the line under the preview, which gives the output size in pixels and the file size, then download.

The picture is drawn on a canvas in your browser. The file is not uploaded, so there is no queue and an unpublished logo stays private.

Choosing the size

Start from where the image will be used, not from the SVG. A few worked numbers for a 24 by 24 icon:

For a wide logo with viewBox="0 0 24 12", a width of 480 gives 480 by 240. If the image will show on a high-density phone screen at 100 pixels wide, export at 200 or 300 pixels wide so it stays crisp. The longest side can be up to 8192 pixels, and the total area is limited to about 50 million pixels, which is what a browser can draw reliably. Asking for more gives a message instead of a blank file.

Always export larger than you think you need. Enlarging an SVG is lossless, because the converter draws it again at the new size. Enlarging the PNG you exported from it is not. For a favicon or an app icon set, the favicon generator makes every size at once; the article on favicon sizes explains which ones matter.

PNG, JPG or WebP for an SVG

Logos, icons and diagrams have flat colours and sharp edges. PNG suits them: nothing is lost and transparency is kept. WebP is smaller for the same picture where the destination accepts it. JPG adds faint blocky noise around hard edges at low quality, so use a high setting if you must use it. The article on JPG, PNG and WebP gives the full comparison. To shrink the result further afterwards, the image toolkit can compress it.

Why an SVG can be unsafe, and what the converter removes

An SVG is not only a picture. It is an XML text file, and the format allows things a PNG never could: <script> elements, event attributes such as onload and onclick, <foreignObject> blocks that hold HTML, links to other files, and style rules that import or load things from the web. A browser that opens an SVG file as a page, or an SVG pasted straight into a web page, can run its scripts. The same SVG used as an image, as in an <img> tag, is not allowed to run scripts or fetch outside files.

So an SVG from an unknown source should be treated like any file you do not trust. This converter takes two precautions. It loads the cleaned file only as an image, never as a page. Before that, it removes:

• script, foreignObject, frame, embed, object, audio, video and canvas elements, and link, meta and base elements;
• every attribute that starts with on, and values that use javascript:;
• links and CSS url() values that point outside the file, and CSS imports. Links to other parts of the same drawing and embedded raster images (PNG, JPEG, GIF, WebP and similar) are kept;
• animation elements that try to change a link.

It also refuses files that declare XML entities, because that is how an "XML bomb" is built, and real icons do not need them. When something was removed, the tool shows how many items, and none of them was run. The original file on your disk is not changed, so clean it separately if you plan to publish it.

When the result looks wrong

• The text uses a different font. An SVG drawn as an image cannot download web fonts. Convert the text to outlines in your drawing program first, or embed the font in the file.
• The picture is blank. Check that the markup is complete and the root element is svg. A missing xmlns is fixed automatically; an unclosed tag is not.
• An external image is missing. Images that point to a web address are removed on purpose. Embed them as data inside the file instead.
• An icon turns black. Icon sets often use fill="currentColor". Drawn as an image there is no surrounding text colour, so it comes out black. Replace it with a real colour in the file.
• The edges look soft. Raise the size and export again from the SVG.
• Part of the drawing is cut off. The viewBox is smaller than the artwork. Widen it, or fix the artboard in your drawing program.

A short checklist

Decide the pixel size first and export larger than you need. Check that the root element has a viewBox. Use PNG or WebP for transparency and JPG only when required. Treat an SVG from a stranger as untrusted, and rely on the converter's cleaning, not on the file's good manners.