SVG literally means Scalable Vector Graphic. SVG graphics are resolution independent which means SVG can scale to any size without losing the quality, even on retina displays. SVG is the format for new age graphics and stores information of the graphic or image in XML format.
Velocity is one of my personal favourites when it comes to bringing life to graphics. Velocity is built for speed and renders animations real fast. It is real easy to get started with Velocity if you are already familiar with animations in jQuery. It uses the same API that is used for jQuery’s $.animate ().
The best thing about velocity library is its full support for SVG element animation which includes SVG specific properties like x, rx, stroke-width etc. Color animation is also supported for fill, stroke and stopColor properties of SVG.
You can read more about Velocity at – julian.com.
Are you looking for a lightweight library? SVG.JS is the one for you, the size of this library is around 11k only gzipped and that is all. You get all the powers to play around with scalable vector graphics a.k.a. SVG with this 11k size packet in your pocket.
SVG.JS is readable and uncluttered, supports animations on size, position,, transformations and color for sure. It supports binding events to elements, opacity masks, clipping paths, text paths and dynamic gradients to name a few.
SVG.JS is here to stay for long for the simple reason that it is modular which makes it a breeze to create extension and plugins to extend the base functionality. It is well documented too.
You can know more about svg.js at – svgjs.com.
Looking for something very basic and specific for path drawing, line and polyline elements, walkway is the library for you. It does just the minimum, what does it well. It is a very small library created by Connor Atherton inspired by polygon ps4 review line animation.
You can know more about Walkway.js at – connoratherton.com/walkway.
You can know more about Raphael.js at – raphaeljs.com.
Snap can be used for creating SVG and animating SVG created using graphic design tools like Sketch, Illustrator or Inkscape.
Snap is open source, free to use and available under Apache2 license, you can clone it from GitHub. All credit goes to Dmitry Baranovskiy for creating this library, the guy who also authored RaphaelJS.
You can know more about Snap.svg at – snapsvg.io.
Bonsai is a complete toolset for graphics manipulation and animations. It is one of the most powerful libraries available as of today. It comes with an SVG rendered which essentially means you can create SVG with Bonsai as well as use graphics API for manipulation and animations. The key features of Bonsai that make it real powerful are –
- Runner and renderer are separated at the core
- Supports path morphing, assets including images, fonts, audio and video
- Keyframe and time based animations
There is an online editor as well that gives you playground to try your hands with bonsai. It is a real fun and power working with this library.
Lazy Line Painter
Lazy line painter is a small jQuery plugin for SVG path animation. This is what it does and for sure does with style. Creating path animations is as easy as exporting the line art from illustrator as .svg , use the “SVG to Lazy Converter” and define the path durations in the code. That is it, three step recipe for creating SVG path animation.
You can know more about lazylinepainter.js at – lazylinepainter.info.
Draw graphics with elegance by using Vivus library, the big daddy of SVG animation when it comes to line drawing.
Vivus library has no external dependencies and can run standalone. Library comes with out of the box animation styles as well as gives you an option to draw your SVG the way you want it to be.
You can read more about Vivus at – maxwellito.github.io/vivus.
You can read more about Progressbar.js at – kimmobrunfeldt.github.io/progressbar.js.
Two.JS is the library for playing around with SVG, Canvas and webgl and focuses completely on two dimensional shapes. This library relies on the scenegraph and operations like rotation, translation, scale etc. can be applied easily on the drawn objects. Two.js comes packed with SVG interpreter that ensures that vector graphics created in commercial software’s like Adobe Illustrator etc. can be imported in Two.js scene and manipulated further.
You can read more about Two.js at – jonobr1.github.io/two.js.