SVG Formatter

How to use the svg formatter

1. Paste minified SVG.
2. Choose the indent size.
3. Copy the formatted result.

About this tool

The reverse of minifying, for when you have a one-line SVG and need to find the element you want to change.

Indentation follows nesting, and text content stays on the line of the element that holds it rather than being pushed onto its own — which keeps a <code>text</code> element readable and, more importantly, avoids introducing whitespace that would change what is rendered.

Only layout changes: no attributes are reordered, nothing is removed, and the markup is otherwise byte-identical in meaning. Formatting then minifying returns you to where you started.

This works on the markup as text rather than parsing it into a tree, so it performs only the changes that are safe without one. It will not merge paths, remove unused definitions or restructure groups the way a full optimiser such as SVGO does. A live preview is shown so you can confirm the result still renders.

Common uses

• Making a one-line SVG editable.
• Reading an icon exported by a build tool.
• Reviewing SVG changes in a diff.

Frequently asked questions

Does formatting change the image?

No. Only layout changes, and whitespace inside text elements is left alone so nothing rendered is affected.

Can I minify it again afterwards?

Yes. Formatting and minifying are reverses of each other, and round-tripping returns the same markup.

Are attributes reordered?

No. Attribute order is preserved exactly as you pasted it.