SVG Formatter

SVG Formatter – Beautify SVG Code

SVG files exported from Figma, Illustrator, or icon libraries — and especially SVGs that went through an optimizer — are usually written on a single line. The SVG formatter turns them into readable, indented markup and shows a live preview so you can confirm the image still renders.

How to use it

1. Paste SVG markup, open an .svg file, or click Sample.
2. Choose indentation and whether comments are kept.
3. Check the preview under the editors, then copy or download the formatted SVG.

Why format SVG?

SVG is XML, and editing it by hand is common: changing a fill color, adjusting a viewBox, adding a <title> for accessibility, or removing an unused <defs> block. With each element on its own line you can find the right <path>, <g> group, or <linearGradient> quickly and understand how gradients, masks, and clip paths are referenced through their id.

What is preserved

The formatter only changes whitespace between elements. Path data in d attributes, transforms, coordinates, namespaces like xmlns:xlink, and attribute order stay exactly the same, so the image renders identically. Because the parser is strict, a broken file — for example an unclosed <g> — is reported with the line and column.

Safe preview

The preview is rendered as an image, so scripts embedded in an SVG never run. That makes it safe to inspect SVGs from unknown sources.

Related tools

Shrink SVG markup with the XML Minifier, embed it in CSS using SVG to Base64 if you need a data URI, or format general XML with the XML Beautifier.