Vector Graphics with RaphaelJS

RaphaelJS is a JavaScript library that provides an API for manipulating SVG, and SVG support for Internet Explorer. It achieves the latter by emulating SVG in Internet Explorer using VML.

SVG is a language for describing vector graphics in XML. SVG is a W3C specification and works well with HTML, CSS and JavaScript.

Setup

RaphaelJS is a JavaScript library so setting it up requires simply connecting to it in your code by linking to it.

The code below will draw a circle of radius 50 pixels at point (50, 50).

<html>
 <head>
 <title>Circle</title>
 </head>
 <body>
 <div id=”container”></div>
 <script src=”https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
 <script>
 paper = Raphael(‘container’, 100, 100);
 var circle = paper.circle(50, 50, 50);
 </script>
 </body>
</html>

<div id=”container”></div> contains a div element that the library will be drawing in.

paper = Raphael(‘container’, 100, 100); creates a canvas object on which to draw. You must do this first, as all future calls to drawing methods from this instance will be bound to this canvas.

The first argument in the function Raphael() is the id of the HTML element inside of which you would like to start drawing things.

var circle = paper.circle(50, 50, 25); creates a RaphaelJS SVG object inside the thing with id=”container” that is a circle which is 50 pixels from the top and left of the paper.

#scalable-vector-graphics #raphaeljs #coding #programming #javascript

Setup

medium.com

Vector Graphics with RaphaelJS