Format SVG Code for Readability
SVG files from design tools are often minified into a single unreadable line. This formatter adds proper indentation and line breaks to make SVG code human-readable. Useful for debugging, editing, and understanding how an SVG is constructed. All processing happens in your browser.
How to Use
- Paste minified SVG code into the textarea or upload an SVG file
- The tool automatically switches to the Format tab
- Click Prettify to format the SVG code
- The formatted output shows proper indentation and structure
- Copy the formatted code or download the file
Format Operations
The Format tab provides five operations:
- Prettify: adds indentation and line breaks for human-readable SVG
- Minify: strips all whitespace for smallest possible output
- Inline CSS: moves style rules to inline attributes for email HTML compatibility
- Absolute Paths: converts relative path commands to absolute coordinates
- Remove Metadata: strips editor-specific attributes and metadata elements
Common Use Cases
Debug SVG rendering issues
When an SVG doesn’t render correctly, formatted code makes it easier to spot structural problems, incorrect attributes, or nested elements causing issues.
Edit SVGs by hand
Prettified SVG code is readable enough to edit directly. Change colors, adjust paths, modify text, or restructure elements without opening a design tool.
Learn SVG structure
Formatted SVGs reveal the document structure, making it easier to understand how paths, gradients, filters, and other SVG features work together.