Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted, and compressed.
There are myriad of jQuery plugins which you can use for manipulating and animating SVG. With the help of jQuery SVG plugins you can perform various tasks such as load, animate and even create SVG graphics right in the browser.
For this roundup I have generated a list of 15 Best jQuery Plugins for Creating SVG Animations and let you create beautiful graphics and animated contents for their web applications.
Please take a look at 15 JavaScript Libraries for Animating SVG
1. jQuery Draw SVG
jQuery DrawSVG is lightweight, simple to use jQuery plugin to animate SVG paths. This plugin uses the jQuery built-in animation engine to transition the stroke on every path inside the selected svg element, using stroke-dasharray and stroke-dashoffset properties.
2. Animated SVG Slider
A simple, responsive carousel with animated SVG paths used as transition effects.
3. Animatrix Creative
Animatrix Creative allows you to draw and animate SVG images. Professional SVG Image WYSIWYG Editor is included in this plugin, and can be accessed from the admin area. You can draw with the default Pencil tool or create shapes out of the rich Shapes library. All SVG images are animated on the front-side, by mimicking the drawing process. You can also export and save the SVG image as well.
4. svgPathAnimation
svgPathAnimation is a jQuery function for animating SVG multiple path synchronously.
5. jQuery Interactive SVG Map Plugin
MapSVG plugin turns any SVG file into interactive and fully customizable map or floorplan. It comes with number of features such as preloaded maps, cross browser, zoom and pan, tooltips, markers, event handlers, urls, customizable colours and many more.
6. Feyn
jQuery.Feyn is a plugin for drawing Feynman diagrams with SVG (Scalable Vector Graphics). It supports for typesetting labels and including external graphics, it comes with predefined propagator styles, vertex types and symbols and it is lightweight and cross-browser.
7. SVG Avatars Generator
This jQuery integrated script (with some PHP files on a server side) lets your visitors to create custom avatars. The Avatars Generator is based on SVG (Scalable Vector Graphic), which is supported by all modern browsers and does not depend on screen resolutions. As a result your visitors can download their avatars as SVG file or as PNG one (2 size options) which is converted from vector graphic parts. The integration of the SVG Avatars creator is quite simple too.
8. 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.
9. Lazy Line Painter
Lazy Line Painter is a jQuery plugin for preparing SVG path animations using jQuery. Lazy Line Painter works by converting every single line into an animation.
10. Gooey Menu
The plugin allows to create a gooey/gummy menu with circles as menu items. It includes cool gooey effects using svg filters, 15+ easily customizable options, easy to use event API, fully responsive layout, support for all modern browsers, and many more.
11. qTip2
qTip2 is the second generation of the advanced qTip plugin for the ever popular jQuery framework. qTip2 provides you with tonnes of features like speech bubble tips, SVG support, and imagemap support, and best of all… it’s completely free under the MIT/GPLv2 licenses!
12. Vague.js
Vague.js is an experimental script that allows you to blur any kind of html element. Vague.js checks if the user’s device supports the CSS filters otherwise it can fallback using the SVG filters or the Microsoft css filters.
13. JustClock
JustClock jquery plugin based on SVG raphael,js library allows users to create different analog clocks. Users can change style, size and color of clocks, set any time zone and more and more. Full list of options: – time zone – type – turn off seconds hand – color of seconds, minutes and hours hands – background – rim color and width – number of divides.
14. SVG Magic
This ease-to-use jQuery plugin will create a fallback for .SVG images on your website. When the plugin notices that the visitors browser doesn’t support .SVG images it will replace those images with new .PNG images. Those .PNG images are created on the run using a serverside script. When the visitors browser does support .SVG images it will just go back to sleep. A big advantage of SVGMagic is that you don’t have to create multiple versions of your images. You can just focus on the .SVG images and let SVGMagic do the rest.
15. Mapplic
If you would like to turn your photo/vector graphic map into a fancy interactive map application that is supported by every major browser and it’s working even on mobile or other touch devices, you can stop searching, you’ve come to the right place. In fact, you came to the only place, since it is the only utility available with this unique feature set. The supported map file formats are: JPG, PNG and SVG.
