Skip to main content
ToolsByUs

SVG to PNG

SVG to PNG renders vector artwork to a bitmap at any pixel size, in your browser. The drawing is re-rasterised by the browser's own vector engine at the size you ask for, so a 4× export is genuinely 4× sharp rather than an upscaled copy of a smaller render.

Local-only
Width
Scale
Format
SVG markup
249 B5 linesLn 1, Col 1
Preview512 × 512 · source 64×64

Rendering…

How does SVG to PNG work?

An SVG has no pixels. It has a viewBox, a set of shapes and a set of rules for turning those shapes into pixels — and the rules are applied by whatever renders it, at whatever size it is asked for. That is the entire value of the conversion: the browser rasterises the vectors at your target resolution, so 1024 pixels of a 64-pixel drawing is genuinely 1024 pixels of detail rather than a 16× enlargement of a 64-pixel render.

The size question, which is not always answerable

A drawing may declare width="100%", declare only a viewBox, or declare nothing at all. All three are valid, and none of them tells a renderer what pixel size to use. So the viewBox is read when there are no usable attributes, the aspect ratio is taken from it, and when there is nothing to read the tool says which value it invented rather than guessing silently.

What does not survive the trip, and why

The drawing is loaded as an image, which makes it an isolated document. Scripts inside it never run — that is the security property that makes this safe to offer at all — and neither does anything that needs a browsing context:

  • External references do not load. <image href="photo.png">, an @import in a <style>, a web font from a CDN: all dropped. A logo that depends on a remote font renders in a fallback face.
  • foreignObject renders inconsistently. Some engines draw the HTML inside it, others leave it blank.
  • CSS custom properties from the page do not reach it. currentColor resolves to the initial colour, which is usually black.

The remedy for the first is to inline the assets into the SVG before converting, which is a one-line change in most build pipelines and a manual edit otherwise.

Choosing a format

PNG for anything with transparency or flat colour, which is most vector artwork. WebP when the file is going on a website and you want the smaller file — support is universal now. JPEG only when the background is opaque and the drawing is photographic in character, because it has no alpha channel and a transparent canvas encoded as JPEG comes out black.

SVG

<svg viewBox="0 0 64 64" width="64" height="64">…</svg>

PNG

drawing-512.png
512 × 512 pixels
transparent background
9.4 KB

What options and edge cases does SVG to PNG support?

Options and what they do
ParameterTypeDefaultBehaviour & edge cases
Widthpixels512The output width. The height follows the drawing's own aspect ratio, taken from its viewBox — so a 2:1 drawing at 512 wide is 256 tall.
Scale1× | 2× | 3× | 4×1×Multiplies the width. Useful for a retina asset: 512 at 2× is 1024 pixels, which is what an @2x filename is supposed to contain.
FormatPNG | WebP | JPEGPNGPNG keeps transparency and is lossless. WebP is smaller at the same quality. JPEG has no alpha channel at all, so a transparent background is painted solid before encoding.
Backgroundtransparent | colourtransparentTransparent for PNG and WebP. Anything else paints the colour first — which is required for JPEG, and useful when the drawing assumes a light page behind it.
Intrinsic sizedetectedattributes, then viewBoxRead from width/height, falling back to the viewBox. When neither exists the tool says so, because the size it used is then an invention rather than the drawing's own.
External assetsnot loadeddroppedLinked images, web fonts and imported stylesheets do not resolve inside an image context. Inline them into the SVG first if the drawing depends on them.
Scriptsnever run—Script inside the SVG is not executed. That is a security property rather than a limitation, and it is why the drawing is loaded as an image rather than injected into the page.
Output ceilingpixels4096 × 4096Above about 16 megapixels the canvas allocation fails on a phone rather than merely being slow, so the export is declined with a message instead of producing a blank file.

Frequently asked questions

Will the PNG be sharp at 4×?

Yes, and that is the difference from a resize. The SVG is handed to the browser at the target pixel size, so the vector engine rasterises every curve at that resolution. Upscaling a smaller render would interpolate between existing pixels and produce soft edges; this produces new detail. The only thing that limits it is how the drawing is authored — a stroke of exactly one unit gets thinner as the canvas grows.

My web font did not render. Why?

Because the drawing is loaded as an image, and an image is an isolated document: it cannot fetch a font, an image or a stylesheet from anywhere. A remote @font-face is dropped and the text falls back to a system face. To keep the lettering, convert the text to outlines in your editor, or embed the font as a base64 data URI inside the SVG before converting.

Why is my transparent SVG black in the JPEG output?

Because JPEG has no alpha channel. A fresh canvas is transparent, and a transparent pixel has nothing to encode, so it comes out black — the single most common complaint about every SVG-to-JPEG converter. The background option here paints a colour first for exactly that reason. If you need transparency, use PNG or WebP.

What size should I export?

Whatever it will be displayed at, multiplied by the device pixel ratio of the screens it will appear on. A 24-pixel icon shown on a 2× display wants a 48-pixel file. A hero illustration that spans 800 CSS pixels on a retina screen wants 1600. Exporting at 4096 "to be safe" costs bandwidth on every page load and buys nothing that a correctly sized file does not already have.

The tool says it invented a size. What does that mean?

That the SVG has no width, no height and no viewBox, so there is no way to know what shape it is. 512×512 is assumed so that the export produces something rather than failing, and the interface says which value was used so you can set the width yourself. Adding a viewBox to the source is the real fix and takes one line.

Is my drawing uploaded?

No. The SVG is encoded as a data URL, rendered by your browser's own canvas, and encoded to a PNG in the tab — the Network panel shows no request. That matters for the drawings people convert here, which are frequently unreleased logos and brand assets.

ToolsByUs team · How we check our tools