Accessible Title<\/title> Description for screen readers<\/desc> <\/svg> ``` ### Common Shapes Cheatsheet Rectangle: `` Circle: `` Ellipse: `` Line: `` Polyline: `` Polygon: `` ### Path Commands Quick Reference Movement Commands: - M x y: Move to absolute position - m dx dy: Move relative - L x y: Line to absolute - l dx dy: Line relative - H x: Horizontal line absolute - h dx: Horizontal line relative - V y: Vertical line absolute - v dy: Vertical line relative - Z: Close path Curve Commands: - C x1 y1 x2 y2 x y: Cubic bezier (two control points) - S x2 y2 x y: Smooth cubic (reflects previous control) - Q x1 y1 x y: Quadratic bezier (one control point) - T x y: Smooth quadratic (reflects previous control) - A rx ry rotation large-arc sweep x y: Arc ### SVGO CLI Commands Install globally: `npm install -g svgo` Optimize single file: `svgo input.svg -o output.svg` Optimize directory: `svgo -f .\/src\/icons -o .\/dist\/icons` Show optimization stats: `svgo input.svg --pretty --indent=2` Use config file: `svgo input.svg --config svgo.config.mjs` ### Fill and Stroke Quick Reference Fill properties: fill, fill-opacity, fill-rule (nonzero, evenodd) Stroke properties: stroke, stroke-width, stroke-opacity, stroke-linecap (butt, round, square), stroke-linejoin (miter, round, bevel), stroke-dasharray, stroke-dashoffset --- ## Implementation Guide (5 minutes) ### SVG Document Structure The SVG element requires the xmlns attribute for standalone files. The viewBox defines the coordinate system as "minX minY width height". Width and height set the rendered size. ```xml

--- name: moai-tool-svg description: > SVG creation, optimization, and transformation specialist. Use when creating vector graphics, optimizing SVG files with SVGO, implementing icon systems, building data visualizations, or adding SVG animations. license: Apache-2.0 compatibility: Designed for Claude Code allowed-tools: Read Grep Glob Bash(svgo:*) Bash(npx:*) WebFetch user-invocable: false metadata: version: "1.0.0" category: "tool" modularized: "true" status: "active" updated: "2026-01-26" tags: "svg, vector, graphics, svgo, optimization, animation, icons" related-skills: "moai-domain-frontend, moai-docs-generation" context7-libraries: "\/nicolo-ribaudo\/svgo" --- # SVG Creation and Optimization Specialist Comprehensive SVG development covering vector graphics creation, SVGO optimization, icon systems, data visualizations, and animations. This skill provides patterns for all SVG workflows from basic shapes to complex animated graphics. --- ## Quick Reference (30 seconds) ### Basic SVG Template ```xml