1---
2title: Animate SVG Wrapper Instead of SVG Element
3impact: LOW
4impactDescription: enables hardware acceleration
5tags: rendering, svg, css, animation, performance
6---
7 
8## Animate SVG Wrapper Instead of SVG Element
9 
10Many browsers don't have hardware acceleration for CSS3 animations on SVG elements. Wrap SVG in a `<div>` and animate the wrapper instead.
11 
12**Incorrect (animating SVG directly - no hardware acceleration):**
13 
14```tsx
15function LoadingSpinner() {
16  return (
17    <svg 
18      className="animate-spin"
19      width="24" 
20      height="24" 
21      viewBox="0 0 24 24"
22    >
23      <circle cx="12" cy="12" r="10" stroke="currentColor" />
24    </svg>
25  )
26}
27```
28 
29**Correct (animating wrapper div - hardware accelerated):**
30 
31```tsx
32function LoadingSpinner() {
33  return (
34    <div className="animate-spin">
35      <svg 
36        width="24" 
37        height="24" 
38        viewBox="0 0 24 24"
39      >
40        <circle cx="12" cy="12" r="10" stroke="currentColor" />
41      </svg>
42    </div>
43  )
44}
45```
46 
47This applies to all CSS transforms and transitions (`transform`, `opacity`, `translate`, `scale`, `rotate`). The wrapper div allows browsers to use GPU acceleration for smoother animations.
48