{"id":11625,"library":"raphael","title":"Raphaël: JavaScript Vector Graphics Library","description":"Raphaël is a JavaScript library designed to simplify working with vector graphics on the web. It uses SVG for modern browsers (Firefox, Safari, Chrome, Opera) and VML for older Internet Explorer, providing a consistent API across different rendering engines. The current stable version is 2.3.0, released in 2018. The library is largely considered feature-complete but is no longer actively maintained, with the last code changes dating back several years. Key differentiators include its cross-browser compatibility, especially its VML fallback for legacy IE, and its relatively small footprint. Development is dormant, with releases historically occurring sporadically as PRs were gathered and tested. It relies on the `eve` library for custom event handling.","status":"abandoned","version":"2.3.0","language":"javascript","source_language":"en","source_url":"git://github.com/DmitryBaranovskiy/raphael","tags":["javascript","svg","vml"],"install":[{"cmd":"npm install raphael","lang":"bash","label":"npm"},{"cmd":"yarn add raphael","lang":"bash","label":"yarn"},{"cmd":"pnpm add raphael","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Custom event handling for Raphaël's internal mechanisms, included by default in `raphael.js` and `raphael.min.js`.","package":"eve","optional":true}],"imports":[{"note":"Raphaël is primarily a global-first library. While UMD compliant, it's not designed for modern ES Modules. For bundled environments, use `require` or rely on the global.","wrong":"import Raphael from 'raphael';","symbol":"Raphael","correct":"<script src=\"path/to/raphael.js\"></script>\n// Then Raphael is available globally"},{"note":"This imports the version that includes 'eve'. For a 'no-deps' version, use `require('raphael/raphael.no-deps')` and manage 'eve' separately.","wrong":"import * as Raphael from 'raphael';","symbol":"Raphael (CommonJS)","correct":"const Raphael = require('raphael');"},{"note":"The README suggests `define` for AMD usage, passing the resolved module as an argument to the callback function. The `raphael.amd.js` file is the main entry point for AMD and Browserify since v2.2.0.","wrong":"require(['raphael'], function(R) {});","symbol":"Raphael (AMD)","correct":"define([ \"path/to/raphael\" ], function(Raphael) {\n  // Use Raphael here\n});"}],"quickstart":{"code":"<html>\n<head>\n  <title>Raphaël Quickstart</title>\n  <script src=\"https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js\"></script>\n</head>\n<body>\n  <div id=\"holder\"></div>\n  <script>\n    window.onload = function () {\n      // Create a canvas with a width of 320px and a height of 200px\n      // and place it in the element with the ID 'holder'.\n      var paper = Raphael(document.getElementById('holder'), 320, 200);\n\n      // Draw a circle at x=50, y=50 with a radius of 40\n      var circle = paper.circle(50, 50, 40);\n      circle.attr({\n        fill: '#f00',\n        stroke: '#fff',\n        'stroke-width': 5\n      });\n\n      // Draw a rectangle at x=100, y=20 with width=100, height=60\n      var rect = paper.rect(100, 20, 100, 60);\n      rect.attr({\n        fill: '#0f0',\n        stroke: '#000',\n        'stroke-width': 2,\n        opacity: 0.7\n      });\n\n      // Add text\n      var text = paper.text(250, 100, \"Hello Raphaël\");\n      text.attr({\n        font: '20px Arial',\n        fill: '#00f'\n      });\n    };\n  </script>\n</body>\n</html>","lang":"javascript","description":"This quickstart demonstrates how to initialize a Raphaël canvas, draw basic shapes like circles and rectangles, and add text to the canvas using a simple HTML file with a CDN import."},"warnings":[{"fix":"Avoid direct calls to `R.ninja`. Review usage if migrating from older versions; this method was not part of the public API.","message":"The `R.ninja` method, previously used for certain internal operations, will now throw a strict error if called directly. This indicates an internal change that might affect highly customized implementations.","severity":"breaking","affected_versions":">=2.2.0"},{"fix":"For new projects, consider actively maintained alternatives like SVG.js, Paper.js, or Snap.svg. For existing projects, thoroughly test across target browsers and use polyfills if necessary.","message":"Raphaël is largely unmaintained. While functional, it may encounter compatibility issues with very new browser versions or modern JavaScript features. Security updates are highly unlikely.","severity":"gotcha","affected_versions":">=2.3.0"},{"fix":"Ensure `eve` is loaded *before* `raphael.no-deps.js` when using the no-deps distribution, typically via a separate script tag or an AMD/CommonJS module loader.","message":"The default build (`raphael.js`, `raphael.min.js`) includes the `eve` dependency. If using `raphael.no-deps.js` or `raphael.no-deps.min.js`, `eve` must be provided separately, or core functionality (like event handling) will fail.","severity":"gotcha","affected_versions":">=2.2.4"},{"fix":"Update any bookmarks or references to `https://dmitrybaranovskiy.github.io/raphael/` for the current project page.","message":"The original project website, `raphaeljs.com`, is no longer active. The official documentation and project information can now be found on the GitHub Pages site.","severity":"deprecated","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `<script src=\"path/to/raphael.js\"></script>` is placed before any code attempting to use `Raphael`. For bundled environments, use `const Raphael = require('raphael');` and ensure your bundler processes it correctly.","cause":"The Raphaël library script was not loaded or executed before being accessed, or it's being used in an environment where the global `Raphael` variable is not available (e.g., an ES Module context without proper bridging).","error":"Raphael is not defined"},{"fix":"Load `eve.js` from `https://cdnjs.cloudflare.com/ajax/libs/eve/0.4.2/eve.min.js` (or a similar source) before loading `raphael.no-deps.js`. Alternatively, use the standard `raphael.js` (or `.min.js`) distribution, which includes `eve`.","cause":"This error typically occurs when using `raphael.no-deps.js` (or `.min.js`) without explicitly loading the `eve` library beforehand.","error":"Uncaught ReferenceError: eve is not defined"},{"fix":"Ensure the target DOM element for the Raphaël canvas exists and is accessible when `Raphael(element, width, height)` is called. Wrap your Raphaël initialization code in a `window.onload` or `DOMContentLoaded` event listener if executed from the `<head>`.","cause":"This usually indicates that `paper` is not a valid Raphaël canvas object, or it was not initialized correctly, perhaps due to a DOM element not existing when `Raphael()` was called.","error":"TypeError: paper.path is not a function"}],"ecosystem":"npm"}