Створюємо SVG анімацію через CSS і JS

Перед тим як почати розмову про 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-анімація — дуже велика тема. Можна написати велику статтю з прикладами коду і їх виконанням, але, разом з тим, деякі можливості залишаються недоступними. У тому числі — анімація тексту. Але це вже зовсім інша історія, досліджувати яку ми будемо в наступних статтях блогу.