Raphaël (JavaScript library): Difference between revisions

Revision as of 09:33, 14 April 2013

Latest revision as of 02:08, 8 August 2025

(38 intermediate revisions by 33 users not shown)

Line 1:

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

{{Infobox software

| name = Raphaël

| logo = [[File:Raphaël logo.svg|64px]]

| genre logo size = 64px

| developer = Dmitry Baranovskiy

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

| latest release version = 2.1.0

| latest release date version = {{release date|2012|03|14}}2.3.0

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

| genre =

| programming language = [[JavaScript]]

| genre =

| license = [[MIT License]]

| website = {{URL|httphttps://raphaeljsdmitrybaranovskiy.comgithub.io/raphael/}}

}}

'''Raphaël''', named for Italian painter [[Raffaello Sanzio da Urbino]],<ref>{{cite web |title=An Intro to Raphaël|url=http://raphaeljs.com/}}</ref> is a [[cross-browser]] [[JavaScript]] library that draws [[Vector graphics]] for web sites. It will use [[Scalable Vector Graphics|SVG]] for most browsers, but will use [[Vector Markup Language|VML]] for older versions of [[Internet Explorer]]. Raphaël currently{{As of?|date=April 2023}} supports [[Chrome browser|Chrome]] 5.0+ [[Firefox]] 3.0+, [[Safari (web browser)|Safari]] 3.0+, [[Opera (web browser)|Opera]] 9.5+ and [[Internet Explorer]] 6.0+.

== Use ==

Raphaël is used by first creating an instance of the Raphaël [[Object (computer science)|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}}

<sourcesyntaxhighlight lang="javascript">

// 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")

Line 24 ⟶ 27:

// same as above

var r = Raphael("example", 320, 200);

</syntaxhighlight>

</source>

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 [[The Times|Times Online]] websites.{{Citation needed|date=April 2023}}

Raphaël is also used by [[iCloud]].com,<ref>[https://www.icloud.com/system/cloudos/en-us/05E/javascript-packed.js The JavaScript code of iCloud.com, including Raphael]</ref> and by [[Mass Relevance]] in the [[White House]].<ref>[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”]</ref>

== See also ==

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

* [[D3.js]] (a revamp of 2008's [[Protovis]])

== 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}}

==External links==

* [httphttps://raphaeljsdmitrybaranovskiy.comgithub.io/raphael/ Raphaël] homepage]

* [httphttps://raphaeljsdmitrybaranovskiy.comgithub.io/raphael/reference.html Raphaël] syntax]

* [http://dev.opera.com/articles/view/raphael-a-javascript-api-for-svg/ Raphaël:] a JavaScript API for SVG]

* [http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library/ An introduction to Raphaël]

* [http://www.fosslc.org/drupal/content/raphaeljs-javascript-vector-graphics-library-web/ Raphael.js:] {{Webarchive|url=https://web.archive.org/web/20110929222020/http://www.fosslc.org/drupal/content/raphaeljs-javascript-vector-graphics-library-web |date=2011-09-29 }} javascript vector graphics library for the web]

{{DEFAULTSORT:Raphael (JavaScript library)}}

[[Category:JavaScript visualization toolkits]]

[[Category:JavaScript libraries]]

[[Category:Free software programmed in JavaScript]]

[[Category:Software using the MIT license]]

[[Category:2008 software]]