Raphaël (JavaScript library)

{{Short description|Cross-browser vector graphics JavaScript library}}

{{Infobox software

| name = Raphaël

| logo = Raphaël logo.svg

| logo size = 64px

| developer = Dmitry Baranovskiy

| released = {{Start date and age|2008|08|08}}{{cite web |title=Raphaël—JavaScript library |url=http://dmitry.baranovskiy.com/post/raphael-javascript-library}}

| latest release version = 2.3.0

| latest release date = {{Start date and age|2019|08|14}}{{cite web |title=Releases · DmitryBaranovskiy/raphael |website=GitHub |url=https://github.com/DmitryBaranovskiy/raphael/releases |access-date=2021-03-10}}

| programming language = JavaScript

| genre =

| license = MIT License

| website = {{URL|https://dmitrybaranovskiy.github.io/raphael/}}

}}

Raphaël, named for Italian painter Raffaello Sanzio da Urbino,{{cite web |title=An Intro to Raphaël|url=http://raphaeljs.com/}} 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{{As of?|date=April 2023}} supports Chrome 5.0+ Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.

Use

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:{{Citation needed|date=April 2023}}

// 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.{{Citation needed|date=April 2023}}

Usage

The widget is used on the Washington Post and the Times Online websites.{{Citation needed|date=April 2023}}

Raphaël is also used by iCloud.com, and by Mass Relevance in the White House.[https://twitter.com/RaphaelJS/status/88762625986531329 Raphaël in White House: “we (@massrelevance) used @raphaeljs 2.0 for the map viz used during the #AskObama event today http://t.co/EcqROIi”]

See also

{{Portal|Free and open-source software}}

References

{{Reflist}}

Further reading

  • {{cite book |last=Wilson |first=Chris |title=RaphaelJS |publisher=O'Reilly Media |date=December 2013 |isbn=978-1-4493-6536-3}}