gizmobench

SVG to PNG

An SVG has no pixels in it, so the only thing that decides whether your PNG looks sharp is the size the converter rasterises at, and the converters on this search do not ask: they upload the file, pick a size themselves and hand back a link. This one asks first. The width box fills itself from the file's own viewBox the moment the markup is understood, the height follows the aspect ratio unless you type one, and the scale multiplies whatever those two come to, so 24 by 24 at 4x is a 96 by 96 PNG drawn from the vector rather than a small picture stretched to fit. The drawing happens in the tab you have open: the file is read here, scanned here and rasterised onto a canvas here, and no byte of it is sent anywhere. The scan is the second thing the other pages leave out. Before anything is drawn, every script, every foreignObject, every on-event attribute, every href that points outside the file and every @import inside a style block is removed, and what was removed is listed under the source box instead of being done quietly. A local url(#gradient) reference and an embedded data: image both survive, because both are part of the drawing. Choose a transparent or a white background, then copy the PNG to the clipboard or download it.

Nothing to scan yet.

PNG300 by 150 px

The PNG appears here.

Width
Height
Scale
Background

Paste SVG markup into the box, or drop an .svg file on the stage, and the PNG is drawn here.

  • An icon at 4xviewBox 0 0 24 24, nothing typed, scale 4x
    96 by 96 PNG, transparent
  • A logo to a fixed widthviewBox 0 0 240 120, width 1200, height empty, 1x
    1200 by 600 PNG, the height from the viewBox
  • A file that declares no sizeno viewBox, no width, no height, 1x
    300 by 150, the size a browser uses

The width box fills itself from the file: the viewBox first, then the width and height attributes, then 300 by 150, which is what a browser uses for an SVG that declares no size. Leave the height empty and it follows the width at the file's aspect ratio; type both and both are used. The scale multiplies whatever those two come to. Up to 1,000,000 bytes of source and 25,000,000 pixels in one PNG, which is about 5,000 by 5,000: both are what this machine can hold rather than an upload limit, because nothing is uploaded. This tool remembers the width, the scale and the background between visits, and never the drawing.

Drawn from the vector, at your size. The PNG is drawn at exactly the pixel size you ask for, from the vector, so it is sharp at any size. It cannot use a font your browser does not have, and it deliberately drops scripts, foreignObject and every external reference before drawing, so an SVG that relies on those will render without them.

Common questions

What pixel size should I export at, and why is one already filled in?
Export at the size the picture will actually be shown at, and at 2x that if it is going onto a screen where it may be viewed on a high density display. The width box is filled in for you from the file itself, in this order: the viewBox first, because that is the coordinate box the drawing was authored in and the one number in the file that is always an honest aspect ratio; then the width and height attributes, when there is no viewBox; then 300 by 150, which is what a browser falls back to for an SVG that declares no size at all. Clear the width box and the file's own size is what gets drawn again, shown in grey where your number was. Leave the height empty and it follows the width at the file's aspect ratio, and if you type both, both are used even when they do not match the ratio. The scale then multiplies whatever those two come to, so a width of 1200 at 2x draws a 2400 pixel wide PNG.
Why does a PNG from another converter come out blurry?
Because it rasterised at one size and something later stretched the result. A converter that does not ask for an output size has to guess one, usually the width and height written in the file or a fixed 96 dots per inch reading of them, and a 24 by 24 icon exported that way is a 24 pixel picture: blown up to 96 pixels in a document it is soft, because the pixels it needed were never drawn. Here the size is chosen before anything is drawn, the markup handed to the canvas carries that exact size, and the browser rasterises the vector at it. A 24 by 24 icon at 4x is drawn as 96 by 96 from the outlines, so the edges are as clean as they are in the SVG.
What is removed from the SVG before it is drawn, and why?
Five things, and each one is listed under the source box when it happens, with a count: every script element with the code inside it, every foreignObject with the markup inside it, every on-event attribute such as onclick or onload, every href or xlink:href that points anywhere but a #fragment in the same file or an embedded data: image, and every @import inside a style element, along with any url() that points outside the file. An SVG is a document that can carry code and can ask for files from other servers, and neither of those is drawing, so neither is kept. Everything else is left exactly as written, including the namespace declarations the document depends on. If a file relied on what was removed, it renders here without it, which is why the list is printed rather than hidden.
Is my file uploaded anywhere?
No. The markup is read into this tab, scanned by this page and drawn onto a canvas here, and the PNG is made from that canvas in the same tab. There is no request: no part of the file reaches a server, analytics or error reporting, and nothing about the drawing is written to your browser's storage. The tool remembers three settings between visits, the width you last set, the scale and the background, and that is all it remembers. The Start over button above forgets those.
What happens to fonts the SVG names?
Text is drawn with a font this browser already has. An SVG names a font family, it does not carry one, so the drawing uses the installed font of that name and falls back to a default when there is none, exactly as it would in a browser. A web font the file tries to fetch with @import or with a url() inside @font-face is one of the external references that is removed before drawing, so that text falls back too. If the exact lettering matters, convert the text to outlines in the editor you drew it in, then export here: outlines are drawing and they come through at any size.
Should I choose a transparent or a white background?
Transparent, unless whatever you are pasting into cannot handle it. PNG carries an alpha channel, so transparent is the setting that keeps the clear parts of the drawing clear and lets it sit on any colour. Choose white when the destination flattens transparency onto black, which older document and slide tools sometimes do, or when you want a solid card rather than a cut-out. White paints the whole canvas first and the drawing goes over it, so nothing in the picture changes apart from what is behind it.
How large an SVG can I convert, and how large a PNG can I get out?
Up to 1,000,000 bytes of source, which is 1 MB of markup, and up to 25,000,000 pixels in one PNG, which is about 5,000 by 5,000, with no side longer than 32,767 pixels. Those are what this machine and a browser canvas will hold rather than an upload limit, because nothing is uploaded, and going past any of them says so with the number it reached rather than quietly producing a smaller or blank file. The same is true of markup that does not parse: the message names the line the unclosed tag opened on.

The PNG is drawn at exactly the pixel size you ask for, from the vector, so it is sharp at any size. It cannot use a font your browser does not have, and it deliberately drops scripts, foreignObject and every external reference before drawing, so an SVG that relies on those will render without them.