SVG Icon Optimizer

What this skill does

Runs svgo over a directory of SVG icons with a profile tuned for icon use cases (preserving viewBox, removing fill if monochrome icons are themed via CSS), and reports per-file size deltas. Targets each icon being under 1 KB.

Inputs

• icons_dir: directory containing .svg files.
• Optional monochrome: if true, strip fill attributes so CSS can color them (default true).
• Optional keep_ids: array of <g id="..."> IDs to preserve (e.g., for animation targets).

Steps

1. Inventory icons: find <icons_dir> -name '*.svg' -type f and capture each file's byte size.
2. Generate svgo.config.js:

   module.exports = {
     plugins: [
       { name: 'preset-default', params: { overrides: { removeViewBox: false } } },
       'removeDimensions',
       'removeXMLNS',
       <if monochrome:> { name: 'removeAttrs', params: { attrs: '(fill|stroke)' } },
     ],
   };
   

3. Run npx svgo --multipass --config svgo.config.js -f <icons_dir>. The --multipass flag iterates until stable.
4. Re-measure each file's byte size.
5. For files still over 1 KB, run a deeper pass: svgo --plugin=convertPathData --plugin=mergePaths.
6. Detect files that lost their viewBox (some hand-authored SVGs use width/height only); restore by reading the original first if needed.
7. Compute totals: bytes saved across the directory, per-file delta, count of icons still > 1 KB.
8. For survivors > 1 KB, emit a per-file note listing the largest path (d=) and its length.
9. Save a markdown report svg-optimization.md.

Output

svg-optimization.md with a summary table (count, total bytes before, total bytes after, savings%) plus a per-file table sorted by absolute bytes saved. The optimized SVGs replace originals in icons_dir.

Verification

Render each optimized SVG inline in a small HTML harness and visually compare against the original (e.g., with playwright's screenshot diff at icon scale). Confirm xmlns="http://www.w3.org/2000/svg" is preserved if the icons will be served standalone (svgo's removeXMLNS only safe for inline use). Re-measure with wc -c and confirm the report's numbers.

Edge cases

• Icons referencing external symbols (<use href="external.svg#foo">): keep IDs and don't remove defs.
• Icons with embedded raster images (base64 PNGs): refuse to optimize without explicit confirmation.
• Multi-color icons that depend on fill attributes: respect monochrome=false and preserve fills.
• SVGs with gradients or filters: skip removeUnusedNS and mergePaths to avoid breaking visual appearance.