Skip to tool
ecech.
Finance English Developer Text & SEO Network Time E-commerce Math Design Health YouTube Image Converters
🖼️ Image & Photo Tools

SVG to PNG at the Resolution You Actually Need, Not the One It Declares

An SVG has no resolution until you pick one. Export at 1x and it is soft on every modern screen. Set a scale or an exact width and see the result before saving.

Or paste SVG code

Output size

—

Source size

—

PNG size

—

Preview

Advertisement

How the calculation works

Why a 1× export looks soft on a modern screen exported at 1× 120 × 120 pixels the screen needs 240 and stretches what it has exported at 2× 240 × 240 pixels one image pixel per device pixel, sharp Phones are commonly 3×. Export bigger than you think you need — downscaling is free, upscaling is not.

How to Use This Tool

Drop in an SVG or paste the code. Choose a scale or an exact width, check the preview, and download. Everything happens in your browser.

Pick the resolution deliberately

An SVG is instructions, not pixels, so it has no resolution until something rasterises it. The width and height it declares are a suggestion for layout, not a sensible export size.

Modern screens have more device pixels than CSS pixels — typically two on a laptop and three on a phone. Export at 1× and the browser stretches your image to fill the space, which is exactly the softness you were using a vector to avoid. 2× is the sensible default and 3× is safer if the image will be seen on phones. Downscaling a larger PNG costs nothing; upscaling a small one cannot recover what was never there.

Two things that silently do not survive

  • Fonts. An SVG referencing font-family: Futura renders with Futura only if the machine doing the rasterising has it. Yours might; a colleague's will not, and a server certainly will not. Convert text to paths in your editor before exporting — in Illustrator, Type → Create Outlines; in Figma, flatten the text layer.
  • External references. An <image href="https://..."> or an external stylesheet will not load, because the SVG is drawn from a data URL in an isolated context with no network access. The area renders empty. Embed images as data URIs inside the SVG if you need them.
The missing-size trap <svg viewBox="0 0 120 120"> → 300 × 150 canvas <svg width="120" height="120" viewBox=...> → 120 × 120 canvas With no width or height, the browser uses the CSS default for a replaced element and your square logo comes out as a squashed rectangle.
This tool reads the viewBox and uses its proportions when the attributes are absent.

Transparency

PNG keeps the alpha channel, so anything not painted in the SVG stays transparent — the chequerboard behind the preview shows where. Add a background colour only if the destination cannot handle transparency; some print workflows and older Office versions composite it to black, which is rarely what anyone wants.

When PNG is the wrong answer

If the destination can take the SVG, give it the SVG. It is smaller for most illustrations and stays sharp at every size forever, which is the entire point of the format. Rasterise when you have to: an email client, a platform that rejects SVG uploads, a social preview image, an app icon, or somewhere a consumer might be running an SVG through an untrusted renderer.

For photographs embedded inside an SVG, PNG will produce a large file — that content wants JPEG or WebP instead. PNG is for flat colour and sharp edges, which is what most vector art is.

Advertisement

Frequently Asked Questions

What resolution should I export an SVG to PNG at?
At least 2× the display size, and 3× if it will be seen on phones. Modern screens have two or three device pixels per CSS pixel, so a 1× export gets stretched and looks soft — which is exactly the problem vectors exist to avoid. Downscaling a larger PNG is free; upscaling a small one is not.
Why does my SVG lose its fonts when converted to PNG?
Because the font has to be present on the machine doing the rasterising. If it is not installed, a fallback is substituted or nothing renders. Convert text to paths before exporting — Type then Create Outlines in Illustrator, or flatten the text layer in Figma — and the letterforms become shapes that always render.
Why did my converted PNG come out 300 by 150?
Because the SVG has no width and height attributes, so the browser used the CSS default size for a replaced element. The viewBox holds the real proportions and has to be read separately. This tool does that, so an SVG with only a viewBox still rasterises at the right shape.
Does converting SVG to PNG keep transparency?
Yes, PNG supports an alpha channel and anything unpainted in the SVG stays transparent. Add a background colour only if the destination cannot handle transparency, since some workflows composite it to black instead of white.
Why is an image inside my SVG missing from the PNG?
Because an external reference — an image href pointing at a URL, or an external stylesheet — will not load during rasterisation. The SVG is drawn in an isolated context with no network access, so that area renders empty. Embed the image as a data URI inside the SVG file.
Should I use PNG or keep the SVG?
Keep the SVG wherever the destination accepts it: smaller for most illustrations and sharp at every size. Rasterise when you have to — email clients, platforms that reject SVG uploads, social preview images, app icons. If the SVG contains a photograph, JPEG or WebP will beat PNG on size.
Is my file uploaded anywhere?
No. It is read and drawn entirely in your browser, which is also why external references cannot be fetched.

Related tools in Image & Photo Tools

🖼️Favicon GeneratorUpload a logo or type an initial, and get every icon a browser, phone or Windows tile will ask for — including a real multi-resolution .ico — with the exact head markup. 🖼️Image Colour ExtractorAveraging the pixels of a red flower on green leaves gives brown. This groups pixels into real clusters, in linear light, so every colour you get is one you can see. 🖼️Image ResizerSet a width and the height follows, or lock both and choose how the difference is handled. Batch-resize a whole folder to one width without uploading anything. 🖼️Image to PDFThe JPEG goes in unchanged and the page has a physical size. Which means the DPI is decided by how large you place it, not by the file.
#image #design #converter
Browse all Image & Photo Tools tools