Создаем SVG анимацию через CSS и JS

Перед тем как начать разговор о SVG анимации, давайте разберемся, что такое SVG.
Scalable Vector Graphics - масштабируемая разметка векторной графики. Предназначена для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Позволяет задать любую фигуру компактной строкой, описывающей путь от начальной точки до конечной через любые промежуточные координаты. 

Формат SVG имеет ряд достоинств:

• Файлы SVG можно читать и редактировать с помощью обычных текстовых редакторов. SVG хорошо поддаются сжатию. Они меньше по размеру, чем сравнимые изображения форматов JPEG и GIF.

• SVG - векторный формат, а это позволяет масштабировать изображение без потери качества.

• Текст в графике SVG не является изображением, поэтому его можно выделять и копировать, он индексируется поисковыми машинами.

• SVG — открытый стандарт, то есть пользователь может изменить рисунок, поменяв содержание файла SVG.

• Совместимость с таблицами стилей (CSS), которые используются для описания внешнего вида страниц сайтов.

• Анимация реализована в SVG с помощью языка SMIL. Элементами можно управлять при помощи JavaScript.

И несколько недостатков, куда же без них:

• Сложность использования в крупных картографических приложениях. Мелкие детали описывать слишком трудоёмко.

• Чем больше в изображении мелких деталей, тем быстрее растёт размер SVG-данных.

Пример SVG кода: 

И вот мы плавно подошли к разговору использования SVG-анимации (SMIL). SVG-графику можно анимировать с помощью нескольких анимационных элементов. Например, с использованием таблиц стилей CSS. 

Так зачем же разработчику использовать SMIL?  Есть некоторые свойства SVG, которые невозможно изменить и анимировать при помощи CSS. Например, атрибут d=””, в котором находится набор данных, определяющих форму элемента. Недостающие возможности анимации на CSS можно восполнить с помощью JavaScript. Для этого есть ряд библиотек. Это будет целесообразно, если браузер (например Opera Mini) не поддерживает SMIL анимацию.

Целевой объект анимации задается с помощью xlink:href.

Если атрибут  xlink:href не задан, то целевым элементом становится родительский элемент:

Атрибут attributeName используется для указания имени атрибута, который будет анимироваться. К примеру, если нужно анимировать положение центра фигуры на оси Y, нужно задать “сy” в качестве значения атрибута attributeName.

Вот код, который позволяет анимировать движение по оси Y синего круга из предыдущего примера: 

В течение 5 секунд  (dur="5s"), после клика на синий круг (begin="click"), он будет двигаться по оси Y, начиная с точки from="300" в точку to="100". После выполнения - анимация остановится в конечной точке (fill="freeze").  Чтобы задать бесконечное повторение анимации, достаточно добавить атрибут repeatCount="indefinite".

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

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