«Неочевидные возможности SVG в современном фронтенде» — Константин Остров (руководитель отдела фронтенд-разработки в студии «Феникс») Доклад с митапа DevTalks. Современный фронтенд: roadmap развития разработчика, актуальные инструменты и неочевидные возможности (18 февраля 2023) Часто разработчики воспринимают SVG как черный ящик, который просто рисует четкую графику на всех разрешениях. Но SVG — это гораздо более интерактивный инструмент. Последние несколько лет Константин возглавляет отдел фронтэнда, который плотно работает с интерактивом в SVG. За это время его команда наступила на кучу граблей и неочевидных сложностей, связанных с этим. В докладе Константин поделился историей о том, как они преодолевали эти сложности и на какие грабли не стоит наступать вам. В своем докладе Константин рассказал: - о позиционировании объектов внутри SVG и о том, как им овладеть; - о внедрении динамических элементов внутрь SVG; - о расчете координат объектов вне box модели; - о возможности влиять на содержимое SVG средствами CSS и JS, ограничениях и способах решения; - о производительности SVG в вебе и о том, как ее можно улучшить. Ссылка на презентацию из доклада: https://drive.google.com/drive/u/0/folders/1jRDqIqF4y08BZMPx0ML310i8vdgLkXzS Cайт митапа — https://digital-spectr.ru/event/devtalks-frontend-meetup Официальный канал митапа — 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 Вопросы из зала