Какие преимущества у Canvas перед SVG и когда его выбирать?

Canvas и SVG решают одну задачу — рисование графики в браузере, но принципиально по-разному. Canvas — это растровый холст: вы получаете область пикселей и рисуете на ней через JavaScript-команды. Браузер не хранит информацию о том, что именно вы нарисовали, — только итоговые пиксели. SVG — это векторный формат, где каждый элемент (круг, путь, текст) становится частью DOM и описывается декларативно.

Ключевые различия

• Модель рендеринга: Canvas — immediate mode (рисуем каждый кадр заново), SVG — retained mode (браузер сам хранит и перерисовывает элементы).
• Производительность: Canvas быстрее при тысячах объектов, SVG деградирует из-за большого DOM.
• Интерактивность: в SVG каждый элемент — DOM-узел с событиями и CSS, в Canvas нужно вручную вычислять попадание курсора.
• Масштабирование: SVG остаётся чётким при любом зуме, Canvas при увеличении пикселизируется.
• Доступность и SEO: SVG-элементы доступны для скринридеров, Canvas — нет.

Пример на Canvas

const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < 5000; i++) {
    ctx.beginPath();
    ctx.arc(Math.random() * 800, Math.random() * 600, 2, 0, Math.PI * 2);
    ctx.fill();
  }
  requestAnimationFrame(draw); // постоянная перерисовка
}
draw();

Пример на SVG

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="tomato"
          onclick="alert('clicked')" />
</svg>

В SVG обработчик клика вешается прямо на элемент, а в Canvas пришлось бы вручную проверять координаты клика относительно каждой фигуры. Зато при 5000 анимированных кругах SVG начнёт тормозить, а Canvas справится легко.

Когда что выбирать

• Canvas: игры, симуляции, обработка изображений, графики с десятками тысяч точек, WebGL-сцены.
• SVG: иконки, логотипы, интерактивные диаграммы, карты с кликабельными регионами, анимации через CSS.

Итог: выбирайте Canvas, когда важна производительность при большом числе объектов и вы готовы управлять отрисовкой вручную; SVG — когда нужна декларативность, доступность и простое взаимодействие с отдельными элементами.