skills.rest
h102-log
h102-logCOMMUNITY
Explore all skills by this author →
GitHub

moai-tool-svg

Create, optimize, and animate SVG vector graphics with SVGO tooling.

Updated Jun 18, 2026
Search Tags:#frontend#optimization#animation#icons#svg#vector graphics#svgo
One-click install
npx skills add https://github.com/h102-log/pdfrag --skill moai-tool-svg-h102-log
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moai-tool-svg
Source: https://github.com/h102-log/pdfrag/tree/main/.claude/skills/moai-tool-svg
Command: npx skills add https://github.com/h102-log/pdfrag --skill moai-tool-svg-h102-log

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires svgo, and includes references (resource) components.

What problem does it solve? Hand-writing SVG markup, optimizing file size, and implementing animations require deep knowledge of path commands, gradients, filters, and SVGO configuration that developers often lack. ## Core Features & Use Cases - SVG Creation Patterns: Ready-to-use templates for shapes, paths, gradients, symbols, text, and reusable icon systems. - SVGO Optimization: CLI commands and configuration files for compressing SVG files, building icon sprites, and SVGZ compression. - Animation & Interaction: CSS keyframes, SMIL elements, and JavaScript patterns for line drawing, morphing, and interactive graphics. - Use Case: When building a dashboard, use this Skill to generate an accessible bar chart SVG with hover effects, then optimize the exported icon set with SVGO before shipping. ## Quick Start Ask the assistant to create an optimized SVG icon with a gradient fill and a hover animation for your web project.

Frequently Asked Questions about moai-tool-svg

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I optimize SVG files with SVGO?▼

Install SVGO globally with npm install -g svgo, then run svgo input.svg -o output.svg for single files or svgo -f ./src/icons -o ./dist/icons for directories. Use a svgo.config.mjs file to customize plugins like prefixIds and removeAttrs.

How do I create an SVG line drawing animation?▼

Set stroke-dasharray and stroke-dashoffset to the path length, then animate stroke-dashoffset to zero with CSS keyframes or SMIL. Use getTotalLength() in JavaScript to calculate the exact path length for the dasharray value.

What is the difference between SVG clipPath and mask?▼

clipPath provides hard-edged binary visibility where content is either inside or outside the clip region. mask uses alpha channel values where white reveals, black conceals, and gray partially reveals, enabling soft gradient fade effects.

Does SMIL animation work in all browsers?▼

SMIL is deprecated in Chrome and Edge but still functions. For maximum cross-browser compatibility, use CSS animations for transforms and opacity, or JavaScript with requestAnimationFrame and the Web Animations API.

How do I make SVG graphics accessible to screen readers?▼

Add role="img" with aria-labelledby pointing to title and desc elements inside the SVG for meaningful graphics. For decorative SVGs, set aria-hidden="true" and focusable="false" to hide them from assistive technology.

Why does my SVG transform rotate around the wrong point?▼

SVG elements default to transform-origin at coordinate (0, 0), unlike HTML elements. Set transform-origin: center in CSS or use explicit coordinates like transform-origin: 50px 50px to control the rotation pivot.

Related Skills

Explore More Design & Creative Skills→
pengelbrechtpengelbrecht
6

SVG Logo Designer

Generate scalable SVG logo concepts from descriptive briefs with layout variations.

Community
Intermediate
levanminhduclevanminhduc

remix-icon

Implement RemixIcon across webfont, SVG, React, and Vue integrations with ri-{icon-name}-{style} naming conventions.

Community
Basic
HCMUTE-RTICHCMUTE-RTIC

ui-visual-validator

Validate UI modifications for design system compliance and accessibility via screenshot analysis.

Official
Advanced
obulaiobulai
1

obul-quiver

Generate SVGs from text prompts and vectorize raster images using AI.

Official
Intermediate