
Canvas или SVG для карты офиса: как мы выбрали и справились с неочевидными граблями
true_engineer только что Canvas или SVG для карты офиса: как мы выбрали и справились с неочевидными граблями 4 мин 1 JavaScript * Веб-разработка * Если к вам придут с задачей внедрения интерактивной карты офиса, какой...
Anthropic — What company has the best second artificial intelligence model at the end of June?
Значимый прорыв формирует отрасль ИИ: true_engineer только что Canvas или SVG для карты офиса: как мы выбрали и справились с неочевидными граблями 4 мин 1 JavaScript * Веб-разработка * Если к вам придут с задачей внедрения интерактивной карты офиса, какой рендер вы выберете? Верхнеуровневый обзор скажет, что Canvas хорош для частых перерисовок (географические карты, игры), а SVG — когда важна работа с отдельными элементами, которые естественным образом присутствуют в DOM. В этой статье не будет глубокого анализа, это живая история о том, почему мы отказались от идеи использовать Canvas, как строили карту с нуля, какие инструменты использовали, как организовали связь между SVG-элементами и данными в БД, и как сделали админку, где карту могут менять дизайнеры без участия разработчиков.
Как мы выбирали между Canvas и SVGИтак, к нам пришли с задачей: заменить существующий модуль интерактивных карт офисов. Предыдущая система была сделана на Canvas, а координаты пинов рабочих мест хранились на бэкенде. Это создавало проблему: любое изменение изображения карты офиса влекло риск несоответствия координат пина и самого рабочего места.
Технические детали
Это был первый звоночек в пользу SVG — отрисовку пина можно привязать к конкретному объекту на карте, а не к абстрактным координатам. Кроме того, информация на экране была перегружена. Ее имело смысл скрыть за всплывающими окнами, которые появлялись после выбора объекта пользователем.
В SVG это сделать проще — каждый элемент доступен в DOM, и клик по нему обрабатывается нативно. Более того, сами карты офиса предполагалось менять без участия разработчиков — силами дизайнеров и, в идеале, ответственными за офисную инфраструктуру. В крайнем случае — после короткого обучения персонала.
Этот пункт оказался критическим. Он отсеивает практически все популярные библиотеки для построения интерактивных карт, оставляя только вариант с использованием файлов SVG, нарисованных дизайнерами в привычных инструментах (Figma, Illustrator и т. Что должно быть интерактивнымПо требованиям, взаимодействию с пользователем подлежат не все элементы, а только три типа:Рабочие местаПереговорные комнатыОборудование У каждого типа — своя информация, которая отображается при клике.
Отраслевые последствия
В результате хотелось бы видеть что-то такое:Но некоторая зависимость в отображении от BE все же присутствует, поговорим на примере оборудования. Placeholder-элементы: как мы подставляли иконки в зависимости от данных бэкаВ отображении оборудования есть зависимость от бэкенда — иконка должна меняться в зависимости от типа оборудования (принтер, массажное кресло, сканер и т. Для этого мы использовали placeholder-элементы.
В исходном SVG-файле оставляем элементы-заглушки, на место которых после загрузки карты подставляется нужная SVG-иконка в зависимости от ответа бэкенда. Одна маленькая SVG на каждый тип оборудования.
Событие, по словам экспертов, усилит конкуренцию в сфере ИИ.





