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

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).

Пример создания круга:

// Canvas
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill();

<!-- SVG -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" fill="red" />
</svg>