SVG animation and creation in javascript

SVG-  Scalable Vector Graphics

SVG is a markup language for describing two-dimensional graphics applications and images, and a set of related graphics script interfaces. SVG allows for three types of graphic objects: Vector graphic shapes (paths consisting of straight lines and curves), images and Text.


SVG images can be created and edited with any text editor. SVG images can be searched, indexed,scripted and compressed

SVG images are scalable

SVG images can be printed with high quality at any resolution

SVG is an open Standard

SVG files are pure xml

SVGs can also be created with tools like Adobe illustrator, Inkscape and Sketch (available for mac).
how to modify or animate or attach events to the SVG according to our needs?

There are ample of JavaScript plugins available to help us in SVG animation, Some of the majorly used ones are:-


Snap provides web developers with a clean, streamlined, intuitive and powerful API for animating and manipulating both existing SVG content and SVG content generated with snap. Unique feature of snap is its ability to work with existing SVG. That means our SVG content does not have to be generated with snap for us to be able to use snap to work with it. We can even work with strings of SVG without having to actually render it first which means we can do things like query specific shapes out of an SVG file, essentially turning it into a resource container.


VIVUS is a lightweight JavaScript class that allows us to animate SVGs, giving them the appearance of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw our SVG in whatever way we like.


A lightweight graphics library with an intuitive graphics API and an SVG  renderer. It supports both HTML5 graphic type canvas and SVG. We can use orbit  to feel how bonsai works in live action.


Raphaël is a small JavaScript library which will simplify our work with vector graphics on the web. Raphaël uses the SVG w3 recommendation and VML as a base for creating graphics. This means every graphic object we create is also a DOM object, so we can attach JavaScript event handlers or modify them later.

Main adantage of using this is compatibility among the browsers, this supports IE 6+, Firefox 3+, Safari 3+, chrome 5+ and opera 9.5+.


Tagged as: , ,