Back to Cookbook

SVG Scrubber

Clean, optimize, and standardize SVGs straight out of Illustrator

SVGs exported from Illustrator arrive bloated with metadata, inline styles, editor comments, and unnecessary nested groups. This recipe processes a folder of SVGs and outputs clean, optimized files — with optional sprite sheet generation.

House RecipeWork1 min

PROMPT

Create a skill called "SVG Scrubber". When I give you SVG files or a directory of SVGs, optimize each one: remove editor metadata (Illustrator, Sketch, Figma comments), remove unnecessary groups and layers, flatten transforms where possible, convert inline styles to attributes, optimize path data (reduce decimal precision, use shorter notation), normalize viewBox attributes, remove hidden elements, and clean up auto-generated IDs (replace "Layer_1", "SVGID_42" with meaningful or minimal IDs). Output clean, minified SVGs. Also offer: (1) an SVG sprite sheet combining all icons into one file with symbol references, (2) inline-ready output stripped of XML declarations and doctypes, and (3) a before/after file size report. Preserve animation attributes and accessibility titles/descs if present.

How It Works

Drop a folder of SVGs (or a single file) on your Claw, and it strips

the bloat: removes editor metadata, unnecessary groups, inline styles

(converts to attributes or classes as you prefer), comments, and hidden

elements. Optimizes paths, normalizes viewBox, and outputs files that

are typically 30-60% smaller.

What You Get

  • Metadata and editor comments removed
  • Unnecessary groups and layers flattened
  • Inline styles converted to attributes or CSS classes
  • Path data optimized (fewer points, shorter notation)
  • Consistent viewBox normalization
  • Hidden elements removed
  • IDs cleaned up (no more "Layer_1" and "SVGID_42")
  • Optional SVG sprite sheet generation
  • Optional inline-ready output (no XML declaration, no doctype)
  • Before/after file size comparison

Setup Steps

  1. Give your Claw a directory of SVGs or a single file
  2. Choose output preferences: attributes vs. classes, preserve specific IDs, sprite sheet
  3. Your Claw processes everything and outputs clean files
  4. Review and use in your project

Tips

  • Run this on every batch of icons from a designer before adding to a project
  • The sprite sheet option is great for icon sets — one HTTP request instead of dozens
  • Inline-ready output strips the XML declaration so you can paste SVGs directly into HTML
  • Preserves animation attributes if present — it doesn't break animated SVGs
  • Typical savings: 30-60% file size reduction
Tags:#web-design#svg#optimization#assets