15 JavaScript-библиотек для анимации SVG

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

Рисование SVG не такая уж сложная задача, так как в Сети доступно множество JavaScript-библиотек для работы с SVG-изображениями. Эти JS-библиотеки помогают дизайнерам и разработчикам создавать для своих проектов и веб-приложений инновационную и визуально красивую графику.

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

Содержание

1. Textures.js


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

2. Circulus.svg


Circulus.svg – это генератор кругового меню, который позволяет создавать SVG-меню. Он предлагает два различных стиля: полный круг или полукруг, а также другие стили.

3. deSVG


deSVG может легко извлечь встроенный SVG из HTML. Это позволяет задавать стили SVG с помощью CSS, и обеспечить доступ к SVG даже без JavaScript.

4. SVG Morpheus


SVG Morpheus – это библиотека JavaScript, которая позволяет создавать SVG-иконки, которые трансформируются друг в друга. Библиотека проста в использовании и работает с использованием Delightful Details переходов от Material Design.

5. Vivus


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

6. Walkway.js


Walkway.js – это простой способ анимировать простые элементы SVG. Библиотека включает в себя простые встроенные функции, а также содержит опции для выбора и установки продолжительности анимации.

7. ZorroSVG


ZorroSVG позволяет легко добавлять маски для SVG-изображений. Это позволяет создавать изображения с прозрачностью как при использовании формата PNG, но при этом сохраняя небольшие размеры файлов.

8. Raphael


Raphael – это JavaScript библиотека, которая облегчает создание и использование на сайте векторной графики. Для создания графики она использует SVG и VML. Графика генерируется в качестве DOM-объекта, и вы можете управлять ей через JavaScript.

9. Snap.SVG


Это впечатляющая, к тому же бесплатная JavaScript – библиотека, которая облегчает работу с SVG в современных браузерах. Snap.SVG создана разработчиками самой популярной библиотеки SVG Raphael. Она поддерживает такие функции, как маски, узоры, полные градиенты, группы и многое другое.

10. D3.js


D3.js – это JavaScript – библиотека для работы с документами, базирующимися на данных. D3 помогает «оживить» данные, используя HTML, SVG и CSS. D3 дает возможность полностью задействовать современные браузеры без ограничений, связанных с использованием фреймворков. Библиотека совмещает в себе мощные компоненты визуализации и ориентированный на данные подход в работе с DOM.

11. Path.js


Paths.js – это JavaScript библиотека для создания SVG-контуров, которые затем могут быть использованы вместе с движками шаблонов, такими как Mustache или Handlebars, для отображения этих SVG фигур в браузере. Paths предлагает для работы три различных API.

12. SVG.js


SVG.js – это JavaScript библиотека для простой работы (управления и анимирования) с SVG. Библиотека является автономной, очень компактной (размер пакета всего 5 килобайт) и содержит множество полезных функций.

Она включает встроенные методы для создания форм (прямоугольник, круг, многоугольник и т.д.) или определения изображений. Для всех элементов может быть задана анимация (изменение размера, положения, цвета или любых других свойств) и взаимодействие со стандартными событиями JavaScript.

13. Jim Knopf


Jim Knopf – это JavaScript библиотека для создания переключателей на основе SVG. Библиотека не требует установки каких-либо JS-фреймворков и поставляется со встроенными типами переключателей. Созданные элементы управления можно полностью масштабировать (благодаря SVG), их дизайн можно настраивать с помощью CSS.

Кроме того, они могут управляться с помощью курсора мыши, колесика мыши, клавиатуры или тачпада. Существуют опции для установки минимальных/максимальных значений, начального положения и допустимого угла поворота переключателя.

14. Seen.js


Seen.js выводит 3D-сцены на SVG— или HTML5-холстах. Seen.js включает в себя простые абстракции для использования SVG и HTML5 на пределе их графических возможностей. Все остальные компоненты этой библиотеки независимы от типа содержимого, выводимого на холсте.

15. Bonsai


BonsaiJS – это компактная библиотека с интуитивным графическим API и визуализацией SVG. Ее основные функции включают в себя архитектурно разделенных «мастеров» запуска и визуализации; Iframe, контексты запуска Worker и Node, формы, контуры, элементы (видео, изображения, шрифты), ключевые кадры и стандартную анимацию, морфинг фигур / контуров и многое другое …

Данная публикация представляет собой перевод статьи «15 JavaScript Libraries for Animating SVG» , подготовленной дружной командой проекта Интернет-технологии.ру