Reference articles on history, science, culture and more
Encyclopedia

Raphaël (JavaScript library)

Cross-browser vector graphics JavaScript library

Raphaël, named for Italian painter Raffaello Sanzio da Urbino, is a cross-browser JavaScript library that draws vector graphics for web sites. It will use SVG for most browsers, but will use VML for older versions of Internet Explorer. Raphaël currently supports Chrome 5.0+ Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.

01Use

Raphaël is used by first creating an instance of the Raphaël object, which manages the creation of the canvas. The following examples create a canvas that is 320 pixels wide and 200 pixels high:

// top left of canvas at the viewport's 10,50 coordinate var r = Raphael(10, 50, 320, 200); // top left of canvas at the top left corner of the #example element (in elements where dir="ltr") var r = Raphael(document.getElementById("example"), 320, 200); // same as above var r = Raphael("example", 320, 200);

Once the Raphaël object has been instantiated, its various drawing, resizing and animation methods may be called to build up a vector graphic. This library includes support of Cùfon fonts, a format that turns a given font into a set of vector paths. It is extensible through plugins.

02Usage

The widget is used on the Washington Post and the Times Online websites.

Raphaël is also used by iCloud.com, and by Mass Relevance in the White House.

Watch videos about Raphaël (JavaScript library)Explainers and documentaries on YouTube (opens in a new tab)

Sources and credits

This article is adapted from the Wikipedia article Raphaël (JavaScript library), written by its contributors and licensed under CC BY-SA 4.0. Fathomly has changed the layout, removed citation markers, navigation and maintenance notices, and adjusted punctuation. This adapted version is shared under the same license. For references, see the original article.

Fathomly is not affiliated with or endorsed by the Wikimedia Foundation. Spotted a problem? Tell us.