Meet Raphaël, the JavaScript Vector Library

View Raphael's Demos

View Raphael's Demos

When JavaScript was first invented back in the late 1995, it was primarily used for visual effects. Suprisingly even today the majority of web developers still uses JavaScript mainly for visual effects even though the language is capable of doing much more than that. What contributed to the success of JS for visual effects and gimmicks is that with only a few lines of code, you can easily create graphics, animations and effects without resorting to graphic software like Photoshop or technologies like Flash or Silverlight.

The Raphael JavaScript library is the perfect framework to use if you want to create vector graphics like shapes and charts or apply effects like cropping or reflection to your images. It uses the SVG 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.

Other JavaScript libraries like jQuery do support SVG handling, however Raphael is a popular choice among Web developers because of its clean API and consistent updates. Available as a single file either and as a compressed version, this lightweight library should be a candidate for your next vector project.