CodesBeautify

SVG Formatter

Expand a minified SVG icon or illustration into indented markup you can actually read and edit by hand.

SVG markup
Formatted SVG
Runs locally in your browser

About the SVG Formatter

Icons exported from design tools arrive as one enormous line. This formatter parses the markup with the browser XML parser, so you find out immediately if a tag is unclosed or an attribute is missing its quote, then prints the document again with one element per line and children nested under their parent.

Path data is the reason SVG is hard to read, and it is left alone on purpose. The d attribute of a path can be thousands of characters long, and splitting it would make the file bigger without making it clearer. Instead, a start tag longer than the width you set is broken so that each attribute sits on its own line, aligned under the element name. Set One attribute per line to force that shape for every element with attributes.

Structural elements keep their meaning. A defs block with gradients or filters indents like any other container, use and symbol references are untouched, and a short element containing only text, such as a title or desc, is kept on a single line so the accessible name stays easy to spot. Self closing tags are printed with a space before the slash, which is the common convention in hand written SVG.

Comments are kept by default and can be dropped with the Keep comments switch, which is useful for the editor banner that most export tools insert. Namespace prefixes such as xlink:href and inkscape:label are preserved exactly. To go the other way and shrink the file, use the XML Minifier, and to embed the icon in CSS try Image to Base64.

How to use

  1. Paste the contents of an .svg file into the left pane, or press Sample to load a minified cloud icon.
  2. Set Wrap tags longer than to the column where you want long start tags to break, or tick One attribute per line to always break them.
  3. Untick Keep comments if you want the exporter banner removed.
  4. A parse error names the line and column of the first problem. Fix it and the output returns.
  5. Press Download to save the readable version as formatted.svg.

Common questions

Why is the d attribute of my path still one long string?
Path data is deliberately never broken. Line breaks inside it would add bytes and would not make the shape any easier to understand.
Does formatting change how the image renders?
No. Only whitespace between tags and attributes changes, and SVG ignores that whitespace outside text elements.
Can I paste an SVG that contains embedded CSS or script?
Yes. Style and script contents sit inside CDATA or text nodes and are copied through without being reindented.
What if my file starts with an XML declaration or a doctype?
Both are kept on their own line at the top of the output, ahead of the root element.