RaphaelJS is a vector graphics library, which is used to draw objects in the browser.
In this section, we will see what RaphaelJS is, how it is different from other similar drawing libraries, and how it sets itself apart from HTML5 Canvas.
Almost a decade ago, we had a great technology called Scalable Vector Graphics (SVG), which was derived from Vector Markup Language (VML) to draw simple to complex 2D graphics on browsers. SVG was a World Wide Web Consortium (W3C) specification and was there lingering in the minds of advanced developers for a decade or so. VML, on the other hand, was Microsoft's specification and existed even before SVG. Though SVG was inspired from VML, they were never fond of each other and never co-existed on the same browser. SVG ran on all browsers except Internet Explorer (IE 9 and above supports SVG) and vice versa.
A two-headed and three-lettered headache.
SVG was a beautiful baby but no one wanted the labor pains—coding using SVG and VML for cross-browser consistency was so much of a serious pain that most developers simply used images. So we had two different technologies, both doing the same thing but they were both significantly different in their syntaxes and never ran on the same browser. It seemed like there was a problem in getting them to peacefully co-exist.
Most browsers support SVG and all versions of IE from IE 5.0 onwards support VML. Since RaphaelJS was developed to make the most of SVG and VML, it can practically run in almost any browser, making it more reliable.
RaphaelJS—the amphibian
We now know what RaphaelJS is—it's a combination of SVG and VML using whichever of these two technologies the current browser supports, therefore it is versatile and reliable. But it's equally important to also know what is not RaphaelJS.
Just like the world is of two primary states water and land, graphics are of two primitive types—vector and raster. Vector graphics are drawn using geometrical primitives like lines, curves, ellipses, and so on. Various such primitives join together and form a graphic. Vector graphics are drawn on the screen mathematically. They are scalable without loss in quality. Raster graphics, on the other hand, are pixel-based and are not scalable. The main advantage with vector graphics is that they are scalable and are also real objects, meaning we can fiddle with them and manipulate them dynamically. The following diagram shows the difference between raster (bitmap) and vector graphics:
Difference between raster (bitmap) and vector graphics
RaphaelJS is a vector graphics library, therefore the drawings are real DOM objects. Thus they can be dynamically accessed, manipulated, resized, and practically hammered into anything you want in runtime. Best of all is that they can be assigned events like click, mouseover, mouseleave, and so on. The capabilities of RaphaelJS are just incredible.
Raphael uses vector graphics and HTML 5 Canvas uses raster graphics.
RaphaelJS uses the x, y positioning system to draw. The top-left corner of the screen is 0,0 and the horizontal scale is the x axis and the vertical scale is the y axis.
So if the code says (15,20) then it means that the point will be at 15 points from the x axis (horizontal) and 20 points from the y axis (vertical).
RaphaelJS is a vector graphics-based library built to make it easier to draw on the screen. RaphaelJS uses either SVG or VML, whichever the current browser supports. The drawings created using RaphaelJS are DOM objects and can be manipulated dynamically making them more versatile, they can also be assigned events such as click, mouseover, and mouseleave. All these amazing properties make RaphaelJS exciting to learn and use.