SVG Beautifier

Format and indent SVG markup

Minified SVG is a single unreadable line, which is fine for shipping and miserable for editing. Beautifying restores consistent indentation and line breaks so you can find the element you need, understand the nesting, and get a readable diff when the file is under version control.

How to use it

  1. Paste minified or messy SVG markup into the input.
  2. Format it to apply consistent indentation and line breaks.
  3. Read through the structure and make whatever edits you need.
  4. Copy the formatted markup, or minify it again before shipping.

Frequently asked questions

Does formatting change the image?

No. Whitespace between SVG elements is not rendered, so indentation is purely for human readability.

Should I ship the formatted version?

Minify before shipping if the SVG is inlined in HTML or CSS, where every byte is served on each request. If the file is served separately and gzipped, the difference is much smaller and readability may be worth more.

Why is this useful for version control?

A minified SVG is one enormous line, so any change shows as the whole file being rewritten. Formatted markup produces diffs you can actually read and review.

Does it tell me if my SVG is broken?

Not directly, but badly nested or unclosed tags usually become obvious once the indentation is applied, because the structure stops lining up the way you expect. Use the Code to SVG renderer if you want to confirm the file still draws correctly.