SVG Formatter
Turn minified or messy SVG markup into readable, consistently indented code, or squeeze the whitespace out again. The formatter checks that the SVG is well-formed XML and points to the line with a problem, puts each element on its own line, indents children with spaces or tabs and can sort attributes and remove comments, all without changing the drawing.
- Runs in your browser
- No sign-up
- Free to use
How to use SVG Formatter
- Paste SVG code or open an .svg file.
- Choose the indentation and options.
- Click Format, or Minify whitespace for compact output.
- Copy or download the result.
SVG Formatter features
Readable output
One element per line with consistent indentation.
Error checking
Reports malformed XML with line and column.
Indentation
2 spaces, 4 spaces or tabs.
Sort attributes
Consistent attribute order for clean diffs.
Text preserved
Spacing inside <text> elements is kept.
Minify
Remove whitespace between tags only.
When to use SVG Formatter
- Reading and editing SVGs exported as one long line.
- Reviewing SVG changes in version control.
- Finding errors in hand-written SVG.
- Preparing SVG code for documentation and tutorials.
SVG Formatter FAQ
Does formatting change the image?
No. Only whitespace between tags changes. Coordinates, paths and attributes stay exactly as they were unless you choose to sort attributes or remove comments.
Why does it say my SVG is not well-formed?
SVG is XML, so every tag must be closed, attributes must be quoted and special characters such as & must be escaped. The message shows the line and column of the first problem.
Formatter or optimizer?
The formatter makes code readable without changing it. The SVG Optimizer rewrites the SVG to make it smaller.
Why sort attributes?
A fixed order makes files from different tools look alike and keeps diffs small when the same SVG is exported again.
What happens to <text>?
Whitespace inside text elements is meaningful, so it is never re-indented.
Is my file uploaded?
No. Formatting runs in your browser.
Readable SVG code
Design tools and optimizers often produce SVG as a single long line. That is ideal for delivery but hard to read, edit or review. Formatting puts each element on its own line and indents children inside their parents, so the structure of groups, definitions and shapes becomes visible at a glance.
Before formatting, the code is parsed as XML. If a tag is not closed, an attribute is missing its quotes or an ampersand is not escaped, the formatter stops and reports the line and column, and the editor highlights the line. That makes it a quick validator for hand-written SVG as well.
Formatting uses the SVGO parser and printer with no optimisation plugins enabled, so nothing about the drawing changes. Elements whose whitespace matters, such as <text> and <tspan>, are printed inline, and comments are indented with the code around them.
Optional clean-ups help with version control. Sorting attributes produces a consistent order whatever tool exported the file, and removing comments drops generator notes. The XML declaration can be removed too, which is common for SVG inlined into HTML.
When you need the file small again, Minify whitespace removes the formatting while still keeping every attribute and number. For real size reduction use the SVG Optimizer.