Format SVG

Format SVG XML with stable indentation and readable attributes.

freeworks offlinenothing uploaded
ToolSVG Formatter
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

SVG XML is parsed and serialized with consistent indentation, attribute ordering, and line breaks while preserving namespaces, text nodes, and path data. Formatting changes source layout, not the rendered scene graph.

  • Stable serialization makes vector diffs reviewable while retaining XML namespace rules.

Worked example

Pretty-print minified SVG circle
Pretty-print a minified SVG with proper indentation
Input
											<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="40" fill="#FF6B6B"/></svg>
Output
												<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="#FF6B6B"/>
</svg>

When to use this

Icon repositories, design handoffs, and code reviews format SVG source.

Edge cases

  • Whitespace inside text and tspan elements can be visible.
  • Namespace prefixes must remain bound to the correct URI.
  • Path data whitespace can be minimized only where token boundaries remain unambiguous.

References