SVG Formatter
Format SVG code online: pretty-print messy markup with consistent two-space indentation, or flatten it to a single line. The document itself is untouched — same elements, same attributes, different whitespace.
Runs entirely in your browser — nothing is uploaded, no account needed.
How it works
The file is parsed with the browser's own DOMParser and printed back out — pretty-printed with two-space indents and one element per line, or flattened to a single line with the whitespace between tags removed. Either way it is the same document: the same elements, the same attributes in the same order, the same text content. Only the whitespace between elements changes, which is why the formatter can promise a lossless round trip where an optimizer cannot.
Text that matters is left alone. The content of <text>, <title> and <style> elements is real data, not layout, so the single-line mode only collapses runs of whitespace that sit purely between tags — the classic export artefact — and never touches whitespace inside a text node that has actual content.
When to use it
Exported SVGs are written for machines: Illustrator and Figma emit everything on one line, Inkscape nests groups ten levels deep with a tangle of namespaced attributes. Before you can review a file in a pull request, diff two versions of an icon, or hand-fix one attribute, you need markup a person can read — that is the pretty-print direction. The single-line direction is for the opposite move: markup that is about to be embedded in a JSON string, a data URI or a CMS field, where literal newlines get escaped into noise or break the field entirely.
Formatter or optimizer?
They answer different questions. The formatter changes how the markup looks and guarantees the document is untouched — nothing removed, nothing rounded. The optimizer changes what the markup contains: it strips editor metadata, drops unreferenced ids, collapses redundant groups and rounds coordinates, each pass switchable, and it can minify as its final step. If the goal is a smaller file, use the optimizer; if the goal is readable or embeddable markup with zero risk of a visual change, use this.
Notes
- Formatting only touches whitespace between elements. Text content inside <text>, <title> and <style> is left exactly as written.
- Minified here means one line — for actual byte savings (dropped metadata, rounded coordinates) use the Optimizer, which also minifies.
- Attribute order is preserved as parsed, so diffs against the input stay readable.