Каква е разликата между елементите canvas и SVG?

canvas — растрово изображение, рисува се в реално време чрез JS API. Контролира се с пиксели. Използва се за игри, графики, анимации на данни.

SVG — векторно изображение, описва се в XML. Скалира се без загуба на качество. Контролира се с обекти (линии, криви). Използва се за лога, икони, илюстрации. Отличен за адаптивен дизайн.

Сравнение между Canvas и SVG:

Характеристика	Canvas	SVG
Тип графика	Растрова (пикселна)	Векторна (на базата на XML)
Рисуване	С помощта на API на JavaScript	Описва се в XML, рендерира се от браузъра
Управление	Управлява отделните пиксели	Управлява обекти (линии, фигури и т.н.)
Скалиране	Загуба на качество при увеличение	Скалира се без загуба на качество
Интерактивност	Нужна е допълнителна логика за кликвания	Вградена на ниво обекти (чрез DOM)
Производителност	По-добра за сложни, динамични сцени	По-добра за статични или по-малко сложни сцени
Достъпност (Accessibility)	Трудно осигуряване	Вградена (чрез атрибути и DOM)
Приложения	Игри, сложни анимации, визуализация на данни	Логота, икони, илюстрации, графики