Question

What is the process to animate SVG graphics? Could you provide an example?

Answer 1

SVG animation involves manipulating SVG elements over time using CSS, JavaScript or SMIL. CSS is simple and widely supported but lacks control. JavaScript provides more control but requires additional libraries like GSAP for complex animations. SMIL offers the most control but has limited browser support.

For a basic CSS example, consider an SVG circle element:

<svg>

  <circle id="myCircle" cx="50" cy="50" r="50"/>

</svg>

To animate this circle’s radius from 50 to 100 over 2 seconds, we use keyframes:

@keyframes expand {

  from {r: 50;}

  to {r: 100;}

}

#myCircle {

  animation: expand 2s infinite;

}