moai-tool-svg

# 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 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"> <title>Accessible Title</title> <desc>Description for screen readers</desc> <!-- Content here --> </svg> ``` ### Common Shapes Cheatsheet Rectangle: `<rect x="10" y="10" width="80" height="60" rx="5" />` Circle: `<circle cx="50" cy="50" r="40" />` Ellipse: `<ellipse cx="50" cy="50" rx="40" ry="25" />` Line: `<line x1="10" y1="10" x2="90" y2="90" stroke="black" />` Polyline: `<polyline points="10,10 50,50 90,10" fill="none" stroke="black" />` Polygon: `<polygon points="50,10 90,90 10,90" />` ### 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 rot...