SVG animation supporting IE10+ and <noscript>
JavaScript HTML
Latest commit 4ab55b2 Sep 15, 2015 @stevenvachon stevenvachon node v4 testing
Permalink
Failed to load latest commit information.
bin v0.2.0-pre Jun 11, 2014
lib changed repo name in links Aug 18, 2014
test v0.2.0-pre Jun 11, 2014
.gitignore v0.1.0 Mar 5, 2014
.travis.yml node v4 testing Sep 16, 2015
README.md node v4 testing Sep 16, 2015
license node v4 testing Sep 16, 2015
package.json node v4 testing Sep 16, 2015

README.md

smil2css NPM Version Build Status Dependency Status

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