SVG to PNG converter

A clear answer. Here’s how.

Draws an SVG on a canvas on this device and saves the canvas as a PNG, which the browser encodes. The picture’s own size comes from the root element as browsers work it out (SVG 2, section 8.12): width and height count only when they are absolute lengths in px, pt, pc, in, cm, mm or Q, converted at 96 pixels to the inch (CSS Values and Units: 1 in = 96 px = 2.54 cm, 1 pt = 1/72 in, 1 pc = 16 px, 1 Q = 1/40 cm), and percentages, auto and em or ex do not count. When both are given their shape wins over the viewBox’s (the viewBox drawing then sits inside it, with the margins preserveAspectRatio gives); with one of them the viewBox supplies the other; with neither, the viewBox numbers are taken as pixels (a convention of this tool: a browser would show such an SVG, as an image, at 300 by 150 or at whatever size the page gives it); with none of the three, the browser default of 300 by 150 is used. While the tool was built, its sizes were compared with the natural size Chrome 155 reports for the same file on twenty-one SVGs: they agree to the pixel wherever the SVG gives absolute sizes, and differ, as described, for a viewBox alone, percentages, auto and em units. The notes under the result say which rule applied. You then set the output by scale (0.1 to 8 times), width or height; the shape is kept, sizes round to whole pixels, and nothing over 16,384 pixels on a side or 100 million pixels in all is made, because browsers give no error for a canvas that is too large, they simply draw nothing. Safari on iPhone and iPad allows only about 16.8 million pixels (4,096 × 4,096), so anything larger is flagged. Before drawing, the SVG is checked: it must be well-formed XML (files up to 2 MB are parsed in full), start with an svg element in the SVG namespace, and use only declared namespace prefixes such as xlink; a DOCTYPE with an internal subset is refused, as entity declarations can expand into enormous documents. A copy is then made with the root’s width and height set to the output size (and a viewBox added if there was none, so the drawing scales), and the notes say if xmlns had to be added; nothing else is changed or removed. The copy is loaded into an image element from a blob: URL. An SVG drawn as an image runs no scripts and loads no outside files (the secure static mode of SVG 2), which is why a file you did not write can be drawn safely, and also why linked images, style sheets and web fonts inside it do not appear. Text is drawn in fonts installed on this device, so the PNG can differ from the same SVG shown inline in a web page; animation shows its first frame; foreignObject content depends on the browser (Chrome 155 refused to save a picture that contains it, and other browsers may draw it blank); currentColor becomes black. A background colour is painted behind the drawing; transparent keeps the PNG’s alpha channel. This tool does not optimise or edit SVGs, does not write JPEG, WebP or PDF, and does not embed colour profiles.