HTML5 Canvas против SVG

Canvas и SVG позволяют создавать графику в браузере, но они принципиально разные.

SVG

SVG - это язык, который использует XML для описания 2D-графики.

SVG основан на XML, что означает, что каждый элемент в SVG DOM доступен. Вы можете добавить обработчик событий JavaScript к элементу.

В SVG, каждый нарисованный графический объект рассматривается как объект. Если свойства SVG-объекта изменяются, браузер может автоматически重现 графику.

Canvas

Canvas рисует 2D-графику с помощью JavaScript.

Canvas рендерится по пикселям.

В canvas, после того как графика была нарисована, она больше не получает внимания браузера. Если его положение изменяется, то вся сцена также должна быть заново нарисована, включая любые объекты, которые, возможно, были скрыты графикой.

Сравнение Canvas и SVG

В таблице ниже перечислены некоторые различия между canvas и SVG.

Canvas

  • Зависит от разрешения
  • Не поддерживает обработчики событий
  • Слабая возможность рендеринга текста
  • Может сохранять результаты изображений в формате .png или .jpg
  • Наиболее подходящ для игр с высокой плотностью изображений, где многие объекты часто перерисовываются

SVG

  • Не зависит от разрешения
  • Поддержка обработчиков событий
  • Наиболее подходящ для приложений с большими областями рендеринга (например, Google Maps)
  • Высокая сложность может замедлить скорость рендеринга (любое чрезмерное использование DOM медленно)
  • Не подходит для приложений для игр