Playing with SVG via Raphael

A few weeks ago I spent some time looking into animating content on the web using Raphael (this eventually formed the basis of some challenges for the team I’m in at work).

The demos are pretty basic:

Hand Draw http://www.david-lewis.com/test/svg/handdraw.php
This small script takes a SVG path, and chops it up into an array, then loops through the array building up the path data. Sprinkle in a bit of Raphael’s animation, and you’ve got something that looks like the path being drawn.

It’s very crude and basic, but works well when combined with graph drawing.

Load SVG file http://www.david-lewis.com/test/svg/loadfile.php
SVG is great, but doesn’t render on all browsers (hello IE). So this little test shows how you might break down the SVG file and run it through Raphael so it works almost anywhere. I based the demo on an Inkscape file, not on the spec for SVG. Hence it works nicely with SVG files from Inkscape but not much else (sorry).

The long term goal with something like this is to allow designers to use a nice image editor, and the developer to just treat the images as external assets… therefore, if the designer wants to make changes, they don’t have to hassle the developer.

Both these demos can only be considered proof of concepts. I will return to the SVG parsing, once I’ve played around more with animating content without  the need for Flash (next stops: Canvas, and good old jQuery Javascript animation).

Leave a Reply