В чем разница между Canvas и SVG?

Canvas — это растровый API для рисования графики на лету с помощью JavaScript. Он рисует пиксели на холсте.

SVG (Scalable Vector Graphics) — это XML-формат для описания двухмерной векторной графики. Он описывает фигуры, линии, текст и т.д.

Основные отличия:

• Основа: Canvas — пиксели, SVG — векторы (математические описания).
• Способ рисования: Canvas — императивный (команды рисования), SVG — декларативный (описание элементов).
• Масштабирование: Canvas масштабируется с потерей качества (растр), SVG масштабируется без потери качества (вектор).
• Производительность: Canvas лучше подходит для динамичной графики, анимации, игр. SVG лучше для статической, сложной графики, диаграмм.
• Доступность: Элементы SVG доступны через DOM, их можно изменять CSS и JavaScript.