Canvas — растр
Потребляет ресурсы видеопроцессора, что делает его работу очень быстрой. Вследствие того, что он растр — умеет применять фильтры, делать захват кадра видео и т.д. и .т.п. С помощью Canvas доступна библиотека WebGL, что само по себе мощное средство для визуализации.
SVG — вектор
Можно использовать непосредственно в DOM, вставляя элементы на страницу. В результате такие элементы доступны для оформления с помощью CSS и являются полноценными участниками DOM. Это значит, что для них доступны как события (типа mouseenter, mouseleave, click и пр.), так и состояния (:hover и пр.).
В то же время, SVG может быть использован в качестве фона (data:uri), маски в фильтре CSS. В этом качестве он уже не доступен для управления с помощью CSS и Javascript.
То бишь это вообще разные технологии и работают с ними по-разному. Если нужны фигуры с обработкой событий и состояний, то однозначно нужен SVG. Если что-то мощное, динамичное, похожее на изображения — Canvas.
Средний
