Raphaël, named for Italian painter Raffaello Sanzio da Urbino, is a cross-browser

JavaScript JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of websites use JavaScript on the client side for webpage behavior, often ...

library that draws

Vector graphics Vector graphics is a form of computer graphics in which visual images are created directly from geometric shapes defined on a Cartesian plane, such as points, lines, curves and polygons. The associated mechanisms may include vector display ...

for web sites. It will use SVG for most browsers, but will use

VML Vector Markup Language (VML) is an obsolete XML-based file format for two-dimensional vector graphics. It was specified in Part 4 of the Office Open XML standards ISO/ IEC 29500 and ECMA-376. According to the specification, VML is a deprecat ...

for older versions of

Internet Explorer Internet Explorer (formerly Microsoft Internet Explorer and Windows Internet Explorer, commonly abbreviated IE or MSIE) is a series of graphical user interface, graphical web browsers developed by Microsoft which was used in the Microsoft Wind ...

. Raphaël currently supports Chrome 5.0+

Firefox Mozilla Firefox, or simply Firefox, is a free and open-source web browser developed by the Mozilla Foundation and its subsidiary, the Mozilla Corporation. It uses the Gecko rendering engine to display web pages, which implements current and ...

3.0+,

Safari A safari (; ) is an overland journey to observe wild animals, especially in eastern or southern Africa. The so-called "Big Five" game animals of Africa – lion, leopard, rhinoceros, elephant, and Cape buffalo – particularly form an impor ...

3.0+,

Opera Opera is a form of theatre in which music is a fundamental component and dramatic roles are taken by singers. Such a "work" (the literal translation of the Italian word "opera") is typically a collaboration between a composer and a libre ...

9.5+ and

6.0+. According to JavaScript analytics service, Libscore, Raphaël is used on over 3,000 websites, including the homepages of Apple's

iCloud iCloud is a Personal cloud, cloud service from Apple Inc. launched on October 12, 2011 as a successor to MobileMe. , the service had an estimated 850 million users, up from 782 million users in 2016. iCloud enables users to sync their data to t ...

Food Network Food Network is an American basic cable channel owned by Television Food Network, G.P., a joint venture and general partnership between Warner Bros. Discovery Networks (which holds a 69% ownership stake of the network) and Nexstar Media Group ( ...

Cornell Cornell University is a private statutory land-grant research university based in Ithaca, New York. It is a member of the Ivy League. Founded in 1865 by Ezra Cornell and Andrew Dickson White, Cornell was founded with the intention to teach an ...

, and

Philips Koninklijke Philips N.V. (), commonly shortened to Philips, is a Dutch multinational conglomerate corporation that was founded in Eindhoven in 1891. Since 1997, it has been mostly headquartered in Amsterdam, though the Benelux headquarters i ...

Use

Raphaël is used by first creating an instance of the Raphaël

object Object may refer to: General meanings * Object (philosophy), a thing, being, or concept ** Object (abstract), an object which does not exist at any particular time or place ** Physical object, an identifiable collection of matter * Goal, an ai ...

, 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.

Usage

The widget is used on the Washington Post and the

Times Online ''The Times'' is a British daily national newspaper based in London. It began in 1785 under the title ''The Daily Universal Register'', adopting its current name on 1 January 1788. ''The Times'' and its sister paper ''The Sunday Times'' (fo ...

websites. Raphaël is also used by

.com, and by Mass Relevance in the

White House The White House is the official residence and workplace of the president of the United States. It is located at 1600 Pennsylvania Avenue NW in Washington, D.C., and has been the residence of every U.S. president since John Adams in 1800 ...

.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”
/ref>

Use

Usage

See also

References

Further reading

External links