JavaScript Vector Library


Raphaël: Cross-browser vector graphics the easy way

Visit the library website for more information:

Quickstart guide

You need to have NPM installed to build the library.

  • git clone
  • yarn install --frozen-lockfile
  • yarn build-all

To run tests you need to run npx bower install open dev/test/index.html in your browser, there's no automated way right now.



All files are UMD compliant.

You can use:

  • raphael.min.js (includes eve and it's minified)
  • raphael.js (includes eve and it's not minified)
  • (doesn't include eve it's not minified)
  • (doesn't include eve it's minified)

Where to start

Check Raphael-boilerplate to see examples of loading.

Raphael can be loaded in a script tag or with AMD:

define([ "path/to/raphael" ], function( Raphael ) {
  console.log( Raphael );


Versions will be released as we gather and test new PRs. As there are a lot of browsers being supported it might take a while to accept a PR, we will use the feedback from other users too.

You can use the raphaelTest.html to try things, you need to start a server in the root dir to start testing things there. Something like running python -m SimpleHTTPServer in the raphael directory and hitting http://localhost:8000/dev/raphaelTest.html with the browser. You should run npm run start before this can work.


Related Projects


Copyright and license

Copyright © 2008-2013 Dmitry Baranovskiy (

Copyright © 2008-2013 Sencha Labs (

Licensed under the MIT ( license.

  • raphael breaks if loaded via require-js.

    raphael breaks if loaded via require-js.

    Raphael also breaks if requires merely existent on the page. If require is not undefined (and in case requirejs is loaded, require is defined), eve won't be added to the global scope.

    opened by iwyg 70
  • getBBox throws blocking error in Firefox

    getBBox throws blocking error in Firefox

    Firefox 3.0.11 i am loading both prototype and jquery libraries prior to loading raphael 0.8. jquery is in noconflict mode. i don't know if any of that matters, but providing it just in case.

    i'm using the uncompressed raw file for ease of hunting down issues.

    when i load up 0.8 in FF i get this error:

    Error: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMSVGLocatable.getBBox]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: :: anonymous :: line 1135" data: no] Source File: Line: 1135

    when i click through, the offending line it takes me to is actually line 1136 which is: var bbox = this.node.getBBox();

    opened by janoserdelyi 19
  • Clipping Path

    Clipping Path

    I'm trying to use Raphaeljs to simplify the PHP code I use to generate SVG (for IE I used to convert to images the result). However I couldn't find how to generate clip path with Raphael. Is it possible? Here is for instance a sample SVG clip path:

    opened by Soloren2001 18
  • Added textPath support to both SVG and VML.

    Added textPath support to both SVG and VML.


    Added textPath support to both SVG and VML. The SVG version was mostly done by myself, but the VML one was done by Mathieu Le Gac-Olanié and Patrick Dura.

    The function textPath takes the following parameters:

    • pathString : the path on which to draw the text
    • text : the text to display

    Example usage: var txt = paper.textPath("M25, 100 C10,10 175,10 175,100", "Hello text-on-a-path world!"); txt.attr({'fill': '#FF0000', 'font-size': 15});


    Oussama Mubarak

    opened by semiaddict 15
  • attribute d: Expected number, “….68028259277344CNaN,NaN,NaN,NaN,…”">

    "arrow-end" throw an Error: attribute d: Expected number, “….68028259277344CNaN,NaN,NaN,NaN,…”

    Library: "raphael": "^2.2.8"

    Summary: all work as expected apart from the console error

    Description: I want to render a line with an arrow end, but when adding "arrow-end" attribute, it throw an Error: "attribute d: Expected number, "….68028259277344CNaN,NaN,NaN,NaN,…". weirdly when adding "arrow-start" attribute there is no error

    I tried already to change the stroke-width, it didn't help

    This is the code: (don't see an error in console through the js fiddle, only in my repository)

    this.canvas = Raphael('grid', '100%', '100%');
    drawLine(this.canvas, path1, duration, arrowAtrr, color, strokeDasharray, strokeWidth, arrowend).then(() => this.resolve(item, callback))
    const drawLine = (canvas, pathStr, duration = 1000, attr = arrowAtrr, color = Color.GREEN, strokeDasharray = '-', strokeWidth = 4, arrowend = "block-wide-long") => {
        return new Promise((resolve) => {
            attr.stroke = color;
            attr['stroke-dasharray'] = strokeDasharray;
            attr['stroke-width'] = strokeWidth;
            attr['arrow-end'] = arrowend
            var guidePath = canvas.path(pathStr).attr({ stroke: 'none', fill: 'none' });
            var path = canvas.path(pathStr).attr({ stroke: 'none', fill: 'none' });
            var totalLength = guidePath.getTotalLength(guidePath);
            var startTime = new Date().getTime();
            var intervalLength = 25;
            var intervalId = setInterval(function () {
                var elapsedTime = new Date().getTime() - startTime;
                var thisLength = elapsedTime / duration * totalLength;
                var subPathStr = guidePath.getSubpath(0, thisLength);
                attr.path = subPathStr;
                path.animate(attr, intervalLength);
                if (elapsedTime >= duration) {
            }, intervalLength);


    Any idea how to solve that error?

    opened by hadasmaimon 14
  • paper.text(x,y,text) creates <tspan> element with

    paper.text(x,y,text) creates element with "doubled" dy value.

    In raphael.js on lines 6352 - 6354:

    var bb = el._getBBox(),
      dif = a.y - (bb.y + bb.height / 2);
    dif &&, "finite") && $(tspans[0], {dy: dif});

    I can reproduce the issue whereby the value of bb is calculated as:

    height: 0
    width: 0
    x: 0
    y: 0

    a.x = 65 and a.y = 65, resulting in a caluculated dy value of 65, which essentially doubles the y offset for the given <tspan>.

    In _getBBox() the value of is "" and this.node.getBBox() returns the object seen above.

    opened by Siyfion 14
  • pathBBox() returns reference to cached bbox

    pathBBox() returns reference to cached bbox

    pathBBox() is returning a reference rather than a copy of the cached bbox value, which means the value can be accidentally written over.

    Because this function is also used internally for Element.getBBox(), it's causing weird bugs like:

    console.log(paper.text(0,0,"hello").getBBox().x); // => -11 Correct!
    var a = paper.text(0,0,"hello");
    console.log(a.getBBox().x); // => -11 Correct!
    console.log(paper.text(0,0,"hello").getBBox().x); // => -1 Wrong!

    Simple fix:

    -            return pth.bbox;
    -           return clone(pth.bbox);
    opened by motownread 14
  • undrag method doesn't work

    undrag method doesn't work

    Can't unregister drag action. for example,

    var R=Raphael("test",200,100); var img=R.image("test.png",0,0,100,100); function move(){ (any move action) }; function start(){ (any start action) }; function up(){ (any up action) }; img.drag(move,start,up); img.undrag(move,start,up);

    So simple example.But,undrag method doesn't work and I still can drag this image.

    Ofcourse,other "un" method (such as unclick) works well.

    opened by zero3401 14
  • ember-cli eve is not defined

    ember-cli eve is not defined

    Hi i'm developing an ember app using ember-cli and i'm trying to use Raphael.js but when i put it in my page with

    <script src=""></script>

    it will return

    Uncaught ReferenceError: eve is not defined 

    i read that Raphael.js have problem with RequireJS, could be related?

    someone have used it successfully?

    thanks a lot

    opened by Tamiyadd 12
  • 2.1.0: Paper.setViewBox()'s

    2.1.0: Paper.setViewBox()'s "fit" parameter, if set to true, is mistranslated in terms of the underlying "preserveAspectRatio" SVG attribute value

    true should translate to "none" (i.e., no preservation of aspect ratio, stretching/shrinking to fill available space - assuming that was the intent of this parameter value - not clear from the documentation), whereas it currently translates to "meet", which is not a valid value .

    Different browsers deal with this invalid value differently:

    • iOS 6.01, Chrome 23.0.1271.97, and Firefox 17.0 effectively act as if "xMidyMid meet" had been specified; i.e., they DO preserve the aspect ratio and center the result - an option that setViewBox() doesn't even expose.
    • Android browsers, by contrast, do seem to act as requested (no preservation of aspect ratio; content stretches/shrinks to fill the container).

    By contrast, specifying "false" for fit presumably acts as intended (though the exact intended behavior is not clear from the documentation): aspect ratio is preserved and the result is placed in the top left corner.

    Workaround - SVG ONLY:

    Assign the correct value to the preserveAspectRatio SVG attribute directly. For instance, if p is your Raphael paper, call the following after having called setViewBox() with fit set to true:

    p.canvas.setAttribute('preserveAspectRatio', 'none');

    Incidentally, this approach also allows you to specify values not currently exposed by setViewBox(). For instance, if you wanted to preserve the aspect ratio and center the result (without clipping), invoke the following:

    p.canvas.setAttribute('preserveAspectRatio', 'xMidYMid meet');

    See for all possible values.

    P.S.: Sadly, irrespective of this bug, even with preseveAspectRatio set to the valid value none, not all SVG-capable browsers act the same; see

    opened by mklement0 12
  • With these commits, g.Raphael is working

    With these commits, g.Raphael is working

    I don't know why you removed this code from Raphael (I'm still new to this very useful library), but after putting it back (with some adjustments), it makes g.Raphael to work.

    And Raphael seems to work too, as far as I tested.

    Integration tests are not passing, but they're not passing with the 2.0 release either, so I guess I did not break anything here.

    opened by ghusse 12
  • How to know the m or M point of path from all of points?

    How to know the m or M point of path from all of points?

    Hello, I have an svg picture like this, with M and m in the path. I can get all the points by calling Raphael.getTotalLength(path), but how can I know from which point is the path behind m. I want to know all the absolute coordinate points of the inner border of the svg, so that I can get a data format similar to the following [[points of the outer border], [points of the inner border]].

    This is how I achieved it. I can get all the points, but I can’t distinguish which are the points of the inner frame and which are the points of the outer frame.

    let points = [];
    for (let i = 0; i < Raphael.getTotalLength(path); i += step_point) {
        const point = Raphael.getPointAtLength(path, i);

    I really look forward to your answers, thank you!

    opened by penggelies07 3
  • how to add svg barcode into workspace?

    how to add svg barcode into workspace?

    i have doubt in adding a barcode into raphael js but i found jsbarcode with svg format but i don't how to add into raphael js workspace.

    1.raphael js

    var paper = Raphael('holder'); 2.svg

    var svg= document.createElement("svg");
    JsBarcode(svg, "Hi world!");
    how to add svg into raphael js?
    opened by ibalaji777 2
  • Initial drag on elements in touch mode leads to scrolling of the complete webpage

    Initial drag on elements in touch mode leads to scrolling of the complete webpage

    When a draggable element is touched and moved for the first time, then the webpage also scrolls. Of course it happens only if the website can scroll, e.g. the page is larger than the visible area.

    I can reproduce it with the code below in the ZIP in Chrome. On Desktop you just turn on the mobile emulator in the dev console. I have created a pretty high div so the webpage itself is higher than the visible area. Now click on the blue or red item and drag it vertically -> The page will also scroll. If you drop it and then drag the same item again, it will not scroll. But if you switch to the next item it will scroll again.

    Is there anything I can do better in the code? This is just a small test, copied from some codepen, but I got the same problem in a real project which is too large to post here.

    opened by KilamMalik42 1
  • v2.3.0(Aug 14, 2019)

  • v2.2.8(Mar 24, 2019)

    • Downgraded qunit to v1 to make tests work again
    • Updated webpack to build dist
    • Updated supportsTouch query from modernizr #1084
    • Fix drag offsets passed to "drag.start" from touch drags in elproto.drag #1101
    • Fix memory leak in Element.removeData() #1077
    • Adding react-raphael to related projects #1072
    • Added icons back to raphael's website
    • Updated version in banner and raphael's website
    • Updated site refs to https
    Source code(tar.gz)
    Source code(zip)
  • v2.2.7(Nov 12, 2016)

  • v2.2.4(Sep 30, 2016)

  • v2.2.3(Sep 30, 2016)

  • v2.2.0(Apr 13, 2016)


    • Webpack build
    • Added tests! (thanks @TheCloudlessSky)
    • Strict error on method
    • Cross-browser gradient fixes
    • Reduce transform string to avoid long parsing times after several transformations
    • raphael.amd.js as main in package.json.
    • raphael.amd.js version to work with Browserify.
    • Can't set glow with opacity 0
    • Using origin and pathname with gradient urls, urls with # weren't being resolved correctly
    • Defined nodeps version, and changed how raphael is loaded
    • Set stop-opacity in gradient defs
    • Fixed rounding issue in RGB formatter
    Source code(tar.gz)
    Source code(zip)
Dmitry Baranovskiy
JavaScript Artist
Dmitry Baranovskiy
The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey

Paper.js - The Swiss Army Knife of Vector Graphics Scripting If you want to work with Paper.js, simply download the latest "stable" version from http:

Paper.js 13.5k Dec 30, 2022
Java library for use with Chart.js javascript library enables integration with the excellent Chart.js library from within a Java application. Usage example In Java: BarDataset datase

Marceau Dewilde 102 Dec 16, 2022
JavaScript 3D library.

three.js JavaScript 3D library The aim of the project is to create an easy to use, lightweight, cross-browser, general purpose 3D library. The current

Mr.doob 87.9k Jan 2, 2023
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Fabric.js Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. I

Fabric.js 23.6k Jan 3, 2023
The JavaScript library for modern SVG graphics.

Snap.svg · A JavaScript SVG library for the modern web. Learn more at Follow us on Twitter. Install Bower - bower install snap.svg npm - n

Adobe Web Platform 13.6k Dec 30, 2022
A JavaScript library dedicated to graph drawing

sigma.js - v1.2.1 Sigma is a JavaScript library dedicated to graph drawing, mainly developed by @jacomyal and @Yomguithereal. Resources The website pr

Alexis Jacomy 10.3k Jan 3, 2023
JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.

GoJS, a JavaScript Library for HTML Diagrams GoJS is a JavaScript and TypeScript library for creating and manipulating diagrams, charts, and graphs. S

Northwoods Software Corporation 6.6k Dec 30, 2022
mxGraph is a fully client side JavaScript diagramming library

NOTE 09.11.2020 : Development on mxGraph has now stopped, this repo is effectively end of life. Known forks: https:

JGraph 6.5k Dec 30, 2022
🔥 JavaScript Library for HTML5 canvas based heatmaps

heatmap.js Dynamic Heatmaps for the Web. How to get started The fastest way to get started is to install heatmap.js with bower. Just run the following

Patrick Wied 5.9k Jan 2, 2023
Cubism.js: A JavaScript library for time series visualization.

Cubism.js Cubism.js is a D3 plugin for visualizing time series. Use Cubism to construct better realtime dashboards, pulling data from Graphite, Cube a

Square 4.9k Jan 3, 2023
A javascript library that extends D3.js to enable fast and beautiful visualizations.

d3plus D3plus is a JavaScript re-usable chart library that extends the popular D3.js to enable the easy creation of beautiful visualizations. Installi

D3plus 1.6k Dec 2, 2022
A plugin for the jQuery javascript library to generate small sparkline charts directly in the browser

jQuery Sparklines This jQuery plugin makes it easy to generate a number of different types of sparklines directly in the browser, using online a line

Gareth Watts 1.2k Jan 4, 2023
Ember Charts 3.5 2.3 L2 JavaScript A powerful and easy to use charting library for Ember.js

Ember Charts A charting library built with the Ember.js and d3.js frameworks. It includes time series, bar, pie, and scatter charts which are easy to

Addepar 793 Dec 7, 2022
A lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology.

GraphicsJS GraphicsJS is a lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology. Overview Quick Start Articles

AnyChart 973 Jan 3, 2023
Simple yet powerful JavaScript Charting library built using d3.js

uvCharts Simple, robust, extensible JavaScript charting library built using d3 designed to help developers embed, build charts in less than couple of

Imaginea 267 May 20, 2021
Reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser.

roughViz.js is a reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser, based on D3v5, roughjs, and handy. Why? Use

Jared Wilber 6.4k Jan 4, 2023
:bar_chart: Re-usable, easy interface JavaScript chart library based on D3.js

billboard.js is a re-usable, easy interface JavaScript chart library, based on D3 v4+. The name "billboard" comes from the famous billboard chart whic

NAVER 5.4k Jan 1, 2023
danfo.js is an open source, JavaScript library providing high performance, intuitive, and easy to use data structures for manipulating and processing structured data.

Danfojs: powerful javascript data analysis toolkit What is it? Danfo.js is a javascript package that provides fast, flexible, and expressive data stru

JSdata 4k Dec 29, 2022
React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.

React Konva React Konva is a JavaScript library for drawing complex canvas graphics using React. It provides declarative and reactive bindings to the

konva 4.9k Jan 9, 2023