Высокая производительность при отрисовке любых 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 следует использовать для:
Редактирования изображений: обрезки, изменения размеров, фильтров (удаления эффекта красных глаз, создания эффекта сепии, изменения цветности или яркости)
Создания растровой графики: визуализации данных, создания фракталов и графиков функций.
Анализа изображений: создания гистограмм и т.п.
Создания игровой графики, такой как спрайты и фоны.
SVG следует использовать для:
Создания пользовательских интерфейсов веб-приложений, независимых от разрешения экрана.
Лучше для отображения на странице изменяющихся графиков, всяких датчиков конкретная библиотека d3js. Она svg и для графиков и датчиков ей просто нет равных.
Простой
Простой
