В чем разница между Plane HTML и SVG анимацией

Plane HTML анимация использует CSS или JavaScript для изменения свойств DOM-элементов (например, transform, opacity). Подходит для простых переходов, но может страдать от производительности при сложных сценариях.

SVG анимация работает с векторной графикой, используя SMIL (<animate>, <animateTransform>) или CSS/JS. Позволяет анимировать отдельные пути, фигуры с высокой точностью, но сложнее в управлении.

Пример CSS анимации (HTML):

.box { 
  transition: transform 0.3s; 
}
.box:hover { 
  transform: scale(1.1); 
}

Пример SVG анимации (SMIL):

<circle cx="50" cy="50" r="10">
  <animate attributeName="r" values="10;20;10" dur="1s" repeatCount="indefinite" />
</circle>

Ключевые отличия:

• SVG лучше для сложной векторной графики (морфинг, движение по пути).
• HTML проще для интерфейсных элементов (кнопки, модалки).
• Производительность SVG зависит от сложности контуров.