Canvas или SVG для карты офиса: как мы выбрали и справились с неочевидными граблями

29.06.2026 10:30:27 | Хабр

Хабы: JavaScript, Веб-разработка

Если к вам придут с задачей внедрения интерактивной карты офиса, какой рендер вы выберете? Canvas или SVG? Верхнеуровневый обзор скажет, что Canvas хорош для частых перерисовок (географические карты, игры), а SVG — когда важна работа с отдельными элементами, которые естественным образом присутствуют в DOM.

Мы выбрали SVG. В этой статье не будет глубокого анализа, это живая история о том, почему мы отказались от идеи использовать Canvas, как строили карту с нуля, какие инструменты использовали, как организовали связь между SVG-элементами и данными в БД, и как сделали админку, где карту могут менять дизайнеры без участия разработчиков.

Подробнее

Читайте также

[Перевод] Iron Core. Часть 2: Шесть символов
29.06.2026 10:21:01 | Хабр

Приложение Happ снова появилось в российском App Store
29.06.2026 10:20:08 | vc.ru

Как принудительно привязать ИИ к фактам и убить галлюцинации
29.06.2026 10:14:24 | Хабр

Управление процессом по Шееру и процесс управления – новый подход
29.06.2026 10:12:47 | Хабр

Топ-10 вопросов с Android-собеседований в 2026 — с разборами
29.06.2026 10:07:31 | Хабр

ЦБ РФ разрабатывает правила для стейблкоинов в России
29.06.2026 10:05:00 | it-world

Сквозные идентификаторы в логировании
29.06.2026 10:04:00 | Хабр

Как мы в Solar webProxy дорабатывали нашу замену для Grafanа
29.06.2026 10:00:22 | Хабр

Как мы делали VPN под Китай
29.06.2026 09:41:17 | Хабр

Аэропорт «Внуково» перевел багажную систему на российское ПО
29.06.2026 09:41:14 | it-world

Qwant: как Франция попыталась создать альтернативу Google
29.06.2026 09:39:14 | Хабр

Трибоэлектрический наногенератор: явление электризации для питания роботов
29.06.2026 09:32:07 | Хабр

Мат помогает готовиться к IT‑собесам. Да, у этого есть научная база
29.06.2026 09:30:12 | Хабр

Почему миллиардеры не инвестируют в ИИ и больше доверяют человеку?
29.06.2026 09:25:22 | Хабр

Современный MQTT-сервис на Python
29.06.2026 09:00:03 | Хабр

Как подключить таск-трекер к кодовой базе через RAG и не сойти с ума от стоимости токенов
29.06.2026 08:57:02 | Хабр

Hajiz: rootless Linux‑sandbox на Rust — namespaces, Landlock, seccomp‑BPF и eBPF‑аудит без sudo
29.06.2026 08:55:58 | Хабр

Каскад когерентности: почему реклама работает
29.06.2026 08:52:43 | Хабр

Gemini в России — ТОП-1 нейросеть?! Обзор, готовые промпты, сравнения
29.06.2026 08:40:22 | Хабр

Как построить свою оргмодель, свое хобби-приложение и не потерять месяц жизни
29.06.2026 08:37:53 | Хабр

Сдерживаем полет фантазии LLM в киносервисе
29.06.2026 08:21:45 | Хабр

День 1587: перевозчики начали предупреждать о росте цен из-за перебоев с поставками топлива
29.06.2026 08:18:42 | vc.ru

Обзор необычного и очень мощного мини-ПК Khadas Mind 2
29.06.2026 08:09:42 | Хабр

Мой опыт запуска продукта на Product Hunt
29.06.2026 08:08:40 | Хабр

От дней к часам: как BIM-технология ускорила проектирование наружных сетей связи
29.06.2026 08:06:02 | Хабр

Конец бесплатного PrimeNG, PrimeReact и PrimeVue? Разбираемся, что задумала PrimeTek
29.06.2026 08:00:39 | Хабр

Как учебные примеры Factory Method ломают SOLID
29.06.2026 08:00:37 | Хабр

Как мы работаем со студентами: дипломы, которые становятся частью YDB
29.06.2026 07:59:55 | Хабр

Бизнес не умеет управлять экспертизой сотрудников – как это исправить
29.06.2026 07:52:11 | Хабр

ASOC from scrap. Как реализовать автоматизацию DevSecOps контролей за несколько вечеров, используя OpenSource и LLM
29.06.2026 07:45:31 | Хабр

Как мой Telegram-парсер ослеп на проде: чиним пропуск лидов через Active Pull (Python, n8n, LLM)
29.06.2026 07:41:27 | Хабр

Визуальный стек статейного сайта: типографика, цвет и комьюнити-слой
29.06.2026 07:36:43 | Хабр

Дайджест JS/TS: новинки ES2026, гонка рантаймов и EAP
29.06.2026 07:30:22 | Хабр

[Перевод] Мультиагентные системы как распределенное программное обеспечение
29.06.2026 07:28:09 | Хабр

PostmarketOS 26.06: что нового в Linux-дистрибутиве для смартфонов
29.06.2026 07:26:41 | Хабр

Смотреть все

НОВОСТИ

ПВО отразила атаку двух украинских БПЛА на Москву
01.07.2026 23:46:00 | Life.ru

Забравшимся на Эмпайр-стейт-билдинг руферам может грозить до года тюрьмы
01.07.2026 23:45:31 | ТАСС

Отыграла семь матчболов, но не спаслась. Мирра Андреева покинула Уимблдон
01.07.2026 23:43:43 | ТАСС

Несколько серий громких взрывов раздались в столице Украины
01.07.2026 23:43:08 | Life.ru

В четырех муниципалитетах Липецкой области объявили опасность атаки БПЛА
01.07.2026 23:39:55 | ТАСС

Россия пригрозила ответом на развертывание систем РСМД в Японии
01.07.2026 23:36:46 | Lenta.ru

Версия Шария подтвердилась: Во Франции назвали имя лишившейся ног спутницы Ермолаева
01.07.2026 23:35:36 | Life.ru

Версия Шария подтвердилась: Французская газета назвала имя спутницы Ермолаева
01.07.2026 23:35:36 | Life.ru

"Сан-Хосе" обменял хоккеиста Мухамадуллина в "Эдмонтон"
01.07.2026 23:35:06 | ТАСС

В центре Киева начался пожар
01.07.2026 23:34:23 | Lenta.ru

Трамп заявил, что США не допустят перехода Панамского канала под контроль Китая
01.07.2026 23:33:42 | ТАСС

Число погибших после землетрясений в Венесуэле достигло 2295 человек
01.07.2026 23:29:00 | Российская Газета

В Киеве один за одним гремят взрывы
01.07.2026 23:27:00 | Российская Газета

В Брянске 11-летняя девочка утонула в озере Орлик
01.07.2026 23:24:42 | Life.ru

В Киеве после взрывов возник пожар
01.07.2026 23:24:37 | ТАСС

Средства ПВО сбили четыре БПЛА, летевших на Москву
01.07.2026 23:23:48 | ТАСС

Средства ПВО сбили два БПЛА, летевших на Москву
01.07.2026 23:23:48 | ТАСС

В Москве подвели метеоитоги июня
01.07.2026 23:22:40 | Lenta.ru

Минэнерго предупредило об опасности сервисов для поиска топлива
01.07.2026 23:22:28 | Lenta.ru

NYT: США отказали оппозиционерке Мачадо в возвращении в Венесуэлу
01.07.2026 23:20:50 | ТАСС

В Липецкой области объявлена воздушная опасность
01.07.2026 23:18:00 | ТАСС

Украине предрекли разрушение при расширении западных военных блоков
01.07.2026 23:15:53 | Lenta.ru

Названо имя пострадавшей при взрыве в Монако женщины
01.07.2026 23:15:14 | Lenta.ru

Российские спортсмены отказались выступать на международном турнире без флага
01.07.2026 23:13:55 | Lenta.ru

Фицо: Запад практически находится в состоянии войны с Россией
01.07.2026 23:11:27 | ТАСС

Появилось видео с руферами из России на шпиле Эмпайр-стейт-билдинг
01.07.2026 23:11:00 | Российская Газета

В Финляндии указали на отношение Европы к красным линиям России
01.07.2026 23:10:00 | Lenta.ru

РФ и Мадагаскар обсудили подготовку к саммиту Россия - Африка
01.07.2026 23:08:43 | ТАСС

Поток лавы с высоты 3000 метров: На Сицилии проснулся самый высокий вулкан Европы
01.07.2026 23:07:00 | Life.ru

Эксперт: "Флорида" не продлила контракт с Бобровским из-за потолка зарплат
01.07.2026 23:05:22 | ТАСС

Регулярное авиасообщение с Йошкар-Олой откроется к концу будущего года
01.07.2026 23:04:29 | ТАСС

Экс-полковник США высказался о шансах Украины и Запада переломить ход СВО
01.07.2026 23:02:00 | Lenta.ru

Число жертв землетрясения в Венесуэле выросло до 2295 человек
01.07.2026 23:01:12 | Life.ru

Telegraph: в Лондоне театр герцога Йоркского переименуют в честь Тома Стоппарда
01.07.2026 22:57:25 | ТАСС

В Псковской области вдвое увеличили выплаты семьям после рождения ребенка
01.07.2026 22:57:25 | ТАСС

Все новости

ВСЕ НОВОСТИ

ПИШИТЕ

Техническая поддержка проекта ВсеТут

info@vsetut.pro