Перед тем как начать разговор о SVG анимации, давайте разберемся, что такое SVG.
Scalable Vector Graphics - масштабируемая разметка векторной графики. Предназначена для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Позволяет задать любую фигуру компактной строкой, описывающей путь от начальной точки до конечной через любые промежуточные координаты.
Формат SVG имеет ряд достоинств:
-
Файлы SVG можно читать и редактировать с помощью обычных текстовых редакторов. SVG хорошо поддаются сжатию. Они меньше по размеру, чем сравнимые изображения форматов JPEG и GIF.
-
SVG - векторный формат, а это позволяет масштабировать изображение без потери качества.
-
Текст в графике SVG не является изображением, поэтому его можно выделять и копировать, он индексируется поисковыми машинами.
-
SVG — открытый стандарт, то есть пользователь может изменить рисунок, поменяв содержание файла SVG.
-
Совместимость с таблицами стилей (CSS), которые используются для описания внешнего вида страниц сайтов.
-
Анимация реализована в SVG с помощью языка SMIL. Элементами можно управлять при помощи JavaScript.
И несколько недостатков, куда же без них:
-
Сложность использования в крупных картографических приложениях. Мелкие детали описывать слишком трудоёмко.
-
Чем больше в изображении мелких деталей, тем быстрее растёт размер SVG-данных.
Пример SVG кода:
Исполнение данного кода:
В даном изображении можно просто изменить параметры в коде. Для примера - картинка с изображением занимает 35.5 КБ, а код SVG - 426 байт.
И вот мы плавно подошли к разговору использования 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-анимация очень большая тема. Можно написать огромную статью с примерами кода и их выполнением, но, вместе с тем, некоторые возможности остаются недоступными. В том числе — анимация текста. Но это уже совсем другая история, исследовать которую мы будем в следующих статьях блога.