Convert SVG to PNG online, free

This is how photographs work too, which is why PNG suits photographic content that vectors could never describe. For a tour of how the common formats differ, MDN keeps a clear image file type reference.

The consequence follows at once. Scale a vector up and it stays sharp forever, because the instructions do not change, only the size they paint at. Scale a raster up past its grid and the squares get bigger and blockier, because there is no extra detail hiding between the pixels. So when you convert SVG to PNG, you take a file that could be any size and pin it to one, trading the vector's freedom for a file the rest of the world will open without complaint.

Why convert the scalable format to a fixed one at all

If vectors are so flexible, the obvious question is why give that up. The answer is that the target often demands it. Social platforms accept PNG and JPG for uploads and reject SVG outright, partly for security and partly because they want a predictable grid of pixels they can resize on their own servers. Upload a logo SVG to most banner fields and you get an error.

App and operating system pipelines are the same story. iOS and Android icon sets expect PNG files at named sizes, and a Windows or older macOS application may have no SVG renderer and will display nothing if you hand it one. Email clients are notorious here: many strip or ignore SVG entirely, so a vector logo in a signature shows up broken for half the people who receive it.

Marketplace listings, document tools, and presentation software pile on. An online store may only accept PNG product images at a set dimension. Word and older slide tools handle PNG far more reliably than SVG, which can render inconsistently across versions.

One mental model helps: treat the SVG as the source of truth and the PNG as a delivery format. You are not replacing the vector, only stamping out a pixel copy at the exact size a destination needs, and you can stamp as many sizes as you want from the one master. Once a PNG is stamped, you can compress the PNG losslessly before you ship it.

Output resolution is the setting that matters most

Because a PNG is locked to its dimensions, the size you rasterize at is the most consequential choice you make. Pick too small and the image looks soft and blocky wherever it is shown larger. Pick needlessly huge and you ship a file many times bigger than it needs to be. The right answer comes from one question: at what pixel size will this image appear on screen?

Rasterize at the size you will display, and the PNG will be crisp. If a logo sits in a 240 by 80 pixel slot, render the SVG at 240 by 80 and it lands pixel for pixel. The imgkilo resize panel has an Exact mode for this, so the PNG comes out at the dimensions you type rather than being capped at a maximum.

High-DPI screens change the math, and they are everywhere now. A Retina display and most modern phones pack two or three physical pixels into every CSS pixel of layout space. A PNG rendered at exactly the display size looks soft there because the device wants more pixels than the file holds.

The fix is to rasterize at two or three times the display size. A logo shown at 240 by 80 should be exported at 480 by 160 for a 2x screen, or 720 by 240 for 3x, then displayed at the smaller CSS size. The browser packs the extra pixels in and the result reads as sharp.

There is a real tradeoff to weigh. Rendering at 3x produces a file roughly nine times larger in pixel count than 1x, wasted bytes if the image only appears on standard screens. The common compromise is 2x, which covers most high-DPI devices without the heaviest file penalty.

For an icon with a hard size requirement, like a 192 pixel PWA icon, render at the exact number the spec asks for. If you guess wrong, you can resize the PNG afterward rather than rasterizing again from scratch.

Transparency carries across, and what you can do with it

PNG supports a full alpha channel, so every pixel can be fully opaque, fully transparent, or anywhere in between. SVGs lean on this constantly. A logo with no background rectangle is transparent everywhere except the artwork itself, and that transparency survives the trip to PNG unchanged. imgkilo draws the SVG onto a Canvas that starts empty, so wherever the SVG paints nothing, the PNG records a transparent pixel.

This is not limited to the all-or-nothing case. Soft drop shadows, gradients that fade to nothing, and the anti-aliased edges that keep curves smooth all rely on partial transparency, and PNG preserves every level of it. That is why PNG, not JPG, is the right raster target for an SVG with any transparency at all. For the web specifically, you can later convert the PNG to WebP and keep that same transparency at a smaller size.

Because the background stays clear, you stay in control of what sits behind the image later. Drop the transparent PNG onto a white card, a dark header, or a photo, and the artwork floats correctly over all of them. If you do want a solid backdrop baked in, add a filled rectangle in the SVG before you rasterize, so you can see how it will look.

One caution. If your SVG was authored with a transparent background but you need it on white, do not assume the PNG will fill it. It will not.

The PNG keeps the transparency, and some viewers show transparent areas as a checkerboard, which can look like a bug when it is working as intended. Decide what belongs behind the artwork before you convert.

Generating a full icon and favicon set from one SVG

Icons are where the convert-at-many-sizes pattern pays off most, because a single logo SVG has to appear as a dozen different PNG files across browsers, app stores, and home screens. The point of keeping a vector master is that you can produce every one of those sizes from it without redrawing anything, since the SVG format is built to render at any dimension on demand.

A favicon needs the small classic sizes. Render the SVG at 16 by 16 for the browser tab, 32 by 32 for bookmarks, and 48 by 48 for some Windows contexts. These are tiny, so check that your artwork still reads at 16 pixels. A detailed logo often needs a simplified version for the smallest sizes, which is a design choice made in the SVG, not something the converter can do for you.

Web app and home screen icons jump to larger fixed sizes. The Apple touch icon is 180 by 180, the PWA manifest commonly asks for 192 by 192 and 512 by 512, and app store submissions reach 1024 by 1024. Each is a hard requirement from a spec, so render at the exact number rather than rounding. With imgkilo you set the dimensions, drop the SVG, and get the PNG at that precise size with transparency preserved.

The practical workflow is to keep one clean SVG and rasterize it once per required size, changing only the dimensions between each conversion. The result is a matched icon set, every file pin-sharp at its own size, all traceable back to one source you can edit once and re-export when the logo changes.

Honest limits, and how to avoid the common traps

The first limit follows from how raster works: a PNG cannot be scaled back up cleanly. Once you rasterize at 256 pixels, that PNG holds 256 pixels of detail and no more. Blow it up to 1024 and software has to invent the missing pixels, which always looks soft or blocky.

This is why the SVG must stay your master. If you later need a bigger version, go back to the SVG and rasterize fresh at the new size.

Fonts are the second trap, and they catch people often. An SVG that references a font by name does not contain that font. When the browser draws it, it uses whatever font of that name is installed on your machine, and if the exact one is missing it substitutes another, baking the wrong typeface into the PNG permanently.

The fix is to convert text to outlines, sometimes called paths, in your design tool before you export the SVG. That turns each letter into a fixed shape that no longer depends on any installed font, so it rasterizes the same everywhere.

External and scripted content is the third trap. SVG can pull in images by URL, run small scripts, or apply certain filters, and these do not always survive rasterization the way they look in a live browser. A linked external image may not load during conversion, and script-driven animation collapses to whatever single frame gets drawn. If your SVG depends on anything beyond static shapes, paths, and embedded data, check the PNG output rather than trusting it sight unseen.

Keep these three in mind and the conversion is dependable: embed or outline your fonts, treat the SVG as the master you never throw away, and rasterize at the size the destination needs. Everything imgkilo does here happens in your own browser tab, free, with no upload, no account, and no watermark.