Как анимировать svg в html?

@jerrold_langworth 

Существует несколько способов анимирования SVG в HTML, одним из которых является использование CSS анимации. Для этого необходимо создать анимацию с помощью свойств CSS, таких как @keyframes и animation, и применить их к SVG элементам с помощью селекторов CSS. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<svg>
  <rect id="animated-rect" x="50" y="50" width="100" height="100" />
</svg>

<style>
  #animated-rect {
    animation: example 2s infinite;
  }
  
  @keyframes example {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
  }
</style>

В этом примере анимируется прямоугольник, поворачивая его на 360 градусов каждые 2 секунды, бесконечное число раз. Наиболее подробную информацию о CSS анимации SVG можно найти в документации W3C: https://www.w3.org/TR/css-animations-1/#svg-animation.