Что лучше canvas или svg?

Question

[Александр Дегтярев]

Что лучше для отображения на странице изменяющихся графиков, всяких датчиков заполнения и прочего ипочему?

Answer 1

[Aleksandr]

Плюсы Canvas:

• Высокая производительность при отрисовке любых 2D объектов.
  
• Стабильная производительность — всё есть пиксель. Производительность падает только при увеличении разрешения изображения.
  
• Лучше всего подходит для создания растровой графики (например, в играх, фракталов и т.п.), редактирования изображений и операций, требующих манипулирования на уровне пикселей.
  

Плюсы SVG:

• Нет зависимости от разрешения — SVG лучше подходит для кроссплатформенных пользовательских интерфейсов, так как позволяет масштабировать изображение при различных разрешениях экрана.
  
• SVG очень хорошо поддерживает анимацию. Элементы могут быть анимированы с использованием описательного синтаксиса или с помощью JavaScript.
  
• Можно получить полный контроль над каждым элементом, используя SVG DOM API в JavaScript.
  
• SVG хранится в формате XML, что предоставляет больше возможностей браузерам по обеспечению доступности SVG документов по сравнению с элементом canvas. Таким образом, SVG выглядит лучшим решением для пользовательских интерфейсов веб-приложений.
  

Минусы Canvas

• Отрисовка основана на пикселях.
  
• Не существует API для анимации. Вам придется прибегать к использованию таймеров и других событий для обновления канвы.
  
• Слабые возможности по рендерингу текста.
  
• Возможно, не самый лучший выбор, когда доступность имеет решающее значение. Канва предоставляет вам поверхность для рисования в выбранном контексте (2D и 3D). Можно указать альтернативный контент внутри элемента canvas, который будет показан браузером при невозможности отображения графики. Кроме того, вы можете выполнить проверку доступности выбранного Canvas API с помощью JavaScript. На основе этого вы можете обеспечить различную функциональность для пользователей браузеров с разной поддержкой HTML 5 Canvas.
  
• HTML 5 Canvas не подходит для создания веб-сайтов или интерфейсов веб-приложений, так как пользовательские интерфейсы обычно должны быть динамическими и интерактивными, а Canvas требует от вас постоянной перерисовки каждого элемента в интерфейсе.
  

Минусы svg

• Низкая скорость рендеринга при увеличении сложности документа (рисунка), так как используется модель DOM
  
• Скорее всего, SVG не подходит для таких приложений как игры. Возможно лучшим выбором будет комбинация HTML Canvas + SVG.
  

Вывод
HTML 5 Canvas следует использовать для:

1. Редактирования изображений: обрезки, изменения размеров, фильтров (удаления эффекта красных глаз, создания эффекта сепии, изменения цветности или яркости)
   
2. Создания растровой графики: визуализации данных, создания фракталов и графиков функций.
   
3. Анализа изображений: создания гистограмм и т.п.
   
4. Создания игровой графики, такой как спрайты и фоны.
   

SVG следует использовать для:

1. Создания пользовательских интерфейсов веб-приложений, независимых от разрешения экрана.
   
2. Высокоинтерактивных анимированных пользовательских интерфейсов.
   
3. Графиков и диаграмм.
   
4. Редактирования векторных изображений.
   

честно скопипастил

Answer 2

[uvelichitel]

Лучше для отображения на странице изменяющихся графиков, всяких датчиков конкретная библиотека d3js. Она svg и для графиков и датчиков ей просто нет равных.

Answer 3

[khipster]

canvas, svg же не для рисования же

Comments

[Aleksandr]

khipster А для чего тогда?

[khipster]

Александр Котов: как правило для готовых изображений

[Александр Дегтярев]

Александр Котов: дак в итоге, что же лучше?

[Сергей delphinpro]

khipster: а либы для построения графиков и диаграмм? :) это же не готовые изображения.

[Сергей delphinpro]

Александр Дегтярев: В итоге - для каждой конкретной задачи лучшим будет тот инструмент, который позволит решить ее быстрее и эффективнее.

[khipster]

Сергей: Ну да, можно подключать библиотеки...