15+ jQuery Plugins To Make Animations With SVGs
There are many jQuery plugins for manipulating and animating SVG. These plugins aims to help Web Developers easily bring advanced SVG features to the Web, with it we can load, animate and even create SVG graphics right in the browser.
Here are 15+ jQuery plugins to make animations with SVG. This collection should be more than enough to get you all caught up to speed with the latest trends.
1 – Vivus.js
2 – Lazy Line Painter
A Jquery plugin for path animation using the Raphaël Library.
3 – Snap.svg
Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking, clipping, patterns, full gradients, groups, and more.
4 – svg.js
A lightweight library for manipulating and animating SVG
Svg.js has no dependencies and aims to be as small as possible.
Svg.js is licensed under the terms of the MIT License.
5 – SVG Animation
a jQuery function for animating SVG multiple path asynchronously
6 – Velocity.js
Velocity is an animation engine that re-implements jQuery’s $.animate() for significantly greater performance (making Velocity also faster than CSS animation libraries) while including several new features.
In just 9Kb zipped, Velocity includes all of $.animate()’s features while packing in color animation, transforms, loops, easings, SVG support, and scrolling. Velocity is the best of jQuery, jQuery UI, and CSS transitions combined.
7 – Stroke Animation
SVG Stroke Animation Plugin.
8 – SVGMagic
SVGMagic is a simple jQuery plugin that searchs for SVG images (including background-images) on your website and creates PNG versions if the browser doesn’t support SVG.
9 – Two.js
Two.js is a two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple contexts: svg, canvas, and webgl.
10 – jQuery SVG
11 – Zino UI
Zino UI SVG is a SVG micro-library for drawing two-dimensional vector graphics.
Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.
13 – walkway
An easy way to animate simple SVG elements.
14 – Drawpage
Draw outline of your web page and disappear.
15 – Flight Indicators
The Flight Indicators Plugin allows you to display high quality flight indicators using html, css3, jQuery and SVG images. The methods make customization and real time implementation really easy. Further, since all the images are vector svg you can resize the indicators to your application without any quality loss !
16 – bonsai.js
Bonsai js is a lightweight graphics library with an intuitive graphics API and an SVG renderer.
Bonsai’s main features include:
- Architecturally separated runner and renderer
- iFrame, Worker and Node running contexts
- Assets (Videos, Images, Fonts, SubMovies)
- Keyframe and time based animations (easing functions too)
- Path morphing
- and much more…