SVG Prettifier: Format SVG Code Online

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

1. Paste minified SVG code into the textarea or upload an SVG file
2. The tool automatically switches to the Format tab
3. Click Prettify to format the SVG code
4. The formatted output shows proper indentation and structure
5. 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.