smil2css

SVG animation supporting IE10+ and .

smil2css

SVG animation supporting IE10+ and <noscript>.

Unfortunately, Internet Explorer does not support SVG animation (SMIL). Other solutions like FakeSmile use JavaScript to recreate the animation. Not only does this close doors to users with JavaScript disabled, it requires an extra download and performs slower than CSS animations. This utility converts SMIL to CSS and works in any Internet Explorer version that supports CSS' animation (IE10+).

Note: Currently, only frame-by-frame animations are converted. read more

This plugin requires NodeJS ~0.10. There're two ways to use it:

To install, type this at the command line:

npm install smil2css -g

After that, check out the help for available options:

smil2css -?

To install, type this at the command line:

npm install smil2css --save-dev

After that, it can be used as a function for single-use or as a class for multiple conversions.

Upon successful conversion, a String will be returned. If an issue is encountered, false will be returned.

var result = smil2css.convert(svgString, options);
 
if (result)
{
    console.log("success");
}
var smil2css = require("smil2css");
 
var instance = new smil2css(options);
 
var result1 = instance.convert(svgString1);
var result2 = instance.convert(svgString2, customOptions);
var result3 = instance.convert(svgString3);
  • More animation attributes than just display,visibility
  • Convert from and to to keyTimes
  • Nested <svg> elements
  • and some possibly impossible features:
    • <animatecolor>,<animatemotion>,<animatetransform>,<mpath>,<set> elements
    • Unmatching begin attribute values among sibling animation elements
    • Unmatching repeatCount attribute values among sibling animation elements
  • 0.1.0 initial release