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.
Advantages:-
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).
But,
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.svg
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
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.
Bonsai
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
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+.