Здесь собираются типичные советы по SVG.
🔴 - Анимация должна идентично отображаться в последних версиях браузеров (критерий Б5).
☝️ - При работе с SVG очень важно обращать внимание на кроссбраузерность. Даже современные браузеры имеют разные взгляды на то, как это все должно работать. Особенное внимание стоит уделить Firefox - в нем вы быстро найдете все основные проблемы, которые есть в вашем коде.
☝️ - Свойство transform-origin в CSS не соответствует логическому "transform origin" в SVG. Разные браузеры могут вести себя по-разному при работе с этим свойством. Там долгая история, советую почитать годную статью по теме. В наше время к этой неустаревающей информации добавилось еще свойство transform-box. Оно все еще не особо стабильное, есть нюансы, но можно предположить, что в перспективе именно оно закроет большую часть вопросов, связанным с несоответствиями центров трансформаций.
☝️ - Обратите внимание, что значения больше 1 в keySplines не поддерживаются в некоторых современных браузерах (даже в вечнозеленых).
☝️ - В SMIL есть не баг, но фича, из-за которой стоит очень аккуратно использовать знак - в id. Он в контексте атрибута begin может трактоваться не совсем интуитивно понятным образом.
☝️ - Обычно запуск SVG-анимаций на странице, как и любых других в общем-то анимаций, привязывается к каким-то логическим событиям. Это могут быть или действия пользователя, или загрузка ресурсов, или еще что-то. Так или иначе нам нужно заранее иметь SVG в загруженном виде (помним про плохой интернет) и запускать анимацию тогда, когда нам нужно, а не как получится. Предзагрузка картинок и принудительный запуск SMIL-анимаций из скриптов решают не только проблемы с синхронизацией происходящего на странице, но и проблему кеширования (SMIL-анимация может кешироваться и не перезапускаться в полном объеме при обычной перезагрузке страницы при определенных обстоятельствах). Загуглите эту тему. Как запустить SMIL анимации призов из JS при логическом событии - переходе на экран призов?
☝️ - Может быть хорошей идеей иметь в сцене одну анимацию, точку отсчета, а во всех остальных атрибут begin задавать в зависимости от нее. Или друг от друга. Чтобы было своего рода дерево зависимостей по времени начала анимаций. Запускается первая анимация, в зависимости от нее запускаются другие, в зависимости о них другие и.т.д. Одна точка входа в сцену и логические связи между отдельными движениями очень помогают в вопросах синхронизации всего по времени и перезапуска анимаций в целом. Это не только упрощает работу, но и может экономить кучу времени при необходимости адаптировать сцену к изменившимся требованиям.
☝️ - Обратите внимание на то, как ломаются контуры при морфинге (это очевидно на примере горы - она не просто складывается, там появляются дополнительные плато, которых быть не должно):
☝️ - Автоматические инструменты для адаптации контуров обычно расставляют точки на простых участках кривых более-менее равномерно, но в нашем случае это ломает логику анимации. Точки на прямой, в которую гора должна превратиться, должны быть строго под изначальными вершинами, а не где-то сбоку от них. В таких ситуациях может быть хорошей идеей подвигать точки своими руками в векторном графическом редакторе, а не полагаться на автоматику. На вкус и цвет они все одинаковые, я обычно использую Inkscape. Выглядеть передвижение точек на примере горы будет примерно так (в разных редакторах расположение кнопок может отличаться, но суть везде одна и та же):
☝️ - И если так получилось, что вы совсем не работали с векторными графическими редакторами, то это тот самый момент, когда стоит попробовать. Группировка объектов, подготовка контуров для морфинга, очистка SVG от мусора и.т.д. - многие вещи натыкать мышкой там куда проще, чем что-то изобретать в коде в своей IDE.
💡 - Часть учебника про SVG построена вокруг технологии SMIL. Но это - не единственный способ анимирования SVG. И определенно не самый удобный. Технология SMIL развивалась вне браузеров и в нашем контексте инструменты разработчика так и не научились нормально с ней взаимодействовать. Пока все идет по плану - технология выглядит неплохо, но как только что-то идет не так - выясняется, что искать и исправлять проблемы долго и неприятно. Но когда картинка встроена в страницу - появляется возможность применить к ней как CSS анимации, так и наши скрипты. В целях развития кругозора будет полезно загуглить эту тему и подумать над тем, в каких ситуациях применение SMIL будет оправдано, а в каких лучше предпочесть более привычные инструменты из мира фронтенда.
💡 - И также полезно будет узнать о таком дополнительном инструменте, как Lottie, если вы еще о нем не знаете. Уже много лет это самый популярный вариант для работы с заранее заготовленными анимациями из After Effects в нашем контексте (плюс у них еще своя экосистема есть, со своим собственным редактором анимаций). Этот инструмент помогает автоматизировать перенос 2d-анимаций из мира дизайнеров в веб (в первую очередь изолированных анимированных сцен, вроде того, что вы делаете в учебном проекте), что существенно экономит время и бюджет на разработку. Еще в последнее время люди стали чаще говорить про Rive. Этот инструмент приходит к нам из мира игр, в среде веб-дизайнеров пока не так много людей с ним познакомились, но он во многом пересекается по функционалу с Lottie, дает больше возможностей по части интерактивных штуковин, и при этом работает заметно быстрее. Имеет смысл послеживать за его развитием. Так или иначе здесь мы снова затрагиваем тему видео-концептов. Если у нас уже есть видео с анимацией - значит она уже сделана. Не нужно делать работу второй раз. В учебных задачах вам предлагается познакомиться со внутренностями SMIL, и эти анимированные сценки - искусственный повод для этого. Но для бизнеса очень сложно аргументировать саму идею повторять уже сделанную работу второй раз. Имейте это в виду.
💡 - В целом, если вы нацелены на активное использование SVG в работе, то я бы посоветовал в процессе прохождения курса почитать еще и мое введение в SVG анимации. Там почти без кода, больше про разные инструменты и подходы к работе. Эта статья дополняет учебник, получается что-то вроде взгляда с другой стороны на практическое применение SVG в контексте фронтенда и анимаций. Там есть ответы и на многие часто возникающие у студентов вопросы. Наши возможности по взаимодействию с SVG со стороны CSS немного расширились за последние пару лет, но в целом описанные там подходы к работе никогда не менялись принципиально, так что эта статья может дать вам определенный неустаревающий набор знаний, который поможет ориентироваться в происходящем и выбирать инструменты, подходящие под задачи.
💡 - Формат SVG в контексте фронтенда используется не только ради иконок или анимированных сценок. Он также часто всплывает в контексте представления каких-то данных. Разного рода графики и диаграммы, интерактивные карты, планы помещений и.т.д. - в подобных задачах чистого HTML+CSS уже мало, а канвас часто кажется слишком низкоуровневым решением относительно задачи. Мы склоняемся к SVG. Вероятно вы слышали о библиотеке d3.js - она в какой-то момент стала популярной именно на почве того, что было сделано много примеров этих самых интерактивных визуализаций с ее использованием. Стоит добавить ее в закладки, если вы еще этого не сделали, и на досуге посмотреть, что там есть.
💡 - Но готовые решения не всегда подойдут под задачи. Нужно будет действовать самостоятельно. В работе могут пригодиться основы вычислительной геометрии, в основном ради алгоритмов - подходов к решению задач. Чем больше мы будем углубляться в сторону WebGL и каких-то более сложных визуализаций, тем сильнее будет нужен кругозор в области компьютерной графики в целом. Многие вещи уже придуманы десятки лет назад и наша задача в том, чтобы их аккуратно перенести в мир фронтенда. Ну и в целом базовые знания очень помогают декомпозировать задачи на более простые и изучать новые инструменты. Мы в библиотеках начинаем видеть систему, каша из каких-то функций и параметров видится как частные решения известных задач. Многие вещи, которые выглядят сложно со стороны фронтенда, начинают выглядеть куда проще со стороны математиков. В некоторых проверках у вас будут встречаться ключевые слова, чтобы погуглить - они помогут начать движение в нужную сторону. Вся информация есть в открытом доступе, википедию никто не отменял, книг по этим темам написано много, но это занятие не на один день. Вы можете рассматривать его как одно из направлений дальнейшего развития после завершения курса.
💡 - Думаю не стоит говорить, что полезно развивать в себе насмотренность, почаще смотреть и анализировать творения других разработчиков. Не только с визуальной точки зрения, но и с технической. Много интересных примеров сайтов можно найти в каталогах Awwwards, CSS Design Awards и FWA. Если вы еще не пытались анализировать происходящее на подобных сайтах - сейчас самое время попробовать. Многие сложные на первый взгляд вещи там строятся на базе простых по сути CSS и SVG-анимаций, которые вы уже умеете делать.
💡 - Рисование линий с помощью stroke-dasharray/stoke-dashoffset не обязательно ограничивать заранее заготовленными анимациями. Часто можно завязать их на действия пользователя, например на скролл, как в этом примере. Идея сама по себе простая, но применяется очень часто в самых разных сочетаниях с дополнительными CSS-анимациями. Стоит взять на заметку.
💡 - Для общего развития, в том числе по теме SVG, но больше по математике - будет полезно загуглить про алгоритмы, связанные с разбиением плоскости. Там много всякого красивого. Нас особенно интересуют триангуляция Делоне и мозаика Вороного. Эти алгоритмы часто проявляются в креативной фронтенд-разработке в самых разных местах, и если вы движетесь в эту сторону - то знать про них определенно стоит. На собеседованиях люди очень любят спрашивать про такие вещи. Как простой пример того, что из них можно сделать в рамках SVG - плейсхолдеры.