Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web.
It uses SVG for creating graphics.

SVG and Canvas

SVG(Scalable Vector Graphics) is an XML-based image format that is used to define two-dimensional vector based graphics for the Web. It is scalability, can be printed with high quality at any resolution.

Canvas is raster based image format, like bitmaps, used to visual images on the fly.

SVG and Canvas have several methods for drawing paths, boxes, circles, text, and graphic images.

  • SVG:

    1
    2
    3
    <svg width="100" height="100">
      <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>

  • Canvas:

    1
    2
    3
    4
    5
    var c = <span class="built_in">document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(200,100);
    ctx.stroke();

SVG can be drawn by other generators, like Illustrator or some online generator. After finished, codes can be included in HTML file. It can be mofified by script and CSS. Canvas image is using JS as a pen to draw something on webpage. It can be modified only by script.

Raphaël elementary

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Each of the following examples create a canvas
// that is 320px wide by 200px high.
// Canvas is created at the viewport’s 10,50 coordinate.
var paper = Raphael(10, 50, 320, 200);
// Canvas is created at the top left corner of the #diagram element
// (or its top right corner in dir="rtl" elements)
var paper = Raphael(document.getElementById("diagram"), 320, 200);
// Same as above
var paper = Raphael("diagram", 320, 200);
// Image dump
var set = Raphael(["diagram", 320, 200, {
    type: "rect",
    x: 10,
    y: 10,
    width: 25,
    height: 25,
    stroke: "#f00"
}, {
    type: "text",
    x: 30,
    y: 40,
    text: "Dump"
}]);

Method 1

Getting window size, and set every graphic parameters into relative length: 

1
2
3
4
5
6
7
8
9
10
11
12
var windowWidth = $(window).width();
var windowHeight = $(window).height();
// parameters for graphic
var viewboxLength = (windowWidth > windowHeight ? windowHeight : windowWidth)*0.9;
var centerX = viewboxLength/2;
var centerY = viewboxLength/2;
var radius = viewboxLength/5;
var storkeWidthG = viewboxLength/20;
var paper = Raphael('diagram', viewboxLength, viewboxLength), // Raphael('DOM container', width, height)
    rad = radius, //radius of first arc
    defaultText = 'Spatial-temporal analysis',
    speed = 250;

Method 2

Raphaël supplies with .setViewBox(x, y, w, h, fit) to adjust SVG size.
x(number) new x position, default is 0.
y(number) new y position, default is 0.
w(number) new width of the canvas
h(number) new height of the canvas
fit(boolean) true if you want graphics to fit into new boundary box

1
2
3
4
5
6
7
8
var windowWidth = $(window).width();
var windowHeight = $(window).height();
var paper = Raphael('diagram', viewboxLength, viewboxLength), // Raphael('DOM container', width, height)
    rad = radius, //radius of first arc
    defaultText = 'Spatial-temporal analysis',
    speed = 250;
// where svg size is adjusted
paper.setViewBox(x, y, windowWidth, windowHeight, true);

Reference

[1] How Can i scale Raphael js elements on window resize using jquery
[2] What is HTML5 Canvas?
[3] Raphaël Reference