skills.rest
duckhoa-uit
duckhoa-uitCOMMUNITY
Explore all skills by this author →
GitHub

animated-svg-smil

Animate SVG icons with SMIL for hover and state transitions.

1|Updated Apr 7, 2026
Search Tags:#animation#svg#icon#hover#morph#animate#smil
One-click install
npx skills add https://github.com/duckhoa-uit/skills --skill animated-svg-smil
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animated-svg-smil
Source: https://github.com/duckhoa-uit/skills/tree/main/animated-svg-smil
Command: npx skills add https://github.com/duckhoa-uit/skills --skill animated-svg-smil

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

SMIL-based animations allow adding hover- and state-driven animations directly inside SVG markup, eliminating the need for JavaScript animation libraries and reducing runtime dependencies.

Core Features & Use Cases

  • Hover-triggered icon animations without external frameworks
  • Supports translate, rotate, and path morphing inside standalone SVGs
  • Suitable for React/TSX wrappers and standalone outputs

Quick Start

Embed SMIL animation elements inside your standalone SVG and assign an id to the trigger for hover-based transitions.

Frequently Asked Questions about animated-svg-smil

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

FAQPage Schema
How do I animate SVG icons on hover without using JavaScript?▼

You can animate SVG icons on hover without JavaScript by embedding SMIL animation elements directly inside the SVG markup. This approach uses unique trigger ids to handle hover- and state-based transitions natively within the SVG file.

Can I use SMIL animations inside React or TSX icon components?▼

Yes, SMIL animations work inside React and TSX icon components. The Skill supports applying inline animations and path morphing to standalone SVG assets as well as optional React/TSX wrappers.

What is the best way to morph SVG paths using pure SMIL?▼

The best way to morph SVG paths using pure SMIL is to embed animate and animateTransform elements within the SVG markup. This allows for native path morphing, sequencing, and state-driven animations without external frameworks.

Does SMIL animation require a specific SVG viewBox size for icons?▼

Yes, SMIL animation requires maintaining a 24x24 viewBox convention for icons. This standard size ensures consistent scaling and proper rendering of hover- and state-based animations across different components.

Why use SMIL instead of CSS or JavaScript libraries for SVG animations?▼

Using SMIL instead of CSS or JavaScript libraries eliminates the need for external animation frameworks and reduces runtime dependencies. SMIL allows adding hover- and state-driven animations directly inside the SVG markup.

What types of SVG transformations can I achieve with SMIL animate elements?▼

With SMIL animate elements, you can achieve translate, rotate, and path morphing transformations inside standalone SVGs. These elements enable complex sequencing and inline animations triggered by hover events using unique ids.

Related Skills

Explore More Design & Creative Skills→
ManancodeManancode
1

svg-animations

Create and animate scalable SVG graphics with SMIL and CSS techniques.

Community
Advanced
shirulotshirulot

animejs

Create timeline, staggered, and SVG morphing animations with Anime.js.

Community
Intermediate
DanielV-94DanielV-94

animation-designer

Create web UI animations with Framer Motion, CSS keyframes, and GSAP.

Community
Intermediate
arthtyagiarthtyagi
1

web-animation-design

Design natural web motion for UI elements with easing and reduced-motion support.

Community
Advanced