SVG Prettifier: Beautify & Format SVG Code Online
Paste a minified or single-line SVG and get it back as clean, indented source: one node per line, consistent nesting, and a live preview so you can confirm the artwork is untouched. Runs in your browser, never uploaded.
What is the svg prettifier?
The SVG Prettifier beautifies minified or single-line SVG source into clean, indented markup with one node per line and a tab or space width you choose. A live preview confirms the artwork is untouched since only formatting changes. Free, works offline, and runs entirely in the browser with nothing uploaded.
The GigAI SVG Prettifier is a desktop-grade code formatter for SVG markup that runs entirely in your browser. Minified SVGs (the kind SVGO, a build pipeline, or a data-URI leaves behind) are impossible to read: everything is crammed onto a single line, nesting is invisible, and a one-character diff shows up as the whole file changing. This tool reverses that. Paste the markup, drop a.svg file, or import one, and it re-indents the source with a consistent width you control (2, 4 or tab), puts each element on its own line, preserves the nesting of groups, defs, gradients and clip-paths, and hands back source you can actually read, review and diff. It uses SVGO's prettify path where available and a dependency-free indenter as a fallback, so it keeps working even offline. Crucially, prettifying is about presentation, not data: it does not round coordinates, merge paths, or strip attributes, so the rendered artwork is identical, and the live checkerboard preview proves it, sitting right beside the formatted code. Because everything happens on your device, confidential logos, unreleased brand marks and internal icon sets never leave the machine, close the tab and every trace is gone. Reach for the Prettifier when you need to understand an inherited SVG, produce a clean diff in a pull request, teach the structure of a graphic, or simply un-minify a file before editing it by hand.
- Difficulty:
- Easy
- Typical time:
- ~10s
- Processing:
- 100% browser processing
Last updated
How to use the svg prettifier
- 1
Add your SVG
Paste minified or single-line markup into the editor, drop a .svg file anywhere on the workspace, or click Import. Load a sample in one click to see it work.
- 2
Pick an indent
Choose 2-space, 4-space or tab indentation to match your project. The source re-formats live the moment you change it.
- 3
Check the preview
Glance at the checkerboard preview beside the code to confirm the artwork is unchanged, prettifying should only ever move whitespace.
- 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 source pre-loaded.
What SVG Prettifier includes
One element per line, cleanly nested
Explodes a crammed single-line SVG into readable source: every tag on its own line, groups, defs and gradients indented to show the tree, so structure is obvious at a glance.
Choose your indent width
Format with a 2-space, 4-space or tab indent to match your project's style guide. Change it and the code re-formats live. No config file, no Prettier plugin to wire up.
Formats source, never touches data
Prettifying is presentation-only: coordinates aren't rounded, paths aren't merged, attributes aren't stripped. The bytes grow but the rendered artwork is byte-for-byte identical.
Live preview beside the code
A checkerboard preview renders the formatted SVG next to the source, so you can confirm at a glance that beautifying changed only the whitespace, never the graphic.
Diff-friendly output
Consistent indentation and one-node-per-line make SVGs review-able in a pull request, a real change stands out instead of being buried in a single reformatted line.
100% client-side, works offline
Formatting happens on your device using SVGO's prettify path with a dependency-free indenter fallback. Nothing is uploaded, stored or logged, safe for confidential brand assets.
Why use our svg prettifier
Read and edit inherited SVGs
Un-minify a file someone else shipped so you can actually find the path, gradient or group you need to change, then re-optimize it when you're done.
Clean diffs in code review
Formatted, one-node-per-line SVGs turn an unreviewable one-line blob into a diff a teammate can actually read, so real changes are visible in the pull request.
No install, no config, no upload
Get Prettier-style SVG formatting without adding a dependency or an editor plugin, and without sending an unreleased logo to a third-party server.
Confidence it stays identical
Because prettifying only changes whitespace, the live preview lets you confirm the artwork is untouched before you paste the readable version back into your codebase.
Built for the way you work
From quick one-off fixes to daily workflows, see how people put this tool to use.
- Frontend developer
Un-minify before editing
Expand a one-line SVG from a build output so you can hand-edit a path or swap a fill color, then run it back through the Optimizer once the change is in.
- Reviewer / Team lead
Make an SVG diffable in review
Format a minified icon before it lands in a pull request so a coordinate or color change shows up as a one-line diff instead of a wholesale reformat.
- Design systems engineer
Normalize source style
Re-indent every icon to the same 2-space width so the whole registry reads consistently and hand edits don't introduce noisy whitespace churn.
- Educator / Learner
See how a graphic is built
Beautify a compact SVG to reveal its structure (the groups, gradients and clip-paths) so it's easy to teach or learn how the artwork is assembled.
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 Code Formatter
Format and indent SVG source in your browser, turn a minified one-liner into clean, diff-friendly markup with consistent indentation and one element per line. Nothing is uploaded, and no data is removed.
Common problems, solved
Hit a snag? Here are quick fixes for the issues people run into most.
The file got bigger after prettifying.
That's expected, indentation and line breaks add bytes. Prettifying is for readability, not shipping. When you're done editing, run the file through the SVG Optimizer or Minifier to shrink it back down.
It says the input doesn't look like an SVG.
The formatter needs real SVG markup that contains an <svg> element. If you pasted a data-URI or a base64 blob, decode it to raw SVG first with the Data-URI tool, or import the .svg file directly.
Indentation looks slightly off on odd markup.
When SVGO's prettify path can't load, a dependency-free indenter runs instead and is best-effort on unusual or malformed nesting. Fix any unclosed tags, or try a different indent width: the artwork in the preview is still correct.
My inline text or whitespace-sensitive content changed spacing.
A handful of SVGs rely on significant whitespace inside <text> or with xml:space="preserve". Check the preview. If spacing matters, keep that element's original formatting rather than reformatting the whole file.
Get the most out of it
Match your project's indent. 2-space is the common default for SVG in web codebases. Use tabs if your repo does.
Prettify to edit, optimize to ship: beautify to make a change, then run the SVG Optimizer to strip the whitespace back out before it goes live.
Format a minified SVG before opening a pull request so reviewers see a real diff instead of one giant reformatted line.
Use the live preview as a safety check: if the artwork looks different after formatting, the input markup was likely malformed.
Pair with the SVG Viewer to inspect a graphic and the Prettifier to make its source readable at the same time.
What's new
Recent updates and improvements to the svg prettifier.
Initial release, client-side SVG prettifier with selectable 2-space / 4-space / tab indentation, one-element-per-line output, live checkerboard preview, copy, download, undo/redo and shareable links.
Added a dependency-free indenter fallback so formatting keeps working when SVGO's chunk can't load, plus keyboard shortcuts and a set of sample minified SVGs.
Added a live before/after line-count and byte readout, and clearer guidance that prettifying is presentation-only and grows file size on purpose.
Keep exploring
Problems we solve
Definitions
From the blog
- Best QR Code Size for Print: Scan-Distance Rules That Actually Work
- Using QR Codes in Marketing Campaigns: Practical Use Cases and Honest Tracking
- How to Reduce SVG File Size: Minify, Trim Precision, and Strip the Cruft
- How to Scan a QR Code on Any Device: iPhone, Android, Desktop, and Safely
- How to Create a Wi-Fi QR Code: Share Your Network With a Scan
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 prettify unreleased logos, brand marks and internal icon sets. Formatting uses SVGO's prettify path with a dependency-free indenter fallback, so it keeps working even offline. Close the tab and every trace is gone.
- Runs in your browser
- No uploads
- Nothing stored
Ready to try the svg prettifier?
Free, private and instant. SVG Prettifier runs right in your browser.