Animate SVG Wrapper Instead of SVG Element
Install this skill
npx skills add vercel-labs/agent-skillsWorks across Claude Code, Cursor, Codex, Copilot & Antigravity
Directly applying CSS animations to SVG elements often results in suboptimal performance because many browser engines fail to offload these operations to the GPU. When an SVG is animated directly, the browser may perform frequent repaints of the entire vector graphic, leading to stuttering or jitter, especially on high-resolution displays. By nesting the SVG within a block-level container like a div, you provide the browser with a standard rectangular box that is easily promoted to a compositor layer. This allows for hardware-accelerated transformations, such as rotations, scales, or translations, while keeping the SVG content static within the container. This strategy effectively decouples the animation logic from the vector rendering pipeline, resulting in smooth frame rates for spinners, icons, or complex graphical interactions across all standard desktop and mobile web browsers.
When to Use This Skill
- •Implementing rotating loading spinners or progress icons
- •Animating interface icons on hover or focus states
- •Creating entry animations for SVG-based data visualizations
- •Orchestrating entrance transitions for complex SVG illustrations
How to Invoke This Skill
Example prompts that trigger this skill in Claude Code, Cursor, or Antigravity:
- “optimize choppy SVG animations
- “fix janky loading spinner performance
- “make SVG animations run at 60fps
- “GPU accelerate CSS animations on SVG
- “best practice for animating icons in React
What this skill does
- •Promotes animated containers to dedicated GPU compositor layers
- •Prevents CPU-bound layout thrashing during SVG transforms
- •Maintains smooth frame rates for complex vector graphics
- •Ensures compatibility with standard CSS transform properties
- •Reduces expensive paint cycles during animation loops
When not to use it
- ✕When animating internal SVG paths or coordinates specifically
- ✕When the animation is trivial and performance overhead is negligible
- ✕When CSS-based animations are replaced by Web Animations API or GSAP
Example workflow
- Identify an existing SVG animation causing layout shifts or jitters
- Remove animation classes from the SVG element directly
- Wrap the SVG markup in a parent container element
- Apply the original CSS animation classes to the new parent container
- Verify performance improvement using browser profiling tools
Pitfalls & limitations
- !Overwrapping elements can lead to bloated document structures
- !Conflicting styles between parent wrapper and inner SVG geometry
- !Potential issues with relative sizing if the wrapper does not match SVG dimensions
FAQ
How it compares
This technique provides a structural performance optimization that avoids the overhead of complex animation libraries, whereas manual approaches often rely on trial-and-error with CSS properties that do not consistently trigger hardware acceleration.
📄 Full skill instructions — original source: vercel-labs/agent-skills
Many browsers don't have hardware acceleration for CSS3 animations on SVG elements. Wrap SVG in a
<div> and animate the wrapper instead.**Incorrect (animating SVG directly - no hardware acceleration):**
function LoadingSpinner() {
return (
<svg
className="animate-spin"
width="24"
height="24"
viewBox="0 0 24 24"
>
<circle cx="12" cy="12" r="10" stroke="currentColor" />
</svg>
)
}**Correct (animating wrapper div - hardware accelerated):**
function LoadingSpinner() {
return (
<div className="animate-spin">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
>
<circle cx="12" cy="12" r="10" stroke="currentColor" />
</svg>
</div>
)
}This applies to all CSS transforms and transitions (
transform, opacity, translate, scale, rotate). The wrapper div allows browsers to use GPU acceleration for smoother animations.How to Use This Skill Unit
Option A: Project-Specific (Recommended)
- Click "Download" above
- In your project, create the directory:
.agent/skills/rendering-animate-svg-wrapper/ - Save the file as
SKILL.md - The agent will automatically discover the skill based on its description.
Option B: Global Installation (All Agents)
Save the file to these locations to make it available across all projects:
- Claude Code:
~/.claude/skills/vercel-labs/agent-skills/rendering-animate-svg-wrapper/SKILL.md - Cursor:
~/.cursor/skills/vercel-labs/agent-skills/rendering-animate-svg-wrapper/SKILL.md - Antigravity:
~/.gemini/antigravity/skills/vercel-labs/agent-skills/rendering-animate-svg-wrapper/SKILL.md
🚀 Install with CLI:npx skills add vercel-labs/agent-skills
