SVG to PNG / JPG / WebP Converter

What is SVG?

SVG — Scalable Vector Graphics — describes an image as shapes, paths and coordinates in XML text rather than as a grid of pixels. A circle is stored as a centre point and a radius, not as thousands of individually coloured dots. That's what makes it scale perfectly: rendering the same SVG at 16 pixels or 1,600 pixels produces an equally sharp result, because the browser recalculates the shapes fresh at whatever size you ask for.

This also makes SVG editable and inspectable as plain text, which is why it's the default export format for logos and icons from design tools like Figma and Illustrator. The trade-off is compatibility: not every context that wants an image — a social media uploader, a document, an older CMS — accepts SVG, which is exactly the gap this tool closes.

What is SVG to PNG conversion?

Converting SVG to PNG means rasterizing it: picking a specific pixel width and height, then rendering the vector shapes into a fixed grid of coloured pixels at that size. The result is a normal bitmap image — a PNG — that any browser, phone, printer or upload form can display without knowing anything about SVG.

The same idea applies to JPG and WebP; only the final encoding step differs. Because the rasterization step chooses the output size explicitly, converting is also how you get an SVG icon into the specific pixel dimensions a platform demands — an app icon, a favicon set, a social preview image.

How to convert SVG to PNG

1. Drop your SVG file into the workspace above, or paste its code directly.
2. Make sure PNG is ticked under Output format.
3. Leave the background set to Transparent if you want the alpha channel preserved, or pick a colour to flatten it.
4. Set a custom width and height, or use the SVG's own size.
5. Press Convert SVG, then Download PNG.

How to convert SVG to JPG

The same steps apply, with one difference that matters: JPG cannot store transparency at all, so pick a background colour — white is the default, but black or any custom colour works — and the SVG is composited on top of it before encoding. Adjust the JPG quality slider if file size matters more than visual fidelity; 90 is a reasonable default that rarely shows visible artefacts.

How to convert SVG to WebP

Tick WebP and, like JPG, adjust its quality slider if you want a smaller file. Unlike JPG, WebP keeps transparency, so a transparent background stays transparent in the output. If your browser cannot encode WebP — true for a small number of older browsers — the option is disabled with an explanation rather than silently substituting another format.

SVG vs PNG

SVG is vector and resolution-independent; PNG is raster and fixed at whatever pixel size you render it. SVG stays sharp at any zoom level and is usually far smaller for simple geometric graphics, but PNG is the one every image tool, upload form and older browser can open without question. Both support full transparency. Use SVG wherever the platform accepts it and scaling matters; convert to PNG the moment it doesn't.

SVG vs JPG

JPG's lossy compression is tuned for photographic gradients, not the flat colours and hard edges typical of vector art — a JPG export of a simple logo is often both larger and worse looking than the equivalent PNG, because JPG's algorithm spends its bits smoothing detail that a logo never had to begin with. JPG also cannot represent transparency; a "transparent JPG" is a contradiction in file format terms. Reach for JPG here mainly when a platform specifically requires it or when the SVG contains genuinely photographic content, like an embedded photo.

SVG vs WebP

WebP is a modern raster format supporting both lossy and lossless compression plus full alpha transparency, generally producing smaller files than PNG or JPG for comparable visual quality — though the actual gap depends heavily on the specific image, so "WebP is always smaller" is a generalisation, not a guarantee worth relying on for any single file. Like PNG, it's a fixed-resolution raster export of your vector source, useful specifically for shipping smaller images to a web page that doesn't need the SVG itself.

When to use PNG

PNG is the safe, universal default whenever you need transparency, sharp edges, or lossless quality — app icons, logos on non-white backgrounds, UI screenshots, anything where a compression artefact next to text or a hard edge would be visible. If in doubt, PNG is very rarely the wrong choice; the only real cost is file size relative to JPG or WebP at the same dimensions.

When to use JPG

Choose JPG when the exported image is or resembles a photograph, when a platform specifically requires it, or when you need the smallest possible file and can accept an opaque background and some compression loss. It is a poor fit for text, thin lines, or anything that needs a transparent background.

When to use WebP

WebP is a strong default for anything destined for a modern web page: it combines PNG's transparency with meaningfully smaller files in most cases, and current browser support is excellent. It's a weaker choice when the image needs to be opened by software that predates broad WebP support — some older design tools and a handful of platforms still don't accept it, which is worth checking before you standardise on it everywhere.

SVG transparency

An SVG shape can have partial or full transparency through its fill-opacity, opacity or an alpha value in its colour. When you convert with the background set to Transparent, that alpha information is carried straight through into the PNG or WebP's own alpha channel — nothing is flattened. The checkerboard pattern in the preview above exists purely so you can actually see where that transparency is; it is never baked into the downloaded file itself.

SVG to JPG backgrounds

Because JPG has no transparency channel, converting to JPG always means compositing the SVG onto a solid background first — there is no way around this that produces a valid JPG file. White is the sensible default for most logos and icons; black suits content designed for dark contexts; a custom colour matches the SVG into an existing brand palette or page background exactly.

SVG resolution and dimensions

Because SVG has no inherent pixel resolution, you choose the output size independently of the source file — the same icon can become a 512×512 app icon and a 4096×4096 print asset from the identical SVG, with both versions equally sharp. Common targets: 512 × 512 and 1024 × 1024 for app icons, 2048 × 2048 for high-density displays, 4096 × 4096 for print or large-format use. Very large dimensions increase memory use and processing time, which is why output size here is capped at 8192 pixels per side as a safety limit — comfortably above what any of the use cases above actually need.

SVG viewBox explained

The viewBox attribute defines an SVG's internal coordinate system — four numbers: minimum x, minimum y, width and height — independent of whatever pixel size the image is ultimately displayed at. It's what lets a browser scale an SVG's width and height to any pixel size while keeping every shape inside proportionally correct. When an SVG has a viewBox but no explicit width or height, this tool uses the viewBox's own aspect ratio to fill in sensible dimensions rather than guessing.

How SVG rasterization works

This tool renders your SVG the same way a browser tab would display it: the sanitized SVG is loaded into an <img> element at the target pixel size, then drawn onto an HTML <canvas> with drawImage(). From there, canvas.toBlob() encodes that pixel grid as PNG, JPEG or WebP. Nothing is reimplemented — the actual rendering is your browser's own SVG engine, the same one used for every SVG on the web, so what you get matches what you'd see if you opened the file directly.

Sizing an SVG-as-image relies on a lesser-known part of the SVG specification: preserveAspectRatio. Rather than manually calculating how to fit or crop the artwork within your chosen output dimensions, this tool sets the SVG's own width and height to the exact target size and lets preserveAspectRatio — xMidYMid meet for Contain, xMidYMid slice for Cover — do the scaling. That's the browser's own, spec-correct behaviour for fitting a viewBox into an arbitrary viewport, so the result is identical to what any standards-compliant renderer would produce at that size.

Why SVG looks different after conversion

A rasterized image is a fixed grid of pixels, while the original SVG is recalculated fresh at every zoom level — so a PNG export will show pixelation if you zoom in far enough, something the source SVG never would. Beyond that, differences usually trace back to one of a few causes: a font used in the SVG wasn't available and a fallback was substituted; an external image or stylesheet reference was intentionally removed during sanitization; or the chosen output dimensions don't match the source aspect ratio and the fit mode (contain or cover) is now visibly cropping or letterboxing the result.

SVG fonts and rendering

Text inside an SVG references a font by name, and it's up to whatever renders the SVG to find that font installed locally — SVG files essentially never embed the font itself. If a referenced font isn't available on your device, your browser substitutes a fallback, which can shift text width, line breaks and overall layout. This affects the on-screen SVG preview identically to the converted raster output, since the same browser engine renders both — but it's still worth knowing about if a design tool that generated the SVG used a specific licensed font your device doesn't have.

SVG file size

A vector SVG and its rasterized exports don't compare on a like-for-like basis — SVG file size depends on path complexity almost entirely independent of the eventual display size, while a PNG, JPG or WebP's size depends heavily on both the output pixel dimensions and (for JPG/WebP) the quality setting. A simple icon SVG might be 2 KB and produce a 6 KB PNG at 512×512; a highly detailed illustration SVG might be 200 KB and still produce a smaller PNG than you'd expect, because rasterization doesn't care how many path points went into drawing a shape — only how many pixels the final image has.

This has a practical consequence worth planning for: doubling the output width and height roughly quadruples the pixel count, and file size tends to scale with it, though not perfectly linearly since compression finds more repeated patterns in larger flat-colour areas. If you're generating several sizes of the same icon — say, 16, 32, 64 and 512 pixels for a favicon set — expect the largest export to dominate the total download weight by a wide margin, which is exactly why picking the smallest size that actually satisfies each use case is worth the extra minute.

Batch SVG conversion

Drop in more than one SVG file and the workspace switches to a batch table: each file gets its own row with a status and, once converted, a download link per format. Every file in a batch shares the same output settings — formats, dimensions, background and quality — so set those up first, then convert the whole batch in one pass and grab everything at once as a ZIP.

Browser-based conversion and privacy

Every step — parsing, sanitizing, rendering and encoding — runs in your browser using the Canvas API. There is no backend for this tool and no upload step; your SVG file, whatever it contains, never leaves your device. This matters more for SVG specifically than for most image formats, because SVG is also viewable as source code and can carry active content — which is exactly what the sanitization step exists to neutralise before anything is ever rendered, on top of the fact that nothing is transmitted anywhere to begin with.

Common SVG conversion problems

• The output has a black or white background I didn't expect. Check the Background setting — JPG always needs one, and PNG/WebP may have been set to something other than Transparent.
• Part of my SVG is missing. Check the SVG details warning panel — a script, embedded HTML, or external resource reference was likely removed during sanitization.
• The image looks stretched. The aspect ratio lock was off while the width and height were set independently. Turn the lock back on and re-enter one dimension.
• Text looks different from the design tool that made the SVG. A referenced font isn't available on this device; the browser substituted a fallback.
• WebP isn't available. A small number of older browsers can't encode it — the option is disabled with an explanation rather than faking the format.
• The SVG won't load at all. The file may not be well-formed XML, or may not actually be an SVG despite the file extension — check the error message for specifics.

Frequently asked questions