kennethnym/aris
1
0
Fork 0
mirror of https://github.com/kennethnym/aris.git synced 2026-02-02 05:01:17 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
331a2596fa90f3f0eb6e1530541b1719acc10ba7
aris/.claude/skills/vercel-react-best-practices/rules/rendering-animate-svg-wrapper.md
kenneth 331a2596fa Add Claude skills for React best practices and web design 
- react-best-practices: Performance optimization patterns (client-side only)
- web-design-guidelines: UI review against Web Interface Guidelines

Co-authored-by: Ona <no-reply@ona.com>
2026-01-17 11:53:08 +00:00

1.2 KiB
Raw Blame History

title, impact, impactDescription, tags
title impact impactDescription tags
Animate SVG Wrapper Instead of SVG Element LOW enables hardware acceleration rendering, svg, css, animation, performance

Animate SVG Wrapper Instead of SVG Element

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.