SVG анимации

SVG лучший формат изображений для веб разработки, и вот таки у меня добрались руки по играться с анимациями на SVG.

Немного теории, в этом псте я на примерах накидаю пару фич как можно юзать эсвэгэ, например у нас есть изображуха в SVG и нам её нужно анимировать, но не просто анимировать, а анимировать её по частям.

Конвертировать SVG в удобно редактируемый код

Для этого воспользуемся функционалом AI (Adobe Illustrator), открываем нужную нам SVG на редактирование.

1. Выбираем Файл -> Экспорт -> Экспорт для экранов
   
2. Выбираем настройки
   
3. Вбиваем такие настройки, сохраняем, экспортируем.
   

Потом открываем этот файл через текстовый редактор, и в ручную уже редактируем.

Например если нам нужно менять стили для целой группы элементов, то естественно собираем эти элементы в группу, тег <g/>

Ещё есть отличная фича, пихать SVG в SVG, у тега SVG куда больше возможностей чем у группы, например у него есть область видимости, и позиционирование.

Анимируем SVG в примерах

jQuery + CSS

воспользуемся старым как мир трюком, с помощью jQuery и CSS добавляем анимацию

Бесконечно дублирующийся и двигающийся фон

Тут по сложнее, надо делать вложенный SVG, тогда не будет видно что он выходит за края, его дублировать по порядку и двигать, как только скопированный фон становится на место первого, удаляем первый, и добавляем второй заного)