David Leunen has released a new JavaScript library to fake SMIL for modern browsers that do not yet support declarative animation (Firefox 3.0- and Safari 3.0-). The nice thing about this is that it uses existing standards, so that when Mozilla and WebKit finally implement SMIL, this script will avoid executing. On that day, suddenly animations will become less processor-intensive. I'm all about progressive enhancement, but I'm also not above occasionally faking it a little to experiment with cool features.

As with all experiments of late, you need a cool browser like Opera, Firefox or Safari to see this stuff. I'd be interested to hear if Konqueror 4.0 supports it. Internet Explorer will just not do, I'm afraid.

I currently use SMIL in my menu above, in the leering FakeSmile icon to the right (which I've inlined to see what happens when it gets aggregated in feed readers like Planet Venus), and now in my comment box when you focus and blur it.

Yes, this is just shiggles and not very productive - but I'm not alone in experimenting with some advanced web features on my blog.

Yes, SMIL intermixes "presentational"-type markup with "content" markup - but SMIL Timesheets looks to me like an attempt by the SYMM Working Group to address this. Maybe something in the future for FakeSmile to support?

And yes, it's kinda fun. SMIL is the blink tag of the new millenium...

Oh, and in case you missed it above, I've started using SMIL in my blog's comment textarea - that's XHTML, not SVG. The FakeSmile library supports a limited subset of SMIL functionality in not just SVG content but on any attribute in a XML-based language (provided you properly namespace where required, like in XHTML):

<textarea rows="5" ...>
  <smil:animate attributeName="rows" from="5" to="10" dur="350ms" begin="focus" end="blur" fill="freeze" />

That's what makes XHTML so attractive to me - the X is for eXtensibility. While I still support the effort, the current HTML 5 activity is mostly focused on SVG (and to a lesser extent MathML) integration with text/html. I hope they do address more flexible extensibility within HTML5 at a later date. It would be great if someone had already done HTML+SMIL so there was some basis off which to work. Snarkiness aside, I will admit to not understanding the ins-and-outs of namespaces within HTML and all the problems it poses, but I'm trying to learn in my spare time...

One semi-amusing footnote: You won't see the textarea expand when you focus it in Opera. This is because Opera supports SMIL-in-SVG already, so the FakeSmile script is not executed (short-circuited). It would be great if Opera went ahead with XHTML+SMIL support. I'm not sure why that hasn't happened yet...

[Update: David has fixed his library to allow Opera to use the library for XHTML+SMIL as well as interpolate between properties with units (i.e. 2em).]

§440 · March 16, 2008 · JavaScript, RIA, Software, SVG, Technology, Web · Tags: , , · [Print]

4 Comments to “Fake Smile”

  1. Phil says:

    Cool, but tabbing is broken in Opera 9.5 beta. When I tab from the Name field above the comment box, Opera jumps up and puts a black box around the smile. Also, I got nothing inside the Opera feedreader, but this happens in other places on occasion too.

  2. @Phil: Thanks, I’ve raised a bug with the Opera guys on this one. It must have to do with the SMIL because this page does not have that problem.

  3. @Phil: Also, I neglected to include the proper namespaces in my feed and have only recently fixed that (last night). I just tried and noticed how bad my feed looks in Opera 9.5’s feed viewer (the clip art is typically full window and the entry text does not display properly. I’ll have to raise a bug with them on that eventually.

  4. Bruce says:


    Remember the Carousel animation you asked about at http://tech.groups.yahoo.com/group/svg-developers/message/59312 ? Fake-smile does a pretty good job of rendering that animation. I am impressed!