SVG Minifier vs Code Formatter Graphics Optimization vs Code Formatting — Two Tools That Both 'Format' but Serve Completely Different Files

You have an SVG file exported from Illustrator: 45KB of XML with editor metadata, 8-decimal path coordinates, and excessive whitespace. You run it through an SVG minifier. Output: 12KB. The minifier rounded coordinates, stripped metadata, and collapsed whitespace. The file is smaller and functionally identical.

Now you have a JavaScript file: 15KB of code with inconsistent indentation and mixed style conventions. You run it through a code formatter. Output: 15KB. The formatter fixed the indentation and style. The file size did not change significantly. The file is more readable and functionally identical.

Both tools process text. Both produce "formatted" or "optimized" output. But they serve completely different purposes. Here is the difference — and why using an SVG minifier on code or a code formatter on SVG produces garbage.

SVG Minifier: Graphics Optimization

An SVG minifier reduces file size by removing non-functional content from SVG files. It performs: numeric precision reduction (rounding path coordinates), metadata stripping (removing editor-specific tags), and whitespace collapsing. The goal is smaller file size for faster page loads. The minifier is a performance tool. It optimizes for bandwidth and parsing speed.

Code Formatter: Code Readability

A code formatter improves readability by enforcing consistent formatting rules. It adds: indentation, line breaks, and spacing. It does not reduce file size. It may increase it (adding line breaks where the original had none). The goal is human readability — for code review, debugging, and collaboration. The formatter is a communication tool. It optimizes for human understanding.

Why Confusing Them Produces Garbage

If you run SVG code through a code formatter: the formatter will add indentation and line breaks — increasing the file size, not reducing it. It will not round path coordinates or strip metadata. The SVG will be more readable but no smaller. If you run JavaScript code through an SVG minifier: the minifier will strip whitespace and comments — making the code unreadable. It may also try to "round" numeric values in the code, potentially changing logic.

The rule: SVG goes in the SVG minifier. Code goes in the code formatter. Use SVG minifier for graphics and code formatter for code. Different files. Different purposes. Different tools.