Free Online SVG Code Editor
Edit SVG code and preview it live in the browser — no uploads, no installs.
How it works
Paste or type SVG
Paste your SVG markup into the code panel, or start with the example SVG provided.
See live preview
The preview panel updates in real time as you edit. Invalid SVG shows an error badge.
Format & validate
Click Format to pretty-print the XML. The validator highlights the first syntax error.
Download
Click Download SVG to save your file. No data is sent to any server.
Common use cases
Quick SVG tweaks
Paste a downloaded SVG from Figma or Illustrator, adjust path data or colours, then download the updated file.
Learning SVG
Experiment with SVG elements — paths, circles, gradients — and instantly see the visual result in the preview pane.
Removing unwanted attributes
Strip editor-specific attributes (Inkscape, Illustrator namespaces) to produce clean, minimal SVG for the web.
Prototyping icons
Write hand-crafted icon SVG with instant visual feedback. Copy the final markup into your codebase.
Frequently asked questions
Does this SVG editor support all SVG features?
It renders any SVG your browser supports — including paths, gradients, filters, masks, animations, and text. Browser support is the only constraint.
Is my SVG code sent to a server?
No. The preview uses an inline Blob URL generated entirely in your browser. Nothing is uploaded.
How does the live preview update?
A debounced input listener re-creates the preview Blob URL ~300 ms after you stop typing to avoid flickering during fast edits.
Can I edit SVG files from Figma or Illustrator?
Yes — paste the SVG export and edit freely. The Format button cleans up the indentation so the code is easier to read.
What does the Format button do?
It re-serializes the parsed SVG DOM with 2-space indentation using DOMParser and XMLSerializer.
Can I start from scratch?
Yes — clear the editor and start typing your own SVG, or load one of the shape templates from the toolbar.