Создание SVG анимации. Бесплатные программы для анимации SVG

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

  • прибавить интерес пользователей к вашему проекту, 

  • акцентировать внимание на каком-либо месте или элементе,

  • добавить удобства и т. д.

Самое главное преимущество SVG анимации — это то, что ее можно очень гибко видоизменять при помощи CSS или JavaScript. 

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

 

SVG анимация

SVG анимация на вашем сайте может быть достигнута двумя способами:

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

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

 

SVG анимация своими руками

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

Пример самой простой SVG анимации:

<svg width="250" height="250">

  <circle cx="55" cy="45" r="30" fill="black" />

</svg>

 

Как видите, у SVG анимации есть свой собственный тег в HTML — это <svg>. Внутри него мы помещаем свойства и атрибуты самой анимации. Если простым языком: помещаем то, что должно произойти на странице с нужным нам элементом. 

Также внутри тега <svg> часто помещается еще один тег, который отвечает за небольшую анимацию по какому-то блоку, — это тег <animate>.

Пример:

 <svg>

  <rect x="0" y="0" width="200" height="200" fill="#fff">

   <animate attributeName="width" from="0" to="200" dur="6s" />

  </rect>

</svg>

 

В указанном выше примере мы имеем некий блок с размерами 200х200. Будет анимироваться его появление, то есть он будет появляться (расти) слева направо. Для этого мы указали в атрибуте «attributeName» значение атрибута, который мы хотим анимировать, — у нас это «width». Потом задали начальное и конечное значение анимации — from/to, а также задали время анимации dur.

Таким способом можно анимировать и трансформировать простые объекты, их можно: вращать, «прятать», уводить в сторону, задавать им необходимое «движение» и др. Для этого только нужно указывать соответствующие атрибуты нужного элемента.

Если будет желание анимировать более сложные объекты, то тогда нужно взять на вооружение инструменты для работы с векторной графикой, чтобы иметь возможность экспортировать нужное изображение в SVG и добавить его к себе на сайт. В качестве такого инструмента подойдут:

  • Adobe Illustrator;

  • Sketch.

После добавления такого элемента на HTML страницу нужно приступить к его стилизации при помощи CSS или JavaScript. Однако чистый CSS или JS не всегда справляются с нужными задачами, поэтому нужно взять на вооружение несколько их популярных библиотек с документациями, которые помогут сделать все так, как надо:

  1. Snap.svg. Одна из самых популярных библиотек для работы с SVG форматом в целом, а не только с анимациями.

  2. SVG.js. Негласно считается, что у данной библиотеки лучшая производительность среди всех перечисленных в нашем списке. Предназначена для JavaScript.

  3. Animateplus. Самая легковесная из известных библиотек для работы с файлами SVG.

  4. Vivus. Библиотека, специально рассчитанная для анимации SVG.

  5. Raphael. Одна из самых старых библиотек, которая поддерживается еще старыми версиями браузеров IE.

  6. Walkway. Еще одна отличная библиотека для придания анимации контурам SVG.

  7. Velocity.js. Идеально подходит для тех, кто решил поработать с JavaScript анимацией.

  8. Mo.js. Богатый функционал этой библиотеки поможет реализовать любую анимацию.

 

Анимация SVG при помощи сторонних программ

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

Программы для анимации SVG:

  1. RAW. Это бесплатная программа, которая предлагает множество различных шаблонов для анимации SVG изображений.

  2. Inkscape. Это очень популярный инструмент для работы с векторной графикой. Распространяется бесплатно. С недавнего времени у него возникли проблемы с созданием анимации SVG, но надеемся, что это исправят.

  3. Adobe Edge. Один из лидеров в создании анимации SVG, так как позволяет создавать просто превосходную векторную анимацию. Это немного сложный инструмент для изучения с нуля, но Ютуб полон инструкций того, как с ним работать.

 

Заключение

Анимация SVG создается не слишком сложно. Если есть знания CSS или JavaScript, то с этим вообще не будет никаких проблем. Если таких знаний нет, то на помощь всегда могут прийти сторонние программы и онлайн-редакторы.