SVG Viewer Preview, tidy and export SVG

What it shows

The preview is your code drawn by your own browser, updated as you type. Under it are the image’s size in pixels, its viewBox, the number of elements and the size of the code. Switch the background to check an image that is white or has transparent areas, and zoom in to inspect detail; an SVG stays sharp at any zoom.

If the code is not well-formed, the message says what went wrong and on which line. SVG follows XML rules, so every tag must be closed and every attribute value quoted.

Prettify and minify

Prettify puts each element on its own line with indentation, which makes a file exported from a design tool readable. Minify removes comments and the white space between tags to make the file smaller. Neither changes how the image looks. Minify does not rewrite paths or merge shapes the way a dedicated optimiser does.

Exporting

Download PNG draws the image at one, two, four or eight times its own size, so a 24 pixel icon at 4× becomes a 96 pixel PNG with a transparent background. Copy data URI gives the image as a single line of text that can be used directly in CSS or in an img tag:

background-image: url("data:image/svg+xml;charset=utf-8,…");

Code copied from a web page

SVG written inside an HTML page often has no xmlns attribute, and without it the code does not work as a file on its own. The viewer adds it for the preview and tells you; Prettify and Minify write it into the code.

What does not run

The image is shown the way a browser shows an image file, so scripts inside the SVG do not run, and fonts or pictures it links to on other sites are not loaded. That makes it safe to open a file you did not make. Animation written in CSS or SMIL still plays.