Raphaël (JavaScript library): Difference between revisions

Revision as of 13:56, 21 April 2009

Latest revision as of 02:08, 8 August 2025

(96 intermediate revisions by 74 users not shown)

Line 1:

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

{{dated prod|concern = No indication of notability or coverage in reliable sources.|month = April|day = 21|year = 2009|time = 00:00|timestamp = 20090421000038}}

{{Infobox Softwaresoftware

<!-- Do not use the "dated prod" template directly; the above line is generated by "subst:prod|reason" -->

{{notability|products|date=April 2009}}

{{Infobox Software

| name = Raphaël

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

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

| latest release date version = {{release date|2009|04|13}}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 = http{{URL|https://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 [[SVGVector graphics]] vector graphics for web sites. It alsowill providesuse a[[Scalable Vector Graphics|SVG]] for most browsers, but will use [[Vector Markup Language|VML]] alternative for cross-browserolder compatibilityversions 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 28 ⟶ 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 used by the [[Evri]] [[Web_widget|widget]] to create cross-browser vector graphics. The widget is used on the [[Washington_Post|Washington Post]] and the [[The_Times|Times of London]] websites<ref>{{cite web|url=http://www.washingtonpost.com/wp-dyn/content/article/2009/02/23/AR2009022302176.html?hpid=topnews|title=Obama Gets High Marks for 1st Month|date=2009-02-24|accessdate=2009-04-21|work=Washington Post article showing use of Evri widget}}</ref>.

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>

== See also ==

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

* [[D3.js]]

== References ==

{{Reflist}}

{{Reflist}}<!--added under references heading by script-assisted edit-->

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

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

*http [https://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]]