SVG to PNG Converter

This SVG to PNG converter turns vector SVG files into PNG or JPG images at the resolution you choose, inside your browser. It is for designers and developers who need a raster version of a logo or icon — for an app store, a document, a social post or software that does not accept SVG — and want it sharp at 2× or 4× rather than blurry.

An SVG has no fixed pixel size, so the first job is working out how big it is. The tool reads the root <svg> element. If width and height are both set, those are used, with units converted to CSS pixels (1in = 96px, 1cm ≈ 37.8px, 1pt ≈ 1.33px, 1em counted as 16px). If only one is set and there is a viewBox, the other follows the viewBox's aspect ratio. If they are missing or percentages, the viewBox width and height are used. If there is nothing at all, the SVG is treated as 300 × 150 — the default size browsers give any replaced element with no intrinsic size — and the result says so, because anything drawn outside that area is cut off.

Then you pick the output size: 1× (the SVG's own size), 2×, 4×, or a custom width in pixels with the height following the aspect ratio. The important detail is how it is drawn. Instead of rendering the SVG at its own size and stretching the pixels — which is why many converters give soft results — the tool rewrites the SVG's width and height to the target size (adding a viewBox if the file has none, so the drawing scales with it) and lets the browser rasterise the vector directly at that resolution. A 24 × 24 icon at 4× is drawn as a crisp 96 × 96 image.

PNG output keeps transparency by default, or you can fill the background with a colour. JPG has no transparency, so transparent areas become white or the colour you pick.

The SVG is rendered the way browsers render any SVG used as an image: scripts inside it do not run, and external resources are not loaded. That second point is the most common surprise. An SVG that uses a web font from Google Fonts, or links to a picture by URL, will come out with fallback text and a missing picture. The tool detects such links and warns you; the fix is to embed fonts and images in the SVG (as data: URLs) or convert text to paths in your editor.

The output can be up to 16,384 px on a side and 100 megapixels. Everything happens on your device — the file is read, drawn and encoded in the page, and you can confirm in your browser's developer tools (Network tab) that no request carries it.

1. The file's first bytes are checked to confirm it is an SVG (an <svg> root element), whatever its name. 2. The root element's width, height and viewBox are read. Size = width × height if both are usable; one side plus viewBox → the other side from the viewBox ratio; neither → viewBox size; nothing → 300 × 150. 3. Output width = chosen width, or natural width × scale (rounded); output height = output width × natural height ÷ natural width, rounded, minimum 1 px. The size must fit within 16,384 px per side and 100 megapixels. 4. The root element's width and height are replaced with the output size; if there is no viewBox, one is added from the natural size so the content scales. 5. The browser draws the rewritten SVG as an image onto a canvas of exactly that size, over a background colour: for PNG only when "Transparent" is unticked; for JPG always, using the Background colour (white by default). 6. The canvas is encoded as PNG (lossless) or JPG (quality 92) and named after the original.