Image, Security & Utilities

SVG to PNG Converter

This SVG to PNG converter renders your vector graphic directly at the pixel size you choose, so the PNG stays sharp at any size. It reads the SVG’s width, height or viewBox, keeps the aspect ratio with height = width × (original height ÷ original width), and draws the result on a transparent or coloured canvas.

Last updated Reviewed by ToolsPulse Hub

Source
px
px

PNG preview

SVG size—
PNG size—
File size—

How to convert SVG to PNG

  1. Upload an .svg file, or switch to “Paste code” and paste the SVG markup, for example copied from Figma or an icon library.
  2. Check the detected SVG size, then type the width you need. With “Keep aspect ratio” ticked, the height follows.
  3. Or use a scale preset: 2× and 3× are standard for high-density phone and laptop screens.
  4. Keep the background transparent, or untick it and pick a colour.
  5. Look at the preview and download the PNG.

How the conversion keeps the image sharp

An SVG describes shapes with maths rather than pixels. A blurry PNG happens when a converter first draws the SVG at its small original size and then stretches the pixels. This tool rewrites the SVG’s width and height to your target size before drawing, so the browser renders every curve directly at full resolution:

original size = width/height attributes, or the viewBox if they are missing aspect ratio = original width ÷ original height new height = new width ÷ aspect ratio (when the ratio is locked) render = draw the resized SVG on a canvas of new width × new height export = canvas → PNG (lossless, transparency kept)

Worked example

A 24 × 24 app icon, defined with viewBox="0 0 24 24", is exported at a width of 512. The height locks to 512 and the result is a crisp 512 × 512 px PNG of 17.5 KB, with clean edges and a transparent background. The 2× preset gives a 48 × 48 px version of 1.3 KB for small interface use.

Why some SVGs look different after converting

For security, browsers do not load anything outside the SVG itself when it is drawn as an image. Linked images, external CSS files and web fonts referenced by URL are ignored. Text set in a font you do not have installed falls back to a default font. To avoid surprises, convert text to outlines in your design tool before exporting, and embed any bitmap images as data URIs inside the SVG.

Choosing the right PNG size

Export at the largest size the image will be shown, multiplied by the screen density you care about. A logo displayed 200 px wide on a website should be exported at 400 px for phones and modern laptops, which use two or three device pixels per CSS pixel. Exporting far larger than needed only adds file weight.

Key features

  • Exact pixel width and height, or 1× to 10× scale presets.
  • Locked or free aspect ratio.
  • Transparent or solid-colour background.
  • Reads width, height and viewBox, including units such as pt, mm and in.
  • Upload a file or paste code; nothing is sent to a server.

Practical use cases

App and web icons. Export one SVG at 180, 192 and 512 px for an Apple touch icon and an installable web app manifest.

Social media and documents. Platforms such as LinkedIn and many slide and word processors still prefer PNG. Export your logo at a generous width so it stays sharp when scaled down.

Email signatures. Many email clients block SVG. A PNG logo at 2× its display size looks sharp on high-density screens without a large file.

Frequently asked questions

Utilities

Image Compressor

Shrink JPG, PNG and WebP files in your browser, one or many at once.

Utilities

QR Code Generator

QR codes for links, text, Wi-Fi and email, as PNG or SVG.

This tool runs entirely in your browser and is provided as-is. See our terms and privacy policy.