Raphaël (JavaScript library): Difference between revisions

Revision as of 01:49, 24 December 2018

Latest revision as of 02:08, 8 August 2025

(15 intermediate revisions by 14 users not shown)

Line 1:

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

{{Infobox software

| name = Raphaël

Line 5 ⟶ 6:

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

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

| programming language = [[JavaScript]]

| genre =

Line 12 ⟶ 13:

| website = {{URL|https://dmitrybaranovskiy.github.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+. According to JavaScript analytics service, [[Libscore]], Raphaël is used on over 3,000 websites, including the homepages of [[Apple Inc.|Apple]]'s [[iCloud]] [http://iCloud.com], [[Food Network]][http://foodnetwork.com], [[Cornell]][http://Cornell.edu], and [[Philips]][http://philips.com].<ref>http://libscore.com/?#Raphael</ref>

== 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);

Line 26 ⟶ 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, 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>

Line 46 ⟶ 47:

==External links==

* [https://dmitrybaranovskiy.github.io/raphael/ Raphaël] homepage

* [https://dmitrybaranovskiy.github.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)}}