Convert SVG to PNG
An SVG has no pixels until something draws it, so converting one is really a question of what size to render at. Choose a multiple of its own size, a fixed width, or exact dimensions, and the file is rendered fresh at that resolution by your browser's own vector engine. Transparency is kept unless you ask for a background.
Use this without the search next time. Prathom Workbench puts Prathom's tools in your toolbar.
Add to Chrome — freeDrop your SVG file here, or click to browse
Up to 50 MB. Deleted automatically after 30 minutes.
What it does
- Render at any resolution, sharp at every size
- Reads width, height, or viewBox from the file
- Transparent background preserved
- Batch conversion with ZIP download
- No watermark and no account
How to use SVG to PNG
- 1
Choose how to size the output
A multiple of the SVG's own size is easiest — 2x is the usual answer for modern screens. Use a fixed width when a specification names one.
- 2
Decide about the background
Transparent is the default and is right for icons and logos. Choose white if the destination cannot handle transparency.
- 3
Drop your SVG files in
Add one or many. Each is rendered independently at the settings you chose.
- 4
Save the PNGs
Download individually or take the batch as one ZIP archive.
How it works
The interesting part is deciding what size to render at, because unlike every other conversion on this site there is no correct answer contained in the file.
Finding the intrinsic size. The tool reads the opening svg tag directly
from the markup, before handing anything to the browser. Explicit width and
height attributes win, and units are converted at 96 pixels per inch so a file
specified in points or millimeters gives sensible numbers. If those are missing
or expressed as percentages — which are meaningless without a container — the
viewBox supplies both the aspect ratio and a size. If neither exists, the
settings you chose are used directly.
This matters because browsers disagree about sizeless SVGs. Chrome falls back to 300 by 150 and Firefox reports nothing at all, so a converter that simply loads the file and asks how big it is will produce different results in different browsers for the same input.
Rendering at the target. The SVG is loaded into an image element sized to the output dimensions and drawn once at that size. This is the step that makes the result sharp: the vector description is evaluated at the final resolution, so a curve is computed against 1600 pixels rather than computed against 200 and then enlarged. Rasterizing and then scaling would produce exactly the soft result that converting from a vector is supposed to avoid.
Encoding. The canvas is written as PNG, which preserves the alpha channel untouched. If you selected a background it is painted before the SVG is drawn.
When you'd use this
Platforms that reject SVG are the most common reason, and there are many: most social networks, a lot of email clients, several app store listing forms, and plenty of document and presentation software. SVG can contain scripts, which is why it is so widely blocked on user uploads.
Favicons and app icons are the second case, though those usually want several specific sizes rather than one.
Design handoff is the third. Sending a PNG alongside an SVG means the recipient can see it immediately regardless of what software they have, while the SVG remains available for anyone who needs to scale or edit it.
Keep the SVG
The conversion only goes one way in any useful sense. An SVG is a description of shapes; a PNG is the result of drawing them once at one size. Once you have the PNG, that resolution is all you have, and needing a larger version later means going back to the SVG.
So treat the PNG as an export, not a replacement. This is the same relationship as a document and its printed copy, and the mistake people make is deleting the document.
Examples
An icon rendered for a high-density screen
This SVG has no width or height attribute at all, only a viewBox. Chrome would render such a file at a 300x150 default and Firefox at nothing, so the viewBox is read directly from the markup and used as the intrinsic size. Without that step the output would have been 1200x600 of mostly empty space.
A logo at an exact size for a press kit
The source is specified in points rather than pixels. Points are converted at 96 per inch, giving an intrinsic 267x80, and the requested 1600 width then sets the height to 480 from that ratio. The render happens at the full 1600 pixels, so the curves are crisp rather than an enlarged small bitmap.
Frequently asked questions
What resolution should I convert at?
Twice the size the image will actually be displayed at is the standard answer, because most phones and laptops now have screens with two physical pixels per CSS pixel. If an icon appears at 32 pixels on a page, render at 64. Going much beyond that adds file size without any visible improvement, since nothing can display detail the screen has no pixels for.
Why does my SVG come out the wrong size or blurry elsewhere?
Usually because the file has only a viewBox and no width or height, which leaves the rendering size undefined. Different browsers substitute different defaults, so the same file rasterizes inconsistently. This tool reads the viewBox from the markup and uses it as the intrinsic size, which is what the specification intends, and reports when it has done so.
Will the PNG keep the transparent background?
Yes, unless you choose a background color. PNG supports a full alpha channel and the canvas starts fully transparent, so anything the SVG does not paint stays transparent. That is what you want for an icon or a logo going onto an unknown background.
Can I go back from PNG to SVG afterwards?
Not meaningfully. The PNG is a grid of pixels with no record of the shapes, paths, or text that produced it. Tools that claim to convert PNG to SVG perform automatic tracing, which approximates the outlines and produces a messy, much larger file that no longer matches the original. Always keep the SVG as your source of truth.
Does it handle SVGs that reference external fonts or images?
Not reliably. Browsers deliberately render SVGs loaded as images in an isolated mode with no external network access, so a web font referenced by URL will not load and text will fall back to a default. Embedding fonts as paths before converting, which most vector editors can do on export, avoids the problem entirely.
Further reading
- An SVG Straight Out of the Export Dialog Was 38% Metadata and Spare DigitsSVG is text, and an export dialog writes a lot of text nobody asked for: who made the file, when, in what, and every coordinate to six decimal places. None of it draws anything, and on a small logo it is more than a third of the file.
- A PNG Logo Wins Up to 128 Pixels, and the SVG Wins Everywhere AboveA vector file costs the same whatever size it is drawn at, and a raster costs what its grid costs — so there is a size where one overtakes the other. On a logo it arrives sooner than most people assume, and the file-size argument is the least important half of the decision anyway.
- This PDF Kept Every Pixel and Still Came Out Looking WorstCompress a PDF and the obvious way to check what happened is to look at the resolution of the images inside. It is the number every tool reports and the one every comparison uses. It is also, on its own, close to useless — here is a file that kept every single pixel at full resolution and looked worse than one that threw three quarters of them away.