Question

I’ve just started looking at the raphael.js library for building SVG graphics in the browser. I touched on regular svg this week in the hopes of building a quick proof of concept for a product configurator. I took a line drawing of a jacket that I had in illustrator, saved it as SVG and then copy and pasted the SVG code into the HTML page.

http://jamesbillings.me/testjacket.html (doesn’t work in IE)

please view the source and take a look how I’m doing it, it’s very simple.

The clever thing that SVG and illustrator does is that is saves the SVG with grouping or what seemed to be called <g id's> and then styles the SVG with CSS. This makes it easy to quickly hit the g id’s with a bit of jquery to make parts dissapear or change color. However, I’m stuggling to do this same thing in rapheal with a drawing done in illustrator.

I’d like to offer IE8 viewers this benifit which is why I’m looking at rapheal. does anyone knwo if this is doable without creating the image in code.

Answer 1

I’m not a regular Raphaël user (I generally do only straight SVG and vanilla DOM JS), but from what I can tell Raphaël explicitly does not support groups (SVG <g> elements), as they do not exist in VML land.

The closest you can come is to create a set and push all the elements into that so that your JS can style them at once. It’s not the convenience of items matched through CSS rules, and it isn’t “live” (adding an item to a set does not cause it to get the attributes previously applied to that set), but you couldn’t do that with VML anyhow.

If you must support IE8, I’m afraid this is your best option.

Or, you could “nudge” your IE8 users to upgrade to IE9 and forget the Raphaël abstraction layer altogether and experience the raw power of pure SVG. 😉