SVG Optimizer Internals: String-Level Minification
What SVG optimizers actually remove—comments, metadata, precision—and how to avoid breaking animations or scripts when minifying markup.
Why SVG files are larger than they look
Design tools embed editor namespaces, layer IDs, guide metadata, and high-precision floats. A simple icon can ship at 40–120 KB because of verbose path data and non-rendered elements.
String-level optimizers operate on the serialized XML text rather than a full DOM tree, which keeps the tool fast enough for batch jobs in the browser.
Safe removals: comments and metadata
XML comments and generator stamps (Adobe Illustrator, Figma exports) do not affect rendering. Stripping them is low risk and immediately reduces byte size.
Removing <metadata> and custom data attributes is usually safe for static icons. Keep metadata when SVGs drive SEO on standalone image pages—rare for inline UI assets.
Coordinate precision
Path commands with six decimal places exceed human perception on screens. Rounding to two or three decimals often cuts path payload dramatically with no visible change at standard zoom levels.
Aggressive rounding can affect tiny details (hairline strokes, micro-badges). Preview at target display size before deploying minified files to production CDNs.
When not to minify automatically
SVGs with SMIL animations, embedded scripts, or foreignObject HTML may depend on exact attribute strings. Automated minifiers can break timing attributes or script hooks.
Treat optimization as a release step: run on staging assets, validate in target browsers, then promote to production.