What is an SVG viewer?
SVG is a way to write a picture as code: lines, curves, shapes and colours described in text, not stored as dots. A picture made this way stays sharp at any size, which is why logos and icons on websites are usually SVG.
Because it is text, you can’t see what an SVG looks like by reading it. A viewer draws it for you. It is the quick way to check an icon copied from a page or a design tool, to see what a change to the code does, or to turn a snippet into a file.
How this tool works
The code is on the left and the picture is on the right. Paste your code over the sample, or edit it: your browser redraws the picture as you type. On a narrow screen the picture is shown under the code.
Nothing is sent to our server. The code never leaves your browser, so it is safe to paste a logo or a drawing that isn’t public yet. This is also why the tool has no daily limit.
You can choose what the picture sits on, a chequered, white or dark background, which shows at once whether a white icon or a transparent area is there. You can also choose between fitting the picture to the pane and showing it at its actual size.
Under the picture, one line tells you what the code holds: its size, the width and height it declares, and how many elements and paths it has.
What the buttons do
Save as SVG downloads the code as a file. Save as PNG turns the picture into an ordinary image, at twice its size so that it stays sharp. Copy the code and Copy as a data URI put the SVG on your clipboard, the second in a form that can be pasted straight into CSS or an image tag.
Tidy the code removes what a browser doesn’t need to draw the picture: the XML line at the top, comments, the notes that drawing programs such as Inkscape leave behind, and spare white space. The picture stays the same and the code gets shorter. It is a light clean-up, not a full optimiser: it doesn’t shorten paths or merge shapes.
What this tool can’t show you
The picture is drawn the way a browser draws an SVG used as an image. In that mode scripts inside the SVG don’t run and it can’t load other files, so an SVG that pulls in a web font or another picture is shown without them. Animations written in the SVG itself still play.
Tidying joins the white space between tags, which can change the spacing of text written across several lines inside the picture. Check the picture after tidying, and undo with Ctrl+Z in the code field if it changed. And the view is your browser’s; another browser may draw unusual features a little differently.