Fine‑Tuning SVG Size with Svgo’s floatPrecision: A Practical Guide

Why floatPrecision Matters

Svgo’s floatPrecision option controls how many decimal places are kept for every numeric SVG attribute (e.g., stroke-width="1.2345" becomes 1.23 when floatPrecision=2). Reducing precision shrinks the file by cutting unnecessary trailing digits, but it can also introduce visible artifacts if the rounding is too aggressive.

Desired Outcome

• Decrease SVG file size by 10–30% for most graphics.
• Maintain visual fidelity for UI icons, logos, and simple illustrations.
• Keep the optimization reversible in case artifacts appear.

Prerequisites

1. Node.js 18+ and npm installed.
2. Svgo 3.x (the default floatPrecision is 3; earlier releases defaulted to 4).
3. A representative SVG file to test the optimization on.
4. Optional: a script to compare numeric values before and after optimization.

Configuration Steps

1. Global Configuration via svgo.config.js

module.exports = {
  plugins: [
    {
      name: 'cleanupNumericValues',
      params: {
        floatPrecision: 2
      }
    }
  ]
};

Place this file in the root of your project. Svgo will automatically load it when you run the CLI.

2. Per‑Command Override

npx svgo --floatPrecision=2 input.svg output.svg

Running from the command line forces the precision for that single execution, leaving the global config untouched.

3. Combine with cleanupNumericValues

The cleanupNumericValues plugin removes unnecessary whitespace and trailing zeros in addition to rounding. The two work best together, yielding the largest size reduction without visual loss.

Expected Outcomes

• File size reduction: 10–30% for typical icons and simple illustrations.
• Visual fidelity: negligible differences for most UI elements; watch out for fine text or small strokes.
• Compatibility: modern browsers (Chrome, Safari, Edge, Firefox) render rounded values fine; older browsers may misinterpret extremely low precision.

Verification Checklist

1. File Size Check
   Run stat -c %s input.svg and stat -c %s output.svg to confirm a >10% reduction.
2. Attribute Comparison
   Use a lightweight script:

   const fs = require('fs');
   const parse5 = require('parse5');
   function extractNumbers(svg){
     const tree = parse5.parse(svg);
     const numbers = [];
     function walk(node){
       if(node.attrs){
         node.attrs.forEach(a=>{
           const matches = a.value.match(/-?\d+(?:\.\d+)?/g);
           if(matches) numbers.push(...matches.map(Number));
         });
       }
       if(node.childNodes) node.childNodes.forEach(walk);
     }
     walk(tree);
     return numbers;
   }
   const orig = fs.readFileSync('input.svg','utf8');
   const opt = fs.readFileSync('output.svg','utf8');
   const diff = extractNumbers(orig).map((v,i)=>Math.abs(v-extractNumbers(opt)[i]));
   console.log('Max difference:', Math.max(...diff));
   

   Ensure the maximum difference is no greater than the set precision (e.g., 0.01 for floatPrecision=2).

3. Visual Side‑by‑Side
   Open both SVGs in a browser and compare at 200% zoom. Look for stroke jitter or text blur.
4. Browser Rendering Test
   Embed both SVGs in a test page and view in Chrome/Firefox. Confirm no layout shift or rendering error.

Recovery Options

• Rollback to Default
  If artifacts appear, remove the floatPrecision setting or set it back to 3 (Svgo 3.x default). Re‑run svgo and re‑compare.
• Incremental Precision Increase
  Start at 2, test, then bump to 3 or 4 until visual fidelity is acceptable.
• Selective Rounding
  For critical elements, use a custom plugin or post‑process only those attributes. This keeps the rest of the file at higher precision.
• Feature‑Specific Test
  Run svgo on a small subset of your SVG library first to gauge impact before a full batch.

Limitations and When to Be Cautious

• Fine text or small strokes may show jagged edges at floatPrecision=2.
• Complex gradients, filters, or animation scripts that rely on precise numeric values can break.
• Older browsers that parse numbers strictly may misinterpret values rounded to very low precision.
• Svgo’s default may change across major releases; always verify the current default before applying a global config.

Practical Takeaway

Use floatPrecision=2 as a starting point for most UI SVG assets. Verify file size, numeric differences, and visual rendering. If artifacts appear, increase precision or isolate the problematic elements. This balanced approach gives you a reproducible, reversible workflow that keeps SVGs lightweight without sacrificing user experience.