↑↓ to move · Enter to open · Esc to close

SVG Formatter

Make minified or messy SVG code readable again. The SVG formatter indents every element, can put each attribute on its own line, and never changes a value.

Updated
Runs in your browser. Your SVG is not uploaded.

Your SVG

Settings

Formats as you type for files up to 200 KB. Text and attribute values are never changed.

Formatted SVG

Your formatted SVG will appear here
  1. Paste SVG code, upload a file, or load a URL
  2. Pick the indent
  3. Copy or download the result

How to use the SVG Formatter

  1. Paste the SVG code or drop the file on the text box. Short files are formatted as you type.
  2. Choose the indent: 2 spaces, 4 spaces, or a tab.
  3. Tick One attribute per line for elements with long attribute lists.
  4. Copy the result or download it as an .svg file.

How it works

The file is read by a strict XML parser, the same one the XML Formatter uses, and written back with new line breaks and indentation.

  • Each element goes on its own line, indented by its depth.
  • Elements that contain text, such as <text> and <title>, keep their content on one line, so spaces inside text are not changed.
  • Attribute values, path data, numbers, entities, and CDATA are copied exactly as written.
  • With one attribute per line, an element with two or more attributes lists each on its own line, indented one step deeper.

If the XML is broken, you get the line and column of the first error instead.

Examples

This one-line icon:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none"><circle cx="12" cy="12" r="4"/></g></svg>

becomes:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <g fill="none">
    <circle cx="12" cy="12" r="4"/>
  </g>
</svg>

With one attribute per line, cx, cy, and r each get their own line under <circle.

Limitations

  • Attributes stay in their original order. Sorting them is part of the SVG Minifier.
  • Path data inside d is not split or reformatted.
  • CSS inside <style> is kept as it is. For CSS, use the CSS Formatter.
  • Files up to 5 MB; formatting as you type stops above 200 KB.

Frequently asked questions

Does formatting change my SVG?

Only the whitespace between elements. Values, text, and the drawing stay the same, so the file looks identical in a browser.

Why do I get an error instead of formatted code?

The file is not well-formed XML, for example a tag is not closed or an ampersand is not escaped. The error shows the line and column so you can fix it.

Can I format an SVG inside an HTML file?

Copy just the part from <svg> to </svg> and paste it here. For whole HTML documents, use the HTML Formatter.

Is one attribute per line useful?

Yes for editing and code review: long elements become easy to scan, and a change to one attribute shows up as a one-line difference in version control.

Often used together with the SVG Formatter.

  • XML FormatterDeveloper Tools

    Beautifies XML with clean indentation or minifies it to one line.

  • SVG Validator

    Checks SVG files for XML errors, broken references, typos, and unsafe code.

  • SVG Minifier

    Minifies SVG code to the smallest version that draws the same.