jQuery DrawSVG Plugin

SVG or Scalar Vector Graphics is Extended Markup Language-based graphics supporting 2 dimensional animations of images enhancing interactiveness. The specifications of SVG are open standards by World Wide Web Consortium defined in XML text files. These files can be changed or created with any drawing software or text file editors.

The jQuery provides Drawsvg.js plugin to draw or animate SVG images in a variety of ways for a developer's web pages, which is very lightweight and easy to use. The paths of SVG images are drawn in animation along with stagger and easing support options.

Example 1: The following example demonstrates the simple animation of rectangle with circular vertex, using jQuery DrawSVG plugin. The path element is the most significant element for creating basic shapes like lines and arcs in SVG library. It can also create complex shapes combining many basic ones. "d" is the parameter for defining shape of element.

Output:

Example 2: The following example demonstrates the drawsvg() method along with options setting and using callback method. The callback function is executed, once the animation is completed. 

Output:

Example 3:

Output: The animation always depends on the speed of scrolling.