15+ jQuery Plugins To Make Animations With SVGs

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. SVG is not new, just under utilized until recently. Using SVG has become a lot more popular but animating and transversing SVG files with Javascript is actually not such an easy task.

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

vivus-jquery-plugin

Demo Download

Vivus is a little JavaScript class (little because it’s lightweight and have no dependency) to make animations with SVGs in a webpage. Different animations are available, even scripting the entire SVG to do whatever you want.

 

2 – Lazy Line Painter

lazy-line-painter

Demo Download

A Jquery plugin for path animation using the Raphaël Library.

 

3 – Snap.svg

snapsvg-jquery-plugin

Demo Download

SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM.

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

svgjs-jquery-plugin

Demo Download

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

svg-animation-jquery-plugin

Demo Download

a jQuery function for animating SVG multiple path asynchronously

 

6 – Velocity.js

velocity-jquery-plugin

Demo Download

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

stroke-animation-jquery-plugin

Download

SVG Stroke Animation Plugin.

 

8 – SVGMagic

svg-magic-jquery-plugin

Demo Download

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-jquery-plugin

Demo Download

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

jquery-svg-plugin

Demo & Download

jQuery SVG Plugin allows you to easily drive the SVG canvas from your JavaScript code. The main jQuery SVG package provides the basic SVG functionality including drawing primitives (rectangles, ellipses, lines, etc.), structural elements (definitions, groups, etc.), and supporting objects (paths and text).

 

11 – Zino UI

zino-ui

Demo Download

Zino UI SVG is a SVG micro-library for drawing two-dimensional vector graphics.

 

12 – Raphaël—JavaScript Library

Raphael-jquery-plugin

Demo Download

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

Raphaël [‘ræfeɪəl] uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.

Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

 

13 – walkway

walkway-jquery-plugin

Demo Download

An easy way to animate simple SVG elements.

 

14 – Drawpage

drawpage-jquery-plugin

Demo Download

Draw outline of your web page and disappear.

 

15 – Flight Indicators

flight-indicators-jQuery-plugin

Demo Download

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-jquery-plugin

Demo Download

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
  • Paths
  • Assets (Videos, Images, Fonts, SubMovies)
  • Keyframe and time based animations (easing functions too)
  • Path morphing
  • and much more…

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *