SVG to PNG Converter

How to convert SVG to PNG

1. Add your SVG. Drag and drop one or more .svg files onto the drop zone, pick them with the file browser, paste raw SVG markup into the code box, or press “Load example” to try a built-in sample.
2. Choose a background. Transparent is the default — best for logos, icons, and overlays. White or black is handy for documents and social posts; Custom lets you pick any color with the color picker.
3. Pick a size. The 1×–4× scale buttons multiply the SVG's intrinsic size. For pixel-exact control, type a custom width and the height is computed automatically from the artwork's aspect ratio.
4. Or grab a preset bundle. The Icon PNG set, Social / OG image, and App icon PNGs presets render commonly used sizes for each job in one click — handy when you need several exports at once instead of going one by one.
5. Hit “Convert to PNG”. Everything renders locally in your browser — the page parses the SVG, draws it to a canvas at each requested size, and hands you a preview plus a download link per size.
6. Download. Click each size's download link, or use “Download all as ZIP” to grab every result from every file in a single archive (built locally in your browser).

Preset bundles, explained

SVGs are vectors — pure vector shapes have no pixels until someone draws them at a size. (One caveat: an SVG can also embed bitmap images, and those don't gain detail when scaled up.) Presets answer the recurring question “what size do I actually need?” for the three most common jobs:

Troubleshooting: transparency, blur, and fonts

These three problems account for most “my PNG looks wrong” complaints across design forums. They are all fixable — here's what actually causes each one.

Lost transparency: the PNG comes out with a white background

This usually happens for one of two reasons. First, the converter itself fills white behind the artwork — here, just keep the Transparent background option selected. Second, the SVG itself contains an opaque white rectangle behind the drawing, which many design tools export by default. Open the SVG code, look for a <rect> that fills the whole canvas with white, and delete it. PNG supports transparency natively; if nothing paints over the pixels, they stay transparent.

Blurry or pixelated exports

Blurriness is almost never a rendering bug — it's usually a size bug. A pure-vector SVG is a set of drawing instructions, not pixels, so for vector artwork the sharpness of the PNG is decided by the pixel size you export at. Exporting at 16 px and then stretching the PNG to 512 px in an editor will always look soft. The fix: export at the final display size (or larger — you can always downscale, but you can't upscale). Use the 2×–4× buttons or type the exact pixel width, and the page rasterizes the vector paths directly at that resolution. Embedded bitmaps, filters, and effects keep their own resolution limits — scaling up can't add detail they never had.

Fonts render wrong or fall back to a default

Browsers draw SVG <text> elements with the fonts installed on the machine doing the rendering — and converters can't embed a font your system doesn't have. This is the single most common reason an exported PNG doesn't match the design. The reliable fix is to convert text to outlines (paths) in your vector editor — in Figma it's “Outline stroke / flatten text”, in Illustrator it's “Create Outlines”, in Inkscape it's “Object to Path” — before exporting the SVG. Once the letters are paths, every machine draws them identically.

Other common gotchas

• The PNG is blank. Check that the SVG actually has a viewBox or width/height. Without either, this page falls back to 512×512, but some tools give up entirely. A missing viewBox is the usual culprit.
• Colors shift. PNGs from canvas don't carry an ICC color profile. If you need print-grade color management, export from your design tool instead — this converter targets screens.
• Filters or masks disappear. Heavy SVG filters (feGaussianBlur, complex masks) can render differently across browsers because each engine implements them slightly differently. Preview at the size you need and simplify filters if you see artifacts.
• External images don't appear. An SVG that references an external image by URL can't draw it without network access — and this page deliberately never touches the network. Embed the image as a base64 data URI inside the SVG first.

Tips for the best results

• Name files sensibly. Your uploaded filename becomes the download name (cleaned up automatically), so logo.svg becomes logo-512x512.png. Gibberish in, gibberish out.
• Export once at the biggest size you need. A 1024 px master downsizes beautifully in any editor; a 32 px file can never be rescued.
• Use transparent backgrounds for anything layered. Logos, watermarks, UI icons — if the image will sit on top of other content, transparency keeps it flexible.
• Check the preview thumbnail before downloading. The checkerboard behind the thumbnail shows transparency, and the pixel dimensions are listed next to every row.

Frequently asked questions

Is this SVG to PNG converter free?

Base conversion is free: everything runs inside your own browser — no accounts, no upload quotas. Fair-use limits apply (10 MB per file, up to 20 files per batch plus one pasted SVG, 8000 px max side) to keep the tool responsive for everyone.

Will my SVG files be uploaded anywhere?

No. Files are read locally with the browser's FileReader API and drawn to a canvas on your device. Nothing is sent over the network — you can even disconnect from Wi-Fi after the page loads and it keeps working.

Why did my transparent background turn white in the PNG?

Either the tool filled white by default (keep the Transparent option selected here) or the SVG itself hides an opaque white rectangle behind the artwork. Search the SVG code for a full-canvas <rect> and remove it.

Why does my PNG look blurry or pixelated?

The SVG was rasterized at too small a size. For pure-vector artwork, sharpness comes from the export size — use the 2×–4× scale or a preset to render at the exact pixel dimensions you need.

Why do fonts look wrong in the exported PNG?

Text elements render with locally installed fonts, and converters can't embed missing ones. Convert text to outlines (paths) in your vector editor before exporting the SVG and the problem disappears.

What sizes should I use for a favicon?

A commonly used set is 16×16 and 32×32 for tabs, 48×48 for shortcuts, 180×180 for Apple touch icons, 192×192 for Android/PWA, and 512×512 as the master. The Icon PNG set preset renders all six in one click — note these are PNG files; wiring them into a site or app still needs link tags or manifest entries.

How do I make a social media preview image (OG image)?

Social preview cards expect 1200×630 px. The Social / OG image preset renders your SVG onto a 1200×630 canvas with your chosen background, so it matches what platforms ask for.

What is the maximum file size?

Files larger than 10 MB are rejected to keep the browser responsive. Most SVGs are a few hundred kilobytes at most, so this limit is rarely reached.