Canvas — это растровый API для рисования графики на лету с помощью JavaScript. Он рисует пиксели на холсте.
SVG (Scalable Vector Graphics) — это XML-формат для описания двухмерной векторной графики. Он описывает фигуры, линии, текст и т.д.
Основные отличия:
- Основа: Canvas — пиксели, SVG — векторы (математические описания).
- Способ рисования: Canvas — императивный (команды рисования), SVG — декларативный (описание элементов).
- Масштабирование: Canvas масштабируется с потерей качества (растр), SVG масштабируется без потери качества (вектор).
- Производительность: Canvas лучше подходит для динамичной графики, анимации, игр. SVG лучше для статической, сложной графики, диаграмм.
- Доступность: Элементы SVG доступны через DOM, их можно изменять CSS и JavaScript. Canvas рисует на пиксельном уровне, отдельные элементы недоступны.
- Интерактивность: Интерактивность в SVG встроена на уровне элементов. В Canvas приходится отслеживать события мыши/касания и определять, на какие пиксели они пришлись.
- Формат: Canvas — это элемент
<canvas> и JavaScript API. SVG — это самостоятельный XML-формат, который можно вставлять напрямую в HTML или использовать как файл (.svg).
Пример создания круга:
javascript
html