SVG Formatter

Paste SVG markup and format it with clean indentation for readability, or minify it by stripping whitespace and comments for production use.

Last updated: May 21, 2026

Mode

Indent

SVG Input

252 bytes

Formatted SVG

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" fill="#4F46E5"/>
  <path d="M8 12l3 3 5-5" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

259 bytes

2 elements24 × 24252 → 259 bytes

Client-Side Processing

Input Data Stays on Device

Instant Local Execution

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is SVG Formatter?

SVG (Scalable Vector Graphics) is an XML-based format for vector images. SVG exported from design tools like Figma, Illustrator, or Inkscape is often one long unreadable line, or has inconsistent indentation from editing. Before committing SVG to version control or embedding it in code, formatting it consistently makes diffs cleaner and code reviews easier.

This tool formats SVG with proper hierarchical indentation so the element structure is easy to read, or minifies it by removing all unnecessary whitespace, newlines, and comments to reduce file size for production delivery.

How to Use SVG Formatter

Paste SVG code into the input area or click "Load Sample"

Choose Format (readable, indented) or Minify (compact, for production)

Select 2 or 4 space indentation (for Format mode)

Copy the output or download it as an .svg file

Common Use Cases

Developers formatting SVG exported from Figma or Illustrator before committing to version control.
Front-end engineers minifying inline SVG icons before embedding in HTML or JSX.
Designers sharing SVG snippets in Slack or code review and needing readable structure.
Web developers reducing SVG file size for production without lossy optimisation.
Teams enforcing consistent SVG indentation across a component library.
Developers debugging SVG structure by making nesting visible through indentation.

Example Input and Output

A single-line SVG from a design export is formatted with proper indentation for readability.

Minified SVG

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#4F46E5"/><path d="M8 12l3 3 5-5" stroke="white" stroke-width="2" fill="none"/></svg>

Formatted SVG

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" fill="#4F46E5"/>
  <path d="M8 12l3 3 5-5" stroke="white" stroke-width="2" fill="none"/>
</svg>

Privacy

All SVG processing runs in your browser. No data is uploaded to any server.

Inline SVG in React

After formatting, SVG attributes like class, for, and tabindex need to be renamed to className, htmlFor, and tabIndex before using inline in JSX. Use the HTML to JSX tool for that conversion.

Frequently Asked Questions

What is the difference between SVG Formatter and SVG Optimizer?

SVG Formatter only changes whitespace and indentation — it never modifies attributes, removes elements, or alters the visual output. SVG Optimizer (SVGO) aggressively removes redundant data, merges paths, and can change the SVG structure. Use Formatter for readability; use Optimizer to shrink file size for production.

Does formatting or minifying change how the SVG looks?

No. Whitespace between SVG elements has no effect on rendering. The visual output is identical before and after formatting or minifying.

What does minify mode remove?

Minify mode removes XML/SVG comments, collapses multiple whitespace characters into a single space, removes whitespace between tags, and trims leading/trailing whitespace.

Can I format SVG with XML declarations?

Yes. If your SVG has an <?xml version="1.0"?> declaration at the top, the formatter preserves and indents it correctly.

Is my SVG sent to a server?

No. All formatting and minifying runs in your browser. Your SVG never leaves your device.