Animation In Stand Alone Svg (with Ecmascript (and Jquery?!))

I created an SVG using inkscape and now I want to add some animation according to some logic to it. I know JavaScript quite well and have basic experience with jQuery. So I thought

Solution 1:

I would recommend to try the Raphaël library. The API was inspired by jQuery so it should be familiar to you.

Also keep in mind that IE doesn't support SVG so having an SVG-only solution won't be portable across major browsers. Raphaël takes care of it for you - it uses VML on IE and SVG on other browsers. It works on Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

You can create SVG using Inkscape and then import the paths to your Raphaël code. See the talk by Dmitry Baranovskiy at JSConf 2010.

Solution 2:

I agree with the last answer. Drop your SVG into the converter at

http://irunmywebsite.com/raphael/svgsource.php

This will put your SVG into html4 and it will work on all browsers except android. You can animate the paths with Raphael.

The output from the converter is all Raphael / SVG / VML