How to use RaphaelJS to draw an existing vector image

Question

I am starting to learn RaphaelJS, but it does seem to be a steep learning curve as I am not very versed in javascript. But it seems like such a good library that I am willing to put the time in to learning it.

What I would like to know is:

1. How can one use an existing vector image in RaphaelJS

   (If I download a "vector" image can I tell RaphaelJS to draw the coordinates?)

2. Is there a way to convert an image (jpg, gif or whatever) into a vector graphic that RaphaelJS can use.

My confusion is that on the sample pages the images are drawn in coordinates which makes sense to me. However, if a download a vector image from the net, where are the coordinates?

I am aiming to make images on my web page that are clickable, much like the RaphaelJS example of the map of Australia that has a hover event on it.

Answer 1

The easiest vector image format to read is svg since svg is XML and XML is just plain text.

Convert your vector image to svg using something like Illustrator or Inkscape and then open it in your text editor. You'll find that most of the shapes like <path /> and <rect /> have a direct equivalence in Raphael. For example, the <path /> object defines path coordinates in its d attribute and it has the same syntax as paths in Raphael:

<path
  style="fill:none;stroke:#000000;stroke-width:12"
  d="m 116.6,832.4 c 0,0 5.8,85.5 127.6,87.0 121.8,1.4 137.7,-79.7244"
/>

You can convert that to Raphael's:

var path = paper.path(
    "m 116.6,832.4 c 0,0 5.8,85.5 127.6,87.0 121.8,1.4 137.7,-79.7244"
);
path.attr({fill:'none',stroke:'#000000';'stroke-width':12});

Take note though of any transformations applied to objects and groups (the <g /> element), you'll have to repeat them in Raphael. Say for example you see the following:

<path
  style="fill:none;stroke:#000000;stroke-width:12"
  d="m 116.6,832.4 c 0,0 5.8,85.5 127.6,87.0 121.8,1.4 137.7,-79.7244"
  transform="translate(-124,370)"
/>

then after creating the path in Raphael you'll need to apply the translate():

path.translate(-124,370);

You can probably write a script to convert svg files to Raphael syntax or load the svg file in the browser as text and use the browser's XML DOM parser to process it and draw it using Raphael.