What is Raphael?
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web.
Raphaë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 is used by first creating an instance of the Raphaël object, which manages the creation of the canvas.
Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.
Why use Raphael.js?
It is also possible to create animations using HTML5 Canvas. HTML5 Canvas uses bitmap graphics and excels at processing complicated animations like flying past stars in outer space.
In contrast, Raphael.js uses SVG vector images and is designed to seamlessly integrate with on page events such as clicking, hovering, and dragging. Moreover, Raphael.js provides great legacy browser support (including IE7 and IE8).
How to start?
You can simply include raphael.js file in html and you will start use.
For example:
<script type="text/javascript" src = "https://raw.githubusercontent.com/DmitryBaranovskiy/raphael/master/raphael.js"></script>
Full HTML Example Code
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Raphaël Simple Example</title>
<script type="text/javascript" src = "https://raw.githubusercontent.com/DmitryBaranovskiy/raphael/master/raphael.js"></script>
</head>
<body>
<!-- the html element where to put the paper -->
<div id="paper1"></div>
<!-- a script that create's a paper and a rectangle -->
<script type="text/javascript">
var paper = Raphael("paper1", 500,500);
var rect1 = paper.rect(20,30,100,12).attr({fill: "orange"});
</script>
</body>
</html>
Video Tutorial
https://www.youtube.com/watch?v=IPy77zMsd0Y
