Why is my SVG converting to a very small PNG?

The converter uses the size declared in the SVG. Icons often declare small sizes like 24 x 24, and an SVG with no width and height is fitted into a default 300 x 150 box in Chrome. Set width and height on the svg tag to the pixel size you want.

How do I convert SVG to PNG in high resolution?

Edit the svg tag so width and height equal your target size in pixels, keeping the viewBox proportions, for example width="1024" height="1024" for a square icon. The vectors are rendered at that size, so the PNG stays sharp.

Does SVG to PNG keep a transparent background?

Yes. The converter does not add a background, so unfilled areas remain transparent in the PNG.

Why does the converter say it could not read my SVG?

The browser failed to load it as an image. Check that the root tag includes xmlns="http://www.w3.org/2000/svg" and that the file has no syntax errors.

How to Convert SVG to PNG at the Size You Want (High Resolution)

The short answer

To convert an SVG to a sharp PNG at a specific size, set the width and height attributes on the SVG's root tag to the pixel size you want, then convert it with the SVG to PNG converter. The converter renders the SVG at its own declared size, so an icon declared as 24 × 24 becomes a 24 × 24 PNG, and an SVG with no size at all comes out small. Transparent areas stay transparent in the PNG.

How the converter decides the PNG size

SVG is a vector format: it describes shapes, not pixels, so it has no fixed resolution. A PNG is a grid of pixels. To convert one to the other, something has to choose how many pixels to use. The converter lets your browser load the SVG as an image and uses the size the browser reports, then draws it onto a canvas of exactly that size.

We tested how Chrome sizes different SVGs. Other browsers may differ slightly when the SVG has no size information.

What the tag contains	PNG size in Chrome
`width="24" height="24"`	24 × 24
`width="512"` and `viewBox="0 0 100 100"` (no height)	512 × 512
`height="300"` and `viewBox="0 0 200 100"` (no width)	600 × 300
`width="10cm" height="5cm"`	378 × 189
`viewBox="0 0 100 100"` only	150 × 150
`viewBox="0 0 100 50"` only	300 × 150
`viewBox="0 0 1000 100"` only	300 × 30
`width="100%" height="100%"`	150 × 150 for a square viewBox

The pattern:

Width and height in pixels are used exactly.
Only one of them plus a viewBox: the other side is calculated from the viewBox proportions.
Physical units such as cm or in are converted at 96 pixels per inch.
No usable size (missing, or percentages): the browser fits the image inside a default 300 × 150 box, keeping the viewBox proportions. That is why icons exported from design tools often turn into small PNGs.

Step by step: getting a high-resolution PNG

Open the SVG in a text editor. Notepad, TextEdit (in plain text mode) or VS Code all work. SVG is just text.

Find the opening tag at the top.

Make sure it has a viewBox. It looks like viewBox="0 0 24 24". The last two numbers are the drawing's width and height in its own units. Keep it as it is.

Set width and height to the pixel size you want, in the same proportions as the viewBox. For a 0 0 24 24 icon you want at 1024 px, write width="1024" height="1024". For a 0 0 300 100 logo you want 1500 px wide, write width="1500" height="500".

Save the file and drop it into the SVG to PNG converter (up to 30 MB).

Download the PNG. It keeps the same file name with a .png extension.

Because the SVG is drawn as vectors at the new size, the PNG is sharp at 1024 px. This is different from enlarging a small PNG afterwards, which only stretches existing pixels and looks soft.

Which size should you choose?

App and web icons: export the largest size you need (for example 512 or 1024 px) and scale down from there with Resize Image. Scaling down keeps quality; scaling up loses it.
Logos for documents and slides: 1500 to 3000 px wide is usually enough for full-width use.
Retina screens: export at twice the size the image will be displayed at in CSS pixels.

Transparency

PNG supports transparency, and the converter does not add a background. Any part of the SVG without a fill stays transparent in the PNG. If you need a white background instead, add a rectangle as the first element inside the SVG, such as , or convert the PNG to JPG afterwards with PNG to JPG, which fills transparent areas with white.

Troubleshooting

"Could not read this image file." The browser could not load the SVG as an image. The most common cause is a missing namespace: the root tag must include xmlns="http://www.w3.org/2000/svg". In our test, an SVG without it failed to load. Other causes are syntax errors (an unclosed tag) or a file that is not really SVG.

The PNG is tiny. The SVG has small width and height values, or none at all. Set them to the size you need, as in the steps above.

The PNG is stretched or squashed. The width and height you typed do not match the viewBox proportions. Recalculate: new height = new width × viewBox height ÷ viewBox width.

Text looks like a different font. If the SVG uses a font by name rather than as outlined paths, the browser substitutes a font it has. In your design tool, convert text to outlines (paths) before exporting the SVG.

Images or fonts inside the SVG are missing. When a browser loads an SVG as an image, it does not fetch external files referenced inside it. Embed images as data URIs or convert text to paths.

Very large sizes fail. Browsers limit how large a canvas can be. If a huge size fails, try a smaller one.

Privacy

The SVG is read and rendered inside your browser, and the PNG is created on your device. Nothing is uploaded, so it is safe to use with unreleased logos and client artwork.

Quick checklist

Root tag has xmlns="http://www.w3.org/2000/svg".
viewBox is present.
width and height set in pixels, in the viewBox proportions.
Text converted to paths if the font matters.
Export at the largest size you need, then scale down copies.

If you then need the PNG under a file size limit, run it through Compress Image.