В чём суть
Оба рисуют графику, но модель разная: пиксели vs DOM-фигуры.
Сравнение
| canvas | SVG |
|---|
| Модель | растр (битмап) | вектор + DOM |
| Масштаб | может мылиться | чёткий |
| События | координаты вручную | на элементах |
| Много объектов | часто быстрее | DOM может тормозить |
| a11y/SEO | сложнее | лучше из коробки |
<svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" /></svg>
<canvas width="100" height="100"></canvas>
Игры/видеообработка — canvas/WebGL; иконки, графики, интерактивные схемы — часто SVG.
Итог
Нужен DOM и масштабируемость — SVG; нужен пиксельный буфер и высокая частота — canvas.
