[Из песочницы] Все об SVG анимации07.05.2019 22:47

В данной статье я хочу осветить тонкости работы с SVG-графикой, SVG анимация (в том числе и path), проблемы и способы их решения, а также разнообразные подводные камни, коих в SVG огромное множество. Эту статью я позиционирую как подробное руководство.

Здесь не будет никаких плагинов, библиотек и прочего, речь пойдет только о чистом SVG.
Единственный инструмент, который я буду использовать, это Adobe Illustrator.

Предисловие

Все началось со скучной лекции и в надежде занять себя хоть чем-то, я решил изучить SVG графику, а именно анимацию. К моему удивлению в интернете было совсем мало информации. Везде дублировалась информация, объясняющая основы, а про анимацию вообще от силы 2–3 ссылки с абсолютно идентичной информацией, являющейся переводом статьи A Guide to SVG Animations (SMIL) за авторством Сары Суэйдан.

Ее статья рассказывает об о всем, но поверхностно. Тем не менее настоятельно рекомендую с ней ознакомится. *Ссылка на перевод*

Следующие несколько недель я провел, собирая информацию по кусочкам из разных источников. Результатом этих поисков является эта статья

Правильный экспорт SVG из Illustrator

Этот раздел посвящен особенностям и проблемам Adobe Illustrator, так что, если ты используешь не Illustrator, то можешь пропустить эту часть.

Подготовить документ для анимации очень важный этап, пренебрежительное отношение к которому может обернуться очень неприятными последствиями. Учить тебя как лучше рисовать в Illustrator я не стану. Единственное что я скажу — при отрисовке фигур следует следить за значениями, желательно что бы они имели лишь одно число после запятой, а лучше вообще были целыми. Следовать этому правилу не обязательно, но оно уменьшит размер файла, упростит дальнейшую анимацию и визуально сократит объем информации. Взгляни

В примере одна и та же кривая, но в первом случае одна цифра после запятой, а во втором три. Этак кривая имеет всего 4 точки, а второй пример на треть длиннее первого. Представь, как много места займет кривая из 20 точек.

После того как каркас нарисован нужно сохранить изображение как SVG файл. Для этого есть два пути — «Сохранить как» или «Экспортировать как». Но какой способ выбрать? Если доверяешь мне — лучше используй «сохранить как». Если хочешь знать почему, то разворачивай спойлер.

Так почему же?

На первый взгляд разницы никакой, ведь в итоге мы получим файл.svg с нашим изображением. Однако отличия начинаются еще на этапе параметров экспорта

Детально объяснять все параметры я не вижу смысла, с этим прекрасно справляется сам Illustrator в секции «Описание».

Как видно «сохранить» имеет больше настроек нежели «экспортировать» и для кого-то это уже будет весомой причиной отказаться от экспортирования, но мы продолжим.

Если открыть файлы, сохраненные обоими способами, в браузере, разницы мы не заметим. Однако в данный момент нас больше интересует не внешний вид, а начинка, поэтому сделаем тоже самое, но уже через текстовый редактор. Тут отличия станут более очевидны. Предлагаю тебе самому посмотреть и сделать выводы, я ничего в файлах не изменял просто скопировал целиком как есть.

Экспортировать

Сохранить

Помимо отличий в именовании CSS классов и оформления в целом, которые кто-то может посчитать вкусовщиной, есть и другие проблемы. При «экспортировании» все изображение уменьшилось в 2 раза. Судить об этом можно по размерам фигур и атрибуту viewBox. Так как это векторная графика хуже от этого не стало, но все равно не приятно. «Сохранение» же оставило размеры, которые я указал в Illustrator.

Но все это цветочки по сравнению с тем какую свинью может подложить «экспортирование». Конкретно в данных примерах этой проблемы нет, вероятно потому что изображение очень простое. Однако я столкнулся с ней, когда экспортировал другую мою работу. Вот ее скриншот

Объем файла достаточно большой, так что я приведу только проблемную часть

Заметил что-нибудь необычное? Если ты косо смотришь на атрибут transform, то ты прав. Именно он портит всю малину. При «экспортировании» изображения Illustrator приписывает его ко ВСЕМ элементам . При этом такой проблемы не наблюдается при «сохранении».

Если ты до сих пор не понимаешь моего негодования, то я объясню: если захочешь анимировать перемещение такого элемента, то он будет смещаться в сторону. В данном случае на 5.5 по обеим осям. Связанно это с тем, что анимация перемещения изменяет атрибут transform сбрасывая все прошлые значения. Конечно это можно обойти, но разве не лучше избежать проблемы, чем потом исправлять ее последствия…

На данный момент мне довелось заметить только эту проблему, но это не значит, что она единственная. Если здраво оценить ситуацию окажется, что «сохранить как» выигрывает во всем. Именно поэтому я советую использовать именно его.

Способы импорта SVG документа в HTML

Перед тем как я приступлю непосредственно к анимации, я хочу рассказать про то как встроить SVG на страничку. Каждый способ имеет свои «особенности», которые оказывают прямое влияние на анимацию. И если про них не рассказать, то статья будет не полной.
Предположим, что у тебя уже есть готовый SVG с интерактивной анимацией и осталось встроить этот документ на сайт. Как же это сделать?

Вариант номер раз — вспомнить что SVG это тоже изображение и его можно импортировать стандартными средствами HTML. Можно создать тег ссылкой на документ

Или задать SVG в качестве фонового изображения

#box { background-image: url("Hello_again.svg"); }

Главный минус этого способа — изолированность изображения. SVG как экспонат в музее — смотреть можно, трогать руками нет. Анимация внутри будет работать, но ни о никакой интерактивности речи быть не может. Если же, например, анимация запускается по клику пользователя или есть необходимость динамически менять содержимое SVG документа, то этот способ не для тебя.

Вариант номер два — создать объект из SVG, использовав теги