Easy SVG with Raphaël–JavaScript Library

About seven years ago, I was assigned to create a customized interactive timeline chart (similar to Timeline control Telerik provides) for one of our project at my work. At that time, there was not much choice. Canvas did not exist. VML or SVG was not a good choice either if you want cross-browser support.

I pretty much had to rely on using PHP to create an image of the chart on the server-side, and then use <image map> and some JavaScript to show/hide <div> element, so a user can mouse over the chart element and get some information.

Two years ago, I joyfully re-implemented and improved the chart by using Silverlight (our shop moved from PHP to .NET two years earlier).  Then something happened, and our users keep asking why my Silverlight chart wouldn’t work with the thing. 🙂 Microsoft also moved on and commit to HTML5 as a true cross-platform solution.

Anyway, enough with the history, let’s see how Raphaël can help me. The best thing about Raphaël is that it supports **most** browsers including IE 6, 7, and 8 which do not support SVG. For Firefox 3+, IE9, and Chrome, Raphaël generates normal XVG while Raphaël uses VML for IE 6-8.

To start using Raphaël, you just download js files from Raphaël site. For Visual Studio user, it is even easier as you can nuGet it, and all of required files will be there for you.

image

image

Let’s look at sample code in jsfiddle.

var canvas = Raphael("raphael-canvas", 320, 200);                       
cir = canvas.circle(50, 50, 10);
cir.attr("fill", "#f0f");
cir.attr("stroke", "#f0f");
glowSet = cir.glow({color: "#0ff"});

$('#clear-glow').click(function ()
{
  glowSet.remove();                               
    cir.animate({cx: 100, "stroke-width": 2, fill: "#0ff"}, 1000);
});

image

I start by creating a Raphaël canvas in the pre-defined <div/> in HTML body. The sample shows how I create a circle with Fuchsia background. I also make it glow with simple glow() function. The last part is to add some animation with easing using Raphaël API. You can run the sample code via jsfiddle and see how it works.

Enjoy coding!

Advertisements

One thought on “Easy SVG with Raphaël–JavaScript Library

  1. Pingback: $(window).resize() and Internet Explorer 8 | Cyan By Fuchsia

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s