SVG Code Formatter, Indent & Clean Up SVG Source Online
Paste a minified or messy SVG and get back clean, consistently indented markup with one element per line, readable, reviewable and diff-friendly. It only touches whitespace, so paths, IDs, gradients and titles are preserved exactly. Runs entirely in your browser.
What is the svg code formatter?
The SVG Code Formatter turns a minified or messy SVG one-liner into clean, indented markup with one element per line. Pick 2-space, 4-space or tab indentation for diff-friendly, reviewable output. Only whitespace changes, so paths, IDs, gradients and titles stay intact. Free, client-side, and nothing is uploaded.
The GigAI SVG Code Formatter reformats SVG markup into clean, predictable source code without changing a single byte of meaning. Minified SVGs (the kind an icon pipeline, a bundler or a copy-paste from the network tab produces) arrive as an unreadable single line, and once one lands in a pull request nobody can review it or spot a stray attribute. This tool re-indents that markup deterministically: every element on its own line, children indented under their parents, attributes left intact and in place, so the result reads like code a human wrote. Under the hood it uses SVGO's non-destructive prettify pass (with a dependency-free indenter fallback when the engine can't load), which means it strips comments and normalizes whitespace but never removes path data, IDs, gradients, clip-paths, filters, SMIL animation or the <title>/<desc> that assistive tech relies on. You control the indent unit (two spaces, four spaces or tabs) so the output matches your project's style guide and produces the smallest possible diff when you commit it. A live checkerboard preview renders the formatted SVG beside the code so you can confirm at a glance that formatting changed the layout and nothing else. Because everything runs client-side, minified brand assets, internal icon sets and unreleased marks are formatted on your machine and never uploaded, stored or logged. It is the SVG equivalent of running Prettier on a file before you open the PR: a clean-code pass, not a compressor.
- Difficulty:
- Easy
- Typical time:
- ~10s
- Processing:
- 100% browser processing
Last updated
How to use the svg code formatter
- 1
Add your SVG
Paste minified or messy SVG markup, drop a .svg file onto the workspace, or click Import. Load a sample if you just want to see the formatting in action.
- 2
Choose your indentation
Pick 2 spaces, 4 spaces or tabs to match your project. The whole document reflows live to the unit you select.
- 3
Confirm in the preview
Glance at the checkerboard preview to verify the artwork is unchanged, only the source layout should differ.
- 4
Copy or download
Copy the formatted SVG to your clipboard, download it as a .svg, or share a link that reopens the tool with your markup ready to go.
What SVG Code Formatter includes
Deterministic indentation
Every element lands on its own line with children indented under their parents, so a minified one-liner becomes a clean tree you can actually read, review and hand-edit.
2-space, 4-space or tabs
Pick the indent unit that matches your project's style guide. The formatter reflows the whole document to it, so your committed SVG lines up with everything else in the repo.
Whitespace-only, data-safe
Built on SVGO's non-destructive prettify pass. It normalizes whitespace and drops comments, but never touches path data, IDs, gradients, filters, animation or title/desc.
Diff-friendly output
One element per line means a change to a single attribute shows up as a single-line diff in code review: instead of the whole SVG appearing to change because it was one long string.
Live preview beside the code
A checkerboard preview renders the formatted result next to the source, so you can confirm formatting changed only the layout and the artwork is byte-for-byte identical.
Undo / redo & samples
Full undo and redo on your source, one-click sample SVGs to try it instantly, copy, download and a shareable link that reopens the tool with your markup pre-loaded.
Why use our svg code formatter
Make minified SVGs reviewable
A one-line SVG in a pull request is impossible to review. Format it first and every element, attribute and nesting level becomes visible, so a teammate can actually catch a mistake.
Match your codebase style
Choosing 2-space, 4-space or tab indentation means your committed SVGs read like the rest of your source, not like a machine-generated blob dropped into the tree.
Safer than a minifier
This is a formatting pass, not an optimizer: it changes whitespace only, so there is no precision setting to accidentally clip a curve and no ID stripping to break a sprite.
Clean diffs, forever
Once an SVG is formatted one element per line, future edits produce tight, focused diffs: a single changed attribute is a single changed line, not a rewritten string.
Built for the way you work
From quick one-off fixes to daily workflows, see how people put this tool to use.
- Frontend developer
Unminify an SVG for a PR
A bundler emitted a minified icon and it needs a hand tweak. Format it to a readable tree, make the edit, and commit clean source your reviewers can actually read.
- Design systems engineer
Normalize an icon library
Run every icon through the same indent unit so your entire SVG set shares one consistent layout. No mix of tabs, four-space and single-line files in the same folder.
- Open-source maintainer
Keep SVG diffs tight
Format contributed SVGs to one element per line so future changes show up as focused, line-level diffs instead of an entire re-serialized string.
- Technical writer
Make markup readable for docs
Paste a minified SVG into the formatter to get clean, indented source you can drop into documentation or a code sample without a wall-of-text one-liner.
Supported formats
Accepts SVG, and produces SVG, all processed locally in your browser.
- SVG
- SVG
Frequently asked questions
Recommended tools
SVG Optimizer
Minify and clean SVG files in your browser with SVGO, strip editor metadata, round coordinates, drop hidden layers and see the exact bytes and percentage saved. Nothing is uploaded.
SVG Minifier
Aggressively minify SVG online: collapse whitespace, strip comments, metadata and editor namespaces, and squeeze markup to a single line with a live before/after size and % saved. 100% in your browser.
SVG Viewer
Open, paste or drop an SVG to view it on a checkerboard, light or dark canvas with zoom, live dimensions, a source-code pane and a full element/color report: 100% in your browser, nothing uploaded.
SVG to React
Convert SVG to a clean React component in your browser, camelCased attributes, TypeScript or JS, memo, forwardRef and React Native output, with a live preview. Nothing is uploaded.
JSON Formatter
Format, validate and minify JSON in your browser with pinpoint error line + column, jump-to-error, key sorting and live editing: nothing is uploaded.
SVG Compressor
Compress SVG in your browser and see the real transfer size, optimized bytes plus estimated gzip and Brotli payloads, the numbers that actually cross the wire. Nothing is uploaded.
Common problems, solved
Hit a snag? Here are quick fixes for the issues people run into most.
My comments disappeared after formatting.
That's expected, the prettify pass removes comments while it normalizes whitespace. If you need to keep a specific note, add it back after formatting, or keep the original file alongside the formatted one.
The file got a little smaller / larger, not just reformatted.
Formatting adds indentation and newlines (usually a small size increase) and removes comments and redundant whitespace (a decrease). No path data, IDs or elements are removed: only whitespace and comments change. If you want smaller bytes, run it through the SVG Optimizer instead.
It says the input doesn't contain an <svg> element.
The formatter needs real SVG markup that includes an <svg> tag. If you pasted a data-URI or a base64 blob, decode it to raw SVG first, or import the .svg file directly.
Attributes didn't reorder the way I expected.
This is a formatter, not a linter. It re-indents structure and leaves your attributes intact and in place so the change stays whitespace-only and predictable. It won't reorder or rename attributes.
Get the most out of it
Match the indent unit to your project (2 spaces is the common web default) so committed SVGs line up with the rest of your source.
Format an SVG before hand-editing it. A readable tree makes it far easier to find the right path or attribute to change.
Formatting produces clean line-level diffs. Commit the formatted version once and future edits stay reviewable.
Use the checkerboard preview to confirm formatting was whitespace-only and the artwork is unchanged before you copy.
If your goal is smaller files rather than readable source, reach for the SVG Optimizer: formatting is a clean-code pass, not a compressor.
What's new
Recent updates and improvements to the svg code formatter.
Initial release, client-side SVG formatting with 2-space / 4-space / tab indentation, whitespace-only prettify, live checkerboard preview, copy, download, undo/redo, sample SVGs and shareable links.
Added a dependency-free indenter fallback so formatting keeps working when the engine chunk can't load, plus keyboard shortcuts for undo, redo, indent switching and clear.
Clarified in-tool that formatting is whitespace-only and preserves all data, with guidance pointing to the SVG Optimizer when smaller bytes are the goal.
Keep exploring
Problems we solve
Definitions
From the blog
Explore categories
Compare formats
By file type
Common tasks
Your privacy is built in
Your SVG is parsed and formatted entirely in your browser. It is never uploaded to any server. Nothing is stored, logged or transmitted, so you can safely format unreleased logos, brand marks and internal icon sets. When the engine can't load, a built-in dependency-free indenter runs locally too. Close the tab and every trace is gone.
- Runs in your browser
- No uploads
- Nothing stored
Ready to try the svg code formatter?
Free, private and instant. SVG Code Formatter runs right in your browser.