Apparently the Chicago area is supposed to be hit with the biggest snowstorm in 28 years for December 1st. So, in celebration, I've turned on the snow in my blog header. For those with cool web browsers like Firefox 1.5+ or Opera 9 (or even the not-cool browser Internet Explorer with the Adobe SVG Viewer plugin) you might need to right-click in the image frame to force reload ... or wait until your browser's cache pops. For those curious, the SVG does not display at all using Emiasys' Renesis plugin ... pooh.
Anyway, sorry for the CPU hit, but 'tis the season. If anyone can let me know if a Safari nightly build displays the snow yet, that would be awesome - you can consider it your Christmas present to me.
Hm, I wonder if I should try to modify the library to use the Dojo2D API in the Dojo toolkit for that true cross-browser effect. That might prove to be a fun little project and a good way to dip my toe in the Ajax toolkit pool...
[Update: Merry Christmas to me. Allan Jardine tells me in his comment below that it's snowing in Safari too. Great news!]
Wow – for this you got me out of the feed reader and onto your site. It’s making me cold! Love that accumulation, almost half a centimetre in the header…
Hope you can stay in and be warm ’til it melts.
Hello,
Just to let you know, the snow in your header does indeed work in the latest safari nightly. It eats processor time (around 40%) but perhaps that is to be expected. But the question is – how the heck did you do it – I was under the impression that the animation module in safari svg was still not done. Do you use animation or is it all scripted?
Either way, looks great!
Allan
Thanks for the update Allan, that’s great to hear!
Yes it’s all scripted via a library I wrote: http://www.codedread.com/code.php#svgsnow
The heavy CPU might be because of the opacity that I use and other possible culprits are how I add a snowflake to the bottom for accumulation (currently there’s an ugly JS hack in there due to lack of DOM support). I have other thoughts on ways to speed it up. I just need to find a few cycles to test in FireFox and Opera.
Hi Jeff,
The library is very impressive, and the animation looks great from it. Would it be possible to have a pseudo-random path created in svg which defines the fall for a particular flake, and then simply duplicate that random path generator to get the desired effect? It perhaps wouldn’t be as compatible though, although perhaps less processor heavy? (not sure – still fairly new to svg).
There are just one or two little show stoppers for me with svg in browsers at the moment, animation in Safari, and foreignObject in Opera/Firefox. But it’s coming along nicely. Enjoying your Opera articles as well 🙂
Allan
Allan,
If declarative animation were supported in Firefox, I would consider what you suggest (moving the snowflakes along a path that is generated by script). However, until that time I’m stuck with scripting the movement, flake by flake.
I hope that foreignObject gets implemented in Firefox 3 (now that they’ve switched to pure Cairo everywhere, rotation/scaling/skewing of HTML content shouldn’t be so difficult). Anyway, I agree that SVG still has a ways to go (to me, native SVG in IE is the ultimate show-stopper) but it’s still a very fun technology to play with, especially with all the browsers now out there that support some flavour of it (Opera and all Mozilla variants like SeaMonkey, Camino, Flock, Netscape, etc). Any word on when Safari+SVG goes gold?
Hello,
Thanks for the information about declarative animation and Firefox. I assume that this is a feature that Opera supports. I have to say I’m most impressed with the Opera implementation, its come a long with with version 9!
As far as I can tell there is no release planned with Safari+SVG at the moment (at least the Webkit pages don’t show it). Indeed the SVG status page was last updated Apr 28th, 2006. So I’m a little concerned that its stalled. On the other hand Apple is expected to release Safari 3 with Mac OS 10.5, so I rather hoping that there will be a big boost in SVG support in there. If not then I at least expect the current webkit nightly features to be in Safari 3. So perhaps early next year we will see the mass Mac market having some kind of SVG support by default.
Allan
Allan,
Yes, Opera is currently my favourite SVG implementation – they really impressed me with version 9 of their browser. Let’s see if they can keep up the momentum, there’s still lots of work left.
One thing you should note is that any time I’ve played with a Mac (like in an Apple store) I think that Safari comes bundled with Adobe SVG Viewer so Mac users are lucky in that respect. Too bad Microsoft didn’t do the same thing with Internet Explorer, maybe SVG adoption would have taken off by now.
I don’t think Webkit+SVG is stalled from what I can tell on their mail archives. When is MacOS 10.5 going to be released?
Jeff
Jeff,
I’m surprised that Safari comes bundled with Adobe SVG Viewer, given that it doesn’t officially support Safari and from what I understand it is a bit buggy. But the more people that can see SVG content the better! I totally agree that SVG in IE would be the killer roll. Maybe IE8…? Or perhaps not.
Although Webkit+SVG does indeed appear to not have stalled completely, I can’t really tell how much progress has been made since the status page is now, presumably, out of date. Although, at least the snow works!
MacOS 10.5 should be out in Spring next year, so perhaps about February/March 2007.