Критерий выбора
| SVG | Canvas |
|---|
| Модель | DOM-вектор | bitmap / пиксели |
| Масштаб | чёткий при любом zoom | нужно перерисовывать |
| События | на узлах | координаты вручную |
| Много объектов | DOM дорогой | быстрее при тысячах частиц |
| SEO/a11y | текст в разметке | хуже из коробки |
Когда SVG
Иконки, логотипы, простые диаграммы, интерактивные элементы с CSS/фокусом, печать.
Когда Canvas (или WebGL)
Игры, визуализации с тысячами точек, видеоэффекты, пиксельная обработка. Часто поверх — offscreen/requestAnimationFrame.
Компромисс
SVG для UI-слоя + Canvas для «тяжёлой» сцены. Не забывайте aria и fallback-текст.
