Skip to main content

SVG to PNG Converter

Rasterise SVG to PNG or WebP at any resolution. Paste the markup or drop in a file, then export at 2×, 4×, up to 16× or at an exact pixel width. Transparency is preserved, or composite onto a solid colour. Your browser does the rendering, so the result matches exactly what a page would show — and nothing is uploaded. Free, no signup.

Paste SVG markup or upload a file, and the rendered PNG preview appears here.

The SVG is rasterised by your own browser, exactly as it would render on a page. Nothing is uploaded.

How to Use This Tool

  1. Add your SVG — paste the markup straight in, or switch to the upload tab and drop a .svg file. Press Load sample to see it working.
  2. Choose the output size — pick a scale multiplier for a quick export, or set an exact output width and the height follows the aspect ratio.
  3. Set the background — leave it transparent for logos and icons, or composite onto white, black or a custom colour.
  4. Download — export as PNG for universal support, or WebP for a smaller file at the same quality.

About SVG and Rasterisation

SVG is a vector format: it stores shapes as mathematical descriptions rather than as a grid of pixels, which is why an SVG logo stays perfectly sharp whether it is rendered at 16 pixels or 16,000. PNG is a raster format, storing an actual grid of pixels at one fixed resolution. Converting from SVG to PNG is therefore a one-way operation called rasterisation: you are choosing a resolution and baking the shapes into pixels at that size. Going the other way is not really possible, because tracing a bitmap back into vectors is an approximation rather than a conversion.

You would think SVG being better would settle the question, but there are real reasons to rasterise. Email clients have poor and inconsistent SVG support, so any logo in an HTML email needs to be PNG. Social sharing images referenced by og:image must be raster, since crawlers will not render SVG. Some content management systems, marketplaces and ad platforms reject SVG uploads outright, partly because SVG can contain scripts and is therefore treated as a security risk. Favicons need raster fallbacks. And any app-store-style icon requirement is specified in pixels.

Because rasterisation locks in a resolution, the scale factor is the most important control here. Modern displays commonly run at 2 or 3 device pixels per CSS pixel, so a logo you intend to display at 200 pixels wide should be exported at 400 or 600 to look sharp on a retina screen. Exporting at exactly the display size is the single most common cause of a blurry logo. The cost of over-exporting is only file size, and since you can always scale a large PNG down cleanly but never scale a small one up, erring high is the safer mistake.

One behaviour surprises people: the browser renders the SVG the way it would render it on a page, which means external references do not resolve. Fonts referenced by name are only available if the system has them, images linked from elsewhere will not load, and anything pulled from an external stylesheet is ignored. This is a security boundary rather than a bug, and the fix is to make the SVG self-contained: convert text to paths before exporting from your design tool, and embed any raster content as a data URI. If your export looks wrong here but right in your editor, missing fonts are the usual culprit.

Transparency is worth thinking about before you export. PNG supports a full alpha channel, so a transparent SVG stays transparent, which is what you want for a logo that has to sit on different backgrounds. But if the destination cannot handle transparency, or if the logo is dark and might land on a dark background, compositing onto a solid colour here is safer than discovering the problem later. WebP also supports transparency and will usually give you a noticeably smaller file than PNG at the same quality, which makes it the better choice anywhere you control the delivery.

Pair this with our Image Compressor to shrink the exported PNG, the Favicon Generator for a full icon set, and the Image to WebP Converter for modern delivery formats.

Frequently Asked Questions

Why convert SVG to PNG at all if SVG scales better?

Because plenty of places will not accept SVG. Email clients have patchy and inconsistent support, so logos in HTML email have to be raster. Social sharing images referenced by og:image must be PNG or JPEG, since crawlers do not render SVG. Many content management systems, marketplaces and advertising platforms block SVG uploads because SVG can contain JavaScript and is treated as a security risk. App icons and favicons need raster sizes. SVG remains the right format for your own website, but PNG is the interchange format for everywhere else.

What resolution should I export at?

Export at two to three times the size you intend to display, because modern screens pack two or three device pixels into each CSS pixel. A logo shown at 200 pixels wide should be exported at 400 or 600 to stay sharp on a retina display. Exporting at exactly the display size is the most common reason a logo looks soft. The only penalty for going larger is file size, and since a large PNG scales down cleanly while a small one cannot scale up, it is always safer to overshoot. For print, work backwards from physical size at 300 DPI.

Why does my exported PNG look different from the SVG in my editor?

Almost always fonts. When the browser rasterises an SVG it does so in an isolated context where external resources are not loaded, so a font referenced by name is only used if your system happens to have it, and otherwise falls back to a default. Linked images and styles pulled from external stylesheets are also ignored. The fix is to make the SVG self-contained: convert text to paths before exporting from Figma, Illustrator or Inkscape, and embed any raster content as a data URI. That also makes the file render identically everywhere else.

Does the PNG keep transparency?

Yes, by default. PNG supports a full 8-bit alpha channel, so transparent areas in your SVG stay transparent, which is what you want for a logo that will sit on varying backgrounds. If you would rather have a solid background, choose white, black or a custom colour and the image is composited onto it before export. That is worth doing when the destination cannot handle transparency, or when a dark logo might end up on a dark background. WebP also supports transparency and produces a smaller file, so use it wherever you control the delivery.

Can I convert PNG back to SVG?

Not properly. Rasterisation discards the shape information entirely and leaves you with a grid of pixels, so there is nothing left to convert back. What tracing tools do is approximate: they analyse the bitmap and generate vector paths that roughly follow the edges they detect. That works acceptably for simple, high-contrast line art and logos, and badly for photographs or anything with soft edges and gradients. The results usually need manual cleanup. If you need vectors, go back to the original design file rather than trying to recover them.

What does the scale setting actually do?

It multiplies the SVG intrinsic size, which is taken from its width and height attributes or, if those are missing, from its viewBox. A 200 by 120 SVG at 4 times scale produces an 800 by 480 PNG. If you would rather specify the output directly, set an exact width and the height is calculated from the aspect ratio so nothing is distorted. When an SVG has no explicit width and height the tool tells you it used the viewBox instead, because that is a common source of unexpected output sizes with icon sets.

Is exporting SVG in the browser safe for sensitive files?

Yes. The SVG is turned into a blob URL, loaded into an image element and drawn to a canvas entirely within your own browser. Nothing is sent to a server, nothing is logged, and no copy survives closing the tab. Using a blob URL rather than a remote reference also means the canvas is never tainted, which is what allows the export to work at all. If your SVG contains a script tag it is not executed during rasterisation, so pasting an untrusted SVG here does not run its code.

Should I use PNG or WebP for the export?

Use PNG when you need maximum compatibility: email, older software, anything you are handing to a third party, or any platform with an explicit PNG requirement. Use WebP when you control delivery on the web, because it supports the same transparency while producing a file typically 25 to 35 percent smaller, and it is supported by every current browser. For logos and flat artwork specifically, the difference can be larger still. There is no quality reason to prefer PNG on the web any more, only a compatibility one.

Brand Assets in Every Format You Need

Our Graphic Design team delivers complete asset kits — vector masters plus every raster size and format your web, email and print channels require.

Let's Talk