webframes / smil2css

SVG animation supporting IE10+ and <noscript>

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

Note: CSS is not compatible with some SMIL features. read more

Check out the examples.

Getting Started

This utility requires Node.js >= 0.10. There're two ways to use it:

Command-Line Usage

To install, type this at the command line:

npm install smil2css -g

After that, check out smil2css -? for available options. Typical usage might look like:

smil2css input.svg output.svg -c

Programmatic API

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 a known issue is encountered, an Error will be returned (not thrown).

Single Instance

var result = require("smil2css").convert(svgString, options);

if (result instanceof Error)
{
	console.log(result.message);
	
	// Additional information
	console.log(result.smil2css.element);
	console.log(result.smil2css.type);
	console.log(result.smil2css.wiki);
}
else
{
	console.log("success!");
}

Reusable Instances

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);

// Checking for errors is the same as in the above example

Status

Full feature list: here

Release History

• 0.2.0
  • support begin syncbase time values
  • convert from,to to values
  • better error reporting
  • support files previously processed with smil2css
  • removed task runner
• 0.1.0 initial release