SVG Editor and Live Preview
Edit SVG markup with syntax highlighting and see the rendered drawing update in a live preview pane.
A two-pane editor for hand-written SVG. Type or paste markup on the left, see the rendered drawing on the right, and catch parser errors before they break a build. Format messy single-line SVG into indented markup, copy the source, or download a .svg file in one click.
SVG is XML, which means you can author it by hand the same way you write HTML. The W3C SVG 2 specification defines the elements (rect, circle, path, text, defs, linearGradient, and so on) and the attribute grammar for paths and transforms. This editor gives you a syntax-highlighted source pane wired to a live preview, so changes appear the moment you stop typing.
The editor uses CodeMirror with bracket matching, multi-cursor selection, and HTML-aware highlighting that works well for SVG tags and attributes. The preview pane parses your markup with the browser's native DOMParser and renders it inside a transparent checkerboard so light fills are visible against a dark theme. When the parser reports a syntax error, the preview is paused and the error message is shown below the editor so you can see exactly where the markup broke.
The format button rewrites a single-line or minified file into properly indented markup using a simple tag-aware indenter. Load a local .svg file from disk, copy the current source to your clipboard, or download a fresh .svg with one button. Everything happens in the browser tab, which means private artwork stays local and there is no upload step between you and the result.
- 1
Open or paste SVG
Click Load file to pick a .svg from disk, paste markup into the editor, or start from the built-in example template.
- 2
Edit and watch the preview
Change attributes, add shapes, or refactor paths. The preview pane re-renders on every keystroke and shows parser errors inline if your markup is invalid.
- 3
Format, copy, or download
Use Format to indent compressed markup, Copy to send the source to your clipboard, or Download .svg to save the current pane as a file.
Tweak an exported icon
Open an SVG from Figma or Illustrator, strip the editor metadata, adjust viewBox, and re-save a clean version.
Debug a path string
Paste a broken path d attribute, fix moveto and curveto commands, and confirm the new path renders correctly before pasting it back into a component.
Build a quick illustration
Sketch a shape from scratch using rect, circle, path, and linearGradient and watch it appear as you type.
Inspect third-party SVG
Drop an unknown SVG into the editor to see the source, understand the structure, and copy individual elements for reuse.
Does my SVG get uploaded anywhere?
No. The editor runs entirely in your browser tab. Files you load and edits you make never leave your device, so private logos and artwork stay private.
Why does my preview disappear when I am mid-edit?
The preview is paused while the markup has a parser error so you do not see partially rendered output. Finish the tag or attribute and the preview returns.
What does the Format button do exactly?
It splits the markup into separate lines per tag and indents nested elements two spaces per level. It does not reorder attributes or rewrite path data.
Will inline scripts inside the SVG run?
The preview renders the markup with the same security context as the page, so script elements inside the SVG will not execute. The tool is intended for graphics, not interactive SVG.
Can I edit very large SVG files?
Yes, but extremely large path data can make the preview slow because the browser re-parses the whole document on every change. Minified production SVG with thousands of nodes may feel laggy.