SVG to PNG Converter at 2x, 4x or Custom Width

How this SVG to PNG converter sizes the output

An SVG is a set of drawing instructions, not pixels, so converting it to PNG means choosing a resolution and letting the browser draw the vector at that size. This tool reads the root <svg> element to work out the image's natural size. If it has both width and height, those are used (units such as pt, mm, cm and in are converted to CSS pixels at 96 per inch). If one of them is missing, the other is derived from the viewBox aspect ratio. If both are missing, which is common for icons exported from design tools, the viewBox width and height become the base size. Only when there is no size information at all does it fall back to the browser default of 300 by 150.

From that base you pick 1x, 2x or 4x, or type a custom output width and the height follows the aspect ratio. Before rendering, the tool rewrites the root element's width and height to the exact output pixel size, and adds a viewBox if the file lacked one. That matters: the vector is rasterised at the final resolution rather than drawn small and stretched, so edges stay crisp. This is how you convert SVG to PNG at high resolution for print, retina screens, app store assets or slide decks. Very large requests are reduced to stay within what browsers allow for a single canvas (16,384 pixels per side and about 16.7 megapixels in Safari), and the tool tells you when that happens.

A practical rule for picking the multiplier: 1x matches how the SVG was designed, 2x suits retina screens and most web or slide use, and 4x or a custom width of 2000 pixels and up is the safe choice for print, README banners and store listings. The download is named with its final pixel dimensions, so exports at several sizes stay easy to tell apart.

PNG, JPG or WebP, and what about backgrounds?

PNG is the usual choice: lossless, with full transparency, so an icon or logo keeps its see-through background. Leave Transparent ticked for that, or untick it and pick a colour to flatten the image onto a solid background. SVG to JPG always needs a background, because JPEG has no alpha channel; the colour picker defaults to white so transparent areas do not turn black. JPG is smaller for illustrations with gradients but adds compression artifacts around sharp lines. SVG to WebP keeps transparency like PNG and is usually much smaller, which suits images going onto your own website. JPG and WebP get a quality slider; PNG does not need one.

The conversion happens entirely in your browser. The SVG markup is turned into a Blob, loaded as an image, drawn onto a canvas and exported with canvas.toBlob. Nothing is uploaded. Loading an SVG as an image also means scripts inside it do not run and external resources (linked bitmaps, web fonts, remote stylesheets) are not fetched, which is safe but has a consequence: text set in a font that is not installed on your machine falls back to a default font. Convert text to outlines in your editor first if exact typography matters. If you only need the vector smaller, the SVG Optimizer is the better tool; if the target is a React component, use SVG to JSX instead of rasterising.