SVG Code Editor with Live Preview

Features

• Code on the left, live rendering on the right, updated on every keystroke
• Backdrop switches between checkerboard, light and dark — the checkerboard reveals transparency
• Adds a missing `xmlns` for the preview and reminds you to add it to your own file
• The download contains the xmlns-completed version (without it the file displays nowhere else)
• Checks for a missing xmlns, a missing viewBox, external references, script / on* attributes, and an unclosed end
• Shows the viewBox dimensions, width/height and byte size
• Your code never enters the page DOM and its scripts never run
• Everything happens in your browser; nothing is uploaded

How to use

1. Paste SVG on the left (or press Sample)
2. The right side renders immediately and follows every edit
3. Look through the Checks panel — those are the failures that produce no error
4. Copy it, or download the .svg (with xmlns completed)

FAQ

Why is the preview an image rather than the SVG itself?

For safety. Inlining someone else’s SVG (`innerHTML`) puts arbitrary code into this site’s origin: `<svg onload="…">` and `<script>` would both run, and that code came from somewhere else. Rendered as an `<img src>`, the SVG is a separate document — scripts do not run and external resources are not loaded, which is specified behaviour, so it cannot reach anything belonging to this site. The cost is losing access to the SVG’s DOM, which this tool does not need.

Why does my pasted SVG show nothing?

Most often a missing `xmlns`: an `<svg>` without `xmlns="http://www.w3.org/2000/svg"` is fine inlined into HTML (the parent document’s namespace takes over) but renders nothing as a standalone file or image, with nothing but a bare load failure in the console. The preview adds it for you and the checks panel reminds you to add it to your own file. Other causes: unclosed tags, or references to external images and fonts, which an image is not allowed to load.

Why no warning when my code is wrong?

Because browsers are very lenient with SVG: unclosed tags, misspelled attributes and wrong coordinates usually still render (just with a piece missing or in the wrong place) and produce no error. This tool only reports the cases where nothing renders at all — an `<img>` load failure. So the reliable way to judge correctness is still to look at the preview, while the checks panel lists the things that produce no error yet certainly fail (missing xmlns, missing viewBox, external references).

viewBox or width / height — which do I need?

Both, and `viewBox` matters more. `viewBox` defines the coordinate system (how the drawing maps onto a size); `width` / `height` are only the default displayed size. With width and height but no viewBox the SVG cannot scale — enlarging it merely blurs, exactly like a bitmap. A viewBox alone is the responsive form: it fills its container and CSS decides the size (which is how every icon on this site is written, so the checks stay quiet about it).