Пирог, бар, линия: SVG/VML лучше, чем холст

Мне нужно выбрать библиотеку для "стандартного" графика: пироги, строки и столбцы.

Из того, что я прочитал, мне кажется, что лучшим форматом является SVG/VML, например, Highcharts. SVG становится стандартным для всех основных браузеров, теперь IE 9 принимает его. Кажется, проще перемасштабировать и экспортировать, чем холст.

Тем не менее, я вижу, что несколько графических библиотек полагаются на Canvas. Я что-то упускаю? Есть ли причина рассматривать Canvas над SVG для таких приложений?

Ответ 1

Обычно вы можете добиться одинаковых результатов. Оба заканчивают рисование пикселей на экране для пользователя. Основные отличия в том, что HTML5 Canvas дает вам контроль над результатами на уровне пикселей (как чтение, так и запись), в то время как SVG - графический API с сохраненным режимом, который позволяет очень легко обрабатывать события или манипулировать ими с помощью JavaScript или SMIL Animation и все исправления заботятся о вас.

В общем, я бы предложил использовать Canvas HTML5, если вы:

требуется контроль над эффектами на уровне пикселей (например, размытие или blending)
имеют очень большое количество точек данных, которые будут представлены один раз (и, возможно, подкрашены), но в противном случае статичны

Используйте SVG, если вы:

хотите, чтобы сложные объекты, нарисованные на экране, были связаны с событиями (например, перемещение по точке данных, чтобы увидеть всплывающую подсказку)
хотите, чтобы результат хорошо печатался при высоком разрешении
необходимо анимировать формы различных частей графика независимо.
будет включать текст в ваш вывод, который вы хотите проиндексировать поисковыми системами.
хотите использовать XML и/или XSLT для создания вывода

Ответ 2

Холст не нужен, если вы не хотите тяжелой манипуляции/анимации или собираетесь иметь более 10 000 диаграмм. Подробнее об анализе производительности здесь.

Также важно сделать различие: диаграммы и диаграммы - это две разные вещи. Отображение нескольких гистограмм сильно отличается от (например) составления блок-схем диаграмм с 10 000 + подвижными, связанными с линками потенциально-анимированными объектами.

Каждый элемент SVG является элементом DOM, а добавление 10 000 или 100 000 узлов в DOM вызывает невероятное замедление. Но добавив, что многие элементы Canvas полностью выполнимы и могут быть довольно быстрыми.

В случае, если это может вас смутить: RaphaelJS (по-моему, лучшая графическая библиотека SVG) использует слово canvas, но это никак не связано с элементом HTML <canvas>.

Ответ 3

В последние два года я предпочитал использовать svg, поскольку в основном я занимаюсь относительно небольшими наборами данных для создания пирогов, диаграмм столбцов или карт.

Однако одно преимущество, которое я нашел с холстом, - это возможность сохранить диаграмму в качестве изображения благодаря методу toDataURL. Я не нашел эквивалент для svg, и кажется, что лучший способ сохранить клиентскую сторону svg-графика - сначала преобразовать его в холст (используя, например, canvg).