Vector graphics in your web page

Once again in the HTML+JS saga. It is so common that we need to solve visual UI issues using a set of CSS, HTML, JS and tricks to make that button looks nice or the XYZ to look like ABC.

Those tricks are necessary, but we do have other options: one of those options are vector graphics. First we need to understand what a vector graphic is, in the 90s I used to say that vector graphics is what you can do with the Core Draw, but I am not sure anymore how much people knows this software (except for the ones that really use it).

So as a good boy I will ask help for the wikipedia to describe it:

Vector graphics is the use of geometrical primitives such as points, lines, curves, and shapes or polygon(s), which are all based on mathematical equations, to represent images in computer graphics.

Did you got it? So vector graphic is when you do the draw only using the geometrical images: you draw a rectangle, two circles, one curviline line and at the end you have a dog.

The W3C has an specification for vector graphics called SVG, “SVG is a language for describing two-dimensional graphics in XML [XML10]. SVG allows for three types of graphic objects: vector graphic shapes (e.g., paths consisting of straight lines and curves), images and text. Graphical objects can be grouped, styled, transformed and composited into previously rendered objects. The feature set includes nested transformations, clipping paths, alpha masks, filter effects and template objects.”[2]

Looking at this point of view it looks great right? Well there is always a draw back, that in the web world usually is: lack of support. Not all the browser support the SVG, notably Internet Explorer (that will offer base support for it at version 9), you will also find problems at the mobile browsers, like the ones in Android.

As usual the folks found a way to through it using javascript libraries. Those libraries usually abstract the SVG from you and deal with the browser differences. There is quite a few over there, but one that looks pretty simple and light is Raphaël (Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web).

According to the project web site the browsers supported are: Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+; a good deal for a 60Kb library.

The nice thing about SVG is that you can add script events to it as any other element at the screen, so you can have nice UI elements rendered at the page and script it with you amazing JS library!

Are you wondering how it looks like? Check this page where the icons are made using SVG http://raphaeljs.com/icons/.

Talking about circles, squares, lines I couldn’t help myself to not remember DIO singing Last in Line!

[1] Scalable Vector Graphics. http://www.w3.org/Graphics/SVG/

[2] About SVG, Scalable Vector Grapchis (SVG) 1.1 Specification. http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#AboutSVG

[3] An Introduction to the Raphael JS Library. http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library/