Skip to content

SVG Optimizer

Caution

Optimize SVG files for web use by removing redundant markup, applying SVGO transforms, converting to symbol sprites, and generating accessible inline SVGs.

By community 1,900 v1.0.0 Updated 2026-03-08

Install

Claude Code

Copy the SKILL.md file to .claude/skills/svg-optimizer.md

About This Skill

SVG Optimizer analyzes SVG files and applies a comprehensive optimization pipeline to reduce file size while preserving visual fidelity and adding proper accessibility attributes.

Optimization Passes

  1. Metadata removal — Strips editor-specific attributes (Figma node IDs, Sketch layer names, Adobe Illustrator namespaces)
  2. Path simplification — Merges redundant path segments, removes invisible elements (zero-opacity, zero-width)
  3. Attribute cleanup — Removes default attribute values, converts RGB colors to hex shorthand, normalizes viewBox
  4. Transform consolidation — Merges nested transform matrices into a single matrix operation
  5. Number precision — Reduces coordinate decimal places to 2-3 significant digits

Symbol Sprite Generation

Combines multiple SVG files into a single `<svg>` with `<symbol id="icon-name">` elements. Usage via `<use href="#icon-name">`. Generates TypeScript type unions for available icon names.

Accessibility

Adds `role="img"`, `aria-label`, `<title>`, and `<desc>` elements. For decorative icons, adds `aria-hidden="true"` and `focusable="false"`.

Output Formats

  • Optimized standalone `.svg` files
  • `sprite.svg` symbol sprite
  • React `<Icon>` component wrapper with TypeScript props
  • CSS mask-image icon utility classes

Use Cases

  • Batch optimizing exported Figma SVGs before committing to the codebase
  • Converting a folder of individual SVG icons into a single symbol sprite
  • Adding title and desc elements for screen reader accessibility
  • Removing Figma-specific metadata and inline styles from exported SVGs

Pros & Cons

Pros

  • + Typically reduces SVG file size by 40-70% without visual quality loss
  • + Symbol sprite reduces HTTP requests for icon-heavy pages
  • + Accessibility attributes added automatically for compliance
  • + TypeScript icon name union prevents typos in component usage

Cons

  • - Aggressive path simplification can alter hairline stroke visuals at small sizes
  • - Symbol sprite requires same-origin or CORS headers for cross-domain use

Related AI Tools

Claude Code

Claude Code

Paid

Anthropic's agentic CLI for autonomous terminal-native coding workflows

  • Terminal-native autonomous coding agent
  • Full file system and shell access for multi-step tasks
  • Deep codebase understanding via repository indexing
View Pricing →
Cursor

Cursor

Freemium

AI-native code editor with deep multi-model integration and agentic coding

  • AI-native Cmd+K inline editing and generation
  • Composer Agent for autonomous multi-file changes
  • Full codebase indexing and context awareness
Get Started →
GitHub Copilot

GitHub Copilot

Freemium

AI pair programmer that suggests code in real time across your IDE

  • Real-time code completions across 30+ languages
  • Copilot Chat for natural language code Q&A
  • Pull request description and summary generation
Get Started →

Related Skills

Icon Generator

Verified
CC Cu Gm

Creates optimized SVG icons with consistent stroke weights, viewBox sizing, and accessibility attributes. Supports icon sprite sheet generation.

2,800 design
View

Animation Creator

Verified
CC Cu WS

Create CSS animations, Framer Motion sequences, Lottie JSON exports, and GSAP timelines for UI transitions, loading states, and micro-interactions.

3,200 design
View

Design System Builder

Caution
CC Cu WS Cx

Sets up design token systems, component libraries, and style guides with consistent theming, spacing scales, and typography hierarchies.

5,100 design
View

Stay Updated on Agent Skills

Get weekly curated skills + safety alerts

每周精选 Skills + 安全预警