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 | Хабр

Смотреть все

НОВОСТИ

Набирающий популярность в РФ кроссовер получит полный привод: новая модификация
20.12.2026 06:40:00 | За рулем

Памфилова: Выборы в Госдуму прошли в условиях беспрецедентных угроз
25.09.2026 11:53:57 | Life.ru

Ушедший из России автогигант объявил по всему миру многомиллионный отзыв машин
25.09.2026 11:53:48 | Lenta.ru

Разбитая дверь и скандалы из-за еды: Сестра Самойловой вспомнила о вспышках гнева Джигана
25.09.2026 11:53:16 | Life.ru

Польша подтвердила поджог обеспечивающего интернетом Украину наземного шлюза Starlink
25.09.2026 11:53:08 | Lenta.ru

ВС РФ продолжают сжимать окружение ВСУ на северо-востоке Харьковской области
25.09.2026 11:53:03 | ТАСС

Более 40% граждан Армении недовольны работой Пашиняна
25.09.2026 11:52:42 | ТАСС

Мать Оксаны Самойловой заявила, что Джиган угрожал убить её дочь и детей
25.09.2026 11:52:34 | Life.ru

Кабмин продлил возможность заключения новых инвестсоглашений на модернизацию НПЗ
25.09.2026 11:52:31 | ТАСС

Меланию Трамп на встрече с Си Цзиньпином описали фразой «похожа на официантку»
25.09.2026 11:52:21 | Lenta.ru

За неделю ВС РФ нанесли семь групповых ударов по объектам на Украине
25.09.2026 11:52:14 | ТАСС

Задержан совершивший нападение на 15-летнюю россиянку студент
25.09.2026 11:52:00 | Lenta.ru

"Дума помолодела". Памфилова назвала средний возраст депутатов нового созыва
25.09.2026 11:51:31 | ТАСС

Российские средства ПВО сбили за неделю 6 011 беспилотников ВСУ
25.09.2026 11:51:30 | ТАСС

Памфилова: ДЭГ на выборах прошло штатно
25.09.2026 11:51:17 | ТАСС

Финские ВВС заявили о первой операции по опознаванию самолетов РФ
25.09.2026 11:51:11 | ТАСС

ВСУ за неделю потеряли более 1,9 тыс. военных в зоне ответственности "Востока"
25.09.2026 11:51:11 | ТАСС

Умер председатель Думы Ставропольского края Николай Великдань
25.09.2026 11:51:03 | Life.ru

Памфилова рассказала, что одним из участников ДЭГ стала 107-летняя пенсионерка
25.09.2026 11:50:55 | ТАСС

«Слышь, общественник»: Тимати послал на три буквы Бородина за упрёки в покупке Bugatti
25.09.2026 11:50:51 | Life.ru

Потери ВСУ в зоне ответственности Южной группировки составили порядка 1 340 военных
25.09.2026 11:50:41 | ТАСС

Памфилова рассказала о героизме председателя УИК, работавшей на костылях
25.09.2026 11:50:33 | ТАСС

Почти 40% граждан Армении считают прошедшие выборы сфальсифицированными
25.09.2026 11:49:54 | ТАСС

В Херсонской области при атаках БПЛА и обстрелах за неделю погибли семь человек
25.09.2026 11:49:51 | ТАСС

«Надо идти в бизнес»: Погребняк предложил Дзюбе повесить бутсы на гвоздь
25.09.2026 11:49:50 | Life.ru

Памфилова раскрыла, сколько человек приняли участие в ДЭГ
25.09.2026 11:49:38 | ТАСС

Избранная в Заксобрание Петербурга от КПРФ Ирина Иванова отказалась от мандата
25.09.2026 11:49:18 | ТАСС

В Подмосковье 26 сентября пройдет заключительная акция "Проверь здоровье в парке"
25.09.2026 11:48:50 | ТАСС

В Луганске тушат пожар после атаки ВСУ на строительный гипермаркет
25.09.2026 11:48:28 | ТАСС

Шеремет заявил о невменяемости Зеленского после слов о полете в Москву на ракете
25.09.2026 11:48:00 | Российская Газета

Стал известен итоговый состав Госдумы
25.09.2026 11:47:53 | Lenta.ru

ВСУ ударили по строительному гипермаркету в Луганске
25.09.2026 11:46:58 | ТАСС

Памфилова отметила "вялое" проведение предвыборных дебатов
25.09.2026 11:46:43 | ТАСС

Россия ударила по местам хранения ракет ВСУ «Фламинго». Атакован порт в Одесской области и сухогруз с товарами для ВСУ
25.09.2026 11:46:42 | Lenta.ru

«Та же участь ждёт Европу»: Медведчук сравнил курс ЕС с украинским сценарием
25.09.2026 11:46:17 | Life.ru

Все новости

ВСЕ НОВОСТИ

ПИШИТЕ

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

info@vsetut.pro