Skip to content
RightYantra
Image tools

SVG to PNG

Rasterise an SVG into PNG at whatever scale you need — including 2× and 3× exports for high-density screens in a single pass. Drop a file or paste the markup directly.

Processed entirely on your device — nothing is uploaded

How to use the svg to png

  1. 1Drop an SVG file into the box above, or paste the markup into the editor.
  2. 2Choose which scales to export — 1×, 2× and 3× covers most screen needs.
  3. 3Pick transparent or white background.
  4. 4Press Convert to PNG and download each size.

Why convert a vector to pixels at all?

SVG is better than PNG for almost every screen use: it is resolution-independent, usually smaller, and can be styled and animated with CSS. If you have the choice, keep the SVG.

You often do not have the choice. Many systems simply refuse SVG uploads — social platforms, some email clients, older content management systems, print workflows, marketplace listings, and most app icon pipelines. Email is a particular offender: SVG support across email clients is poor enough that a PNG is the only safe option.

There is also a security reason behind those refusals. SVG is XML and can contain scripts, so accepting arbitrary SVG uploads is a genuine attack surface. Platforms that reject it are usually being careful rather than lazy.

Choosing an export scale

A PNG has fixed pixel dimensions, so it looks sharp only at the size it was rendered for. On a high-density display, a 1× image is stretched over roughly four physical pixels and looks soft.

This is why the standard practice is to export several scales: 1× for older screens, 2× for most modern laptops and phones, and 3× for the highest-density mobile displays. Referencing them together through a srcset attribute lets the browser pick the right one.

The scale multiplies the SVG's own intrinsic size, taken from its width and height attributes. An SVG declared at 120 × 120 exports as 240 × 240 at 2×. If the file has no width or height — only a viewBox — the fallback size setting is used instead, which is why that control exists.

What can go wrong in the render

Fonts are the most common failure. Text in an SVG that references a font by name renders with whatever the browser can find, so a design using a font you have installed and your visitors do not will silently substitute something else. The fix is to convert text to paths in your vector editor before exporting — then the letterforms are geometry rather than a font reference.

External references are the second. An SVG that pulls in an image, a stylesheet or a font from another URL will not render those resources here, because the file is rasterised in an isolated context for security reasons. Embed everything you need inside the SVG.

Filters and blend modes are supported by the browser's renderer but occasionally differ slightly from a desktop editor's output, particularly for Gaussian blurs. Check the result rather than assuming.

Transparent or white?

Transparency is the flexible default: an icon on a transparent background can sit on anything. Keep it unless you have a reason not to.

The reason not to is a destination that mishandles alpha — some older email clients and a few print workflows render transparency as black, which is dramatic and wrong. Where you cannot control the destination, compositing onto white is the safe choice.

For anything going into a print process, ask what the printer expects before exporting. Many print workflows would rather have the original vector than any raster at all, since vector artwork prints at the device's full resolution rather than at whatever you rendered.

Frequently asked questions

What resolution should I export at?

Export 1×, 2× and 3× together and let the browser choose via srcset. If you must pick one, 2× covers most modern screens.

Why is my text rendering in the wrong font?

The SVG references a font by name that the renderer cannot load. Convert text to paths in your editor before exporting.

Can I paste SVG code instead of uploading a file?

Yes. The editor accepts markup directly, which is convenient when copying out of a design tool.

My SVG has no width or height. What happens?

The fallback size setting is used as the base dimensions, then multiplied by your chosen scale.

Why did an embedded image not appear?

External references are not loaded during rasterisation. Embed images inside the SVG as data URIs first.

Is my file uploaded?

No. Rendering happens on a canvas in your browser.

Related tools