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 не быстро)
  • Не подходит для приложений, предназначенных для игр