What is SVG ?
SVG is an XML specification for describing 2-D vector graphics.
What is SMIL ?
It is part of the SVG specification. It lets you animate your graphics without the need to program a script, by using xml elements. It is called declarative animations. (see the example on the homepage)
What is FakeSmile ?
It is a javascript library that makes SVG animations work in browsers that support SVG and scripting, but not declarative animations.
Who can use it ?
If you are a website developer, you might want to make your animations work for more users.
If you are a websurfer using IE, you might want to make animations work in your browser.
How do I use it in my browser ?
This program is a user-javascript. It means it can be executed whenever you browse any web page.
In Firefox, it can be achieved with the Greasemonkey extension (but now Firefox supports SMIL natively).
In Safari, you can use GreaseKit (but now Safari supports SMIL natively too).
To download FakeSmile, you just have to get smil.user.js on github.
How do I use it on my graphics ?
Simply download the script and add this to your document :
<script type="text/ecmascript" xlink:href="smil.user.js"/> (see the example on the homepage)
It works on plain svg documents as well as in inline svg.
The extension .user.js may be recognized as a userjs to install. Right-click to download. (You're a developer, you should know how to download a file).
It won't collide with user-agents that already support animation.
Isn't it sad/ironic/inefficient to emulate declarative animations with scripts ?
You are right. Animated SVG should be a first-class citizen on the web, as it is an open and standard alternative to Flash. This script will consume a lot of resources on your computer, and it might lag. If you are an end user seeking a better experience, I suggest you try Opera. This browser supports SMIL natively and more efficiently. If you are a developer, use this script only if you have to. Don't worry : your SVG will degrade gracefully in browsers not supporting animations. That is, it won't be animated, simply.
My computer is unresponsive ! my CPU is at 100% !
See above. If you decide to keep going with FakeSmile, you can change the frame rate. The very first line of the script defines the number of milliseconds between each frame. The default is 25. If it makes you computer unresponsive, try to use a higher number (e.g 50). But be aware that it'll make the animations more choppy.
The animations are choppy !
See above. If you decide to keep going with FakeSmile, you can change the frame rate. The very first line of the script defines the number of milliseconds between each frame. The default is 25. If you find it too slow, and wants smoother animations, try to lower the number. But be aware that it'll make your CPU more active, and might make your computer unresponsive.
Is there an extension instead ?
Extension mechanism is intrinsically insecure. This script runs in the secure javascript sandbox of your browser. Even if you don't trust me and don't look what's inside, it can't do you any harm. But if you want to trust me, here is the extension.
What is supported ?
The script is in development. Check the status page.
Why doesn't my animated SVG work ?
  1. First, test your animation in a SMIL compliant renderer like the Opera browser or Batik. These are free and provide great implementations of SMIL. Opera makes it really easy to debug your XHTML document.
  2. Second, check if the feature you use is implemented. If it's not, feel free to contribute.
  3. Third, check if their already is a bug for the problem you're experiencing.
  4. Fourth, check if it's not because of a bug in Firefox (or another renderer you're using). For Gecko, I list the bugs that make the official tests fail.
If your script still doesn't work and you think it should, please report the bug.
Can the script animate XHTML ?
Yes it can. This library is actually not limited to SVG. You can animate the attributes of any XML document, including your XHTML pages. This makes HTML+SMIL work in Opera too. You will need to use one of these namespaces for the SMIL elements :
  • http://www.w3.org/2000/svg
  • http://www.w3.org/2001/smil-animation
  • http://www.w3.org/2001/SMIL20
  • http://www.w3.org/2001/SMIL20/BasicAnimation
  • http://www.w3.org/2001/SMIL20/SplineAnimation
  • http://www.w3.org/2005/SMIL21
  • http://www.w3.org/2005/SMIL21/BasicAnimation
  • http://www.w3.org/2005/SMIL21/SplineAnimation
See Jeff Schiller's blog's comment textarea for an example.
Can I make my animations work in Internet Explorer ?
Yes, for IE > 8.
When I wrote this library, Opera was the only browser supporting SMIL natively, and IE did not even support SVG. So the target browsers were all the others. Since then, they all implemented SMIL natively, except Microsoft. But MS implemented SVG in version 9. So when I'm writing this, IE has become the only target browser for FakeSmile.
That said, you can find plugins to enable SVG in older versions of Internet Explorer. They might work with FakeSmile, as it uses only open standards. It should work with any SVG 1.1 conformant layout engine (i.e. ECMAScript 3, DOM level2).
Where does the name come from ?
The name FakeSmile was proposed by Jeff Schiller (who convinced me to publish this work). It refers to SMIL and the fact that it is unnatural to emulate declarative animations with a scripting language.
Who did this ?
I'm David Leunen and Helder Magalhães also commited some development. I thank Jeff Schiller for his support. The logo is by Nicu Buculei.
Can I modify/redistribute the code ?
FakeSmile is distributed under the GPLv3 license or MIT license.