When you have to read a one-line SVG
An SVG that has been through a build tool arrives with every line break gone. In that state
you cannot tell which path is which shape, or how many g layers deep
you are. Break it onto one line per element and the structure is right there.
Text elements are never wrapped
Unlike HTML, a line break inside an SVG <text> renders as a space. Wrap it
to look tidy and the letters genuinely move apart. So tspan, textPath,
tref and a are kept on one line.
When there are too many attributes
Ten attributes on one element and the line runs off the screen. One line per attribute gives you this instead:
| Off | On |
|---|---|
<path fill="none" stroke="#000" d="M0 0"/> |
<path |
For seeing which attribute changed in a Git commit, turn it on. Editing one attribute stops showing up as the whole line having changed.
Does formatting make the file bigger?
Yes. Indentation and line breaks are characters like any others. You are unfolding it to read it, so run it back through SVG Minify before you ship it.
Will it wrap the coordinates inside a d attribute?
No. d is a single attribute value; breaking it up only makes the value look
different without revealing any structure. Working out what shape a path draws by reading
coordinates is hard anyway — hovering the element in your browser's devtools is faster.
Does it handle plain XML?
The structure comes out fine, but this tool checks that the input contains
<svg>, so non-SVG XML is rejected. For HTML, your browser's devtools are a
better tool.