SVG или canvas?

[kahi4]

А почему canvas не подходит для векторной графики? Да, придется от чуть меньше до чуть больше написать ручками, фактически придется найти движок, но на канвасе можно рисовать как угодно, в том числе и векторной графикой. http://processingjs.org/ или http://paperjs.org/ например. Как преимущество — можно смешивать векторную и растровую графику одновременно.

Доступ из JavaScript

Это почему вдруг к svg нет доступа из JS?

[SerafimArts]

Скорее всего имелся ввиду результат. У канваса он всегда растрируется при рендере, что можно запросто увидеть включив зум/масштабирование.

[kahi4]

SVG тоже всегда растрируется (растеризуется?) при рендере. Просто браузер берет на себя обработку зума.

Канвас гораздо более низкоуровневый. Собственно, от сюда и все различия. Нужно сделать что-то быстро и на коленках — svg хорош (но не идеален), но если хочется гибкости и возможности рисовать что вздумается либо быть хоть немного уверенным, что это будет работать быстро (svg с css анимациями может быть очень тормозным, если рисовать чуть больше, чем 5 линий) — брать канвас. Но да, придется ручками делать то, что с свг уже дано.

[Keyten]

К слову, зум вполне можно ловить, а более высокое dpi на канвасе можно нарисовать, если задать канвасу width = originalWidth * dpi, height = originalHeight * dpi, а в стилях width = originalWidth, height = originalHeight.

[DmitryOlkhovoi]

Для себя смотрю по таким критериям
— Если элементов очень много, то лучше canvas. Тысячи HTML SVG элементов в DOM это жуткие лаги.
— Если слишком богатая анимация, то canvas
— Если элементов не много, то лучше svg. Так как это html элементы, можно накладывать стили, обрабатывать клики и так далее. С canvas же надо повозиться

[kovserg]

А почему ни слова про «canvas+hdpi=секас»?

[mSnus]

Делал как раз только что карту метро, чтобы можно было на ней в бэкэнде расставить точки ("на каких станциях магазины"), а во фронтэнде на них по клику и подгружать окно со схемой проезда и прочие подробности. Карта должна масштабироваться под размер окна и зумиться по клику.

Сделал всё в Adobe Animate на canvas, промучился там, но сделал.

Получил на выходе 190К библиотек CreateJS + 18К сами файлы + 214К графика, итого 422К! И всё это дико тормозит на загрузке. И CreateJS выдаёт всякие дебильные ошибки вроде "Uncaught An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images." Отдельные точки в DOM не видно.

Плюнул на всё потраченное время, переделал на чистом JS в GWD. 158К графика + 13К все файлы = 171К, втрое меньше. Работает мгновенно, отлаживать удобно. Каждая точка — нормальный HTML-объект и так далее.

В общем, чтоб я ещё раз полез в этот глючный Animate и работу с canvas… только если работа с тяжелой графикой типа игры, где время загрузки неважно и где это не компонент сайта, которому нужно взаимодействовать с другими. А жаль, лет 10 назад я бы с удовольствием писал всё это на Flash и об альтернативах и не думал!

[Zoolander]

да, где нужен просто вывод графических элементов без сложной анимации и реалтайма — SVG/HTML себя оправдывает. Пишем так мини-игры — получаются очень компактные бандлы под любое разрешение с хорошо понятным для многих неигровых разработчиков кодом.

Canvas/WebGL — это для классических игровых проектов

[domix32]

Интересно какая у них разница в потреблении памяти

[mSnus]

у меня жрёт памяти примерно одинаково, но при работе с Canvas используется CreateJS, который почему-то очень активно использует процессор — даже когда ничего не происходит, подъедает его скачками от 5 до 20 (!) процентов. Это на десктопе-то..

[domix32]

А на чем сравнивали? Я знаю что soundcloud для рендеринга звуковой волны в треках использует кучу canvas элементов и это заметно отъедает памяти если поскролить элементов на 200 вниз. SVG версии чего-то подобного не встречал, поэтому сравнить не могу.