Неочевидные возможности SVG в современном фронтенде – Константин Остров /

«Неочевидные возможности SVG в современном фронтенде» — Константин Остров (руководитель отдела фронтенд-разработки в студии «Феникс»)

Доклад с митапа DevTalks. Современный фронтенд: roadmap развития разработчика, актуальные инструменты и неочевидные возможности (18 февраля 2023)

Часто разработчики воспринимают SVG как черный ящик, который просто рисует четкую графику на всех разрешениях. Но SVG — это гораздо более интерактивный инструмент.

Последние несколько лет Константин возглавляет отдел фронтэнда, который плотно работает с интерактивом в SVG. За это время его команда наступила на кучу граблей и неочевидных сложностей, связанных с этим. В докладе Константин поделился историей о том, как они преодолевали эти сложности и на какие грабли не стоит наступать вам.

В своем докладе Константин рассказал:
о позиционировании объектов внутри SVG и о том, как им овладеть;
о внедрении динамических элементов внутрь SVG;
о расчете координат объектов вне box модели;
о возможности влиять на содержимое SVG средствами CSS и JS, ограничениях и способах решения;
о производительности SVG в вебе и о том, как ее можно улучшить.

Ссылка на презентацию из доклада: https://drive.google.com/drive/u/0/fo...

Cайт митапа — https://digital-spectr.ru/event/devta...
Официальный канал митапа — https://t.me/+X4DZg7ma1DdlM2I6

Нанять команду Spectr — https://digital-spectr.ru/new-client

Организаторы и партнеры митапа: Spectr, Тэглайн, Технопарк Morion Digital.

#devtalks #devtalks_russia #digital #tagline #тэглайн #spectr #digitalspectr #мероприятие
#frontend #react #vitejs #performance #development #meetup #dev

00:00 Начало, представление спикера
00:49 Применение SVG на проекте с многоквартирными домами
02:44 Что такое SVG и в чем его преимущества
03:52 Задача: позиционирование внутри SVG
05:44 Задача: внедрение динамических элементов внутрь SVG
07:23 Задача: расчет координат вне BOX модели
08:23 Влияем на SVG с помощью JS и CSS
11:47 Производительность и что на нее влияет
14:12 Подведем итоги
15:11 Вопросы из зала