SVG Editor & Live Preview
Edit SVG markup in your browser with a live preview, then prettify, minify, copy or download it.
Drag & drop an .svg file here, or click to browse
No uploads. Your files stay on your device.
Your SVG appears here as you type.
Paste or type SVG markup above — the preview updates as you type.
How it works
Paste SVG markup (or drop an .svg file) into the editor and the preview redraws
as you type, so you can tweak a fill, a viewBox or a
path and see the result immediately. The markup is parsed with the browser's
built-in DOMParser; if it is malformed you get the parser's message instead of a
blank canvas. Prettify re-indents the document with two spaces per level, and Minify strips
comments and all whitespace between tags — handy before pasting an icon inline into HTML or
CSS.
The stats line reports the canvas size taken from the width/height
attributes or the viewBox, how many elements the document contains and its size
in bytes. The preview is rendered from a data URI inside an <img> and any
<script> element or on… handler is stripped first, so pasted
markup can never run code on this page. Everything happens locally in your browser — nothing
is uploaded, so logos and unreleased artwork stay on your device. Use Copy SVG, Copy data URI
(ready for background-image: url(…)) or Download .svg to take the result with
you.
Frequently asked questions
How do I edit an SVG file without Illustrator or Inkscape?
Drop the .svg file onto this page (or paste its markup) and edit the code directly in the editor. Change a fill colour, a viewBox or a path and the live preview redraws as you type — then copy the result or download it as a new .svg file. No install and no account required.
Is my SVG uploaded anywhere?
No. The markup is parsed and rendered entirely in your browser using the built-in DOMParser and a data URI preview, so logos and unreleased artwork never leave your device. The page keeps working offline once it has loaded.
What is the difference between Prettify and Minify?
Prettify re-indents the document with two spaces per nesting level so it is easy to read and edit. Minify strips comments and all whitespace between tags, producing the smallest one-line version — ideal for inlining an icon in HTML or as a CSS background-image data URI.