After Rob called my code ugly, I decided to update my technique for embedding SVG into HTML and it finally crystallized into a nice solution for me. I hesitate to say "embedding" because that might imply that I condone the <embed> tag, when in fact I only use it at gunpoint. Rob came up with a suitable term for including SVG in a HTML document: inlaying (as opposed to inlining). Read the rest of this entry ...
I posted a week ago about how there are some blogs/sites out there that roll their own web statistics and display them SVG. After reading this challenge on the weekend, I decided to work on my own, roughly mimicking these designs. Read the rest of this entry ...
I put my two SVG scripts that I hacked on the last couple weeks into more formal JavaScript library forms so that others can reuse them. Read the rest of this entry ...
Some people didn't like the fact that the snow in my scripted SVG blog header was causing the Firefox CPU load to rail. My excuse was that I was trying to push out some content before the Holiday rush hit and I had to go travelling. Given that the season is now over, I spent about 20 minutes optimizing the script. My apologies to all those CPU fans out there for the last couple weeks...
Other than minor JavaScript tweaking (like removing parsing of strings into floats and declaring variables outside of loops, etc), I decided to just have all snowflakes active at once and to slow down the timer interval. From my side, it looks like it did the trick for Firefox 1.5 but not Opera 9 TP1 (Adobe SVG Viewer was never an issue), but I'll wait to hear from my critics 😉
If you wanted to optimize this even more at the cost of perceived randomness it would be quite simple to do in SVG. I'll probably save another entry for that, but basically it involves adding flakes randomly beforehand to a few static "snow panes" (<g> elements) and then simply sliding each pane down the image at differing speeds and positions (you can add a random drift too each pane's descent too). I think it would still look pretty cool and only require updating the position of (let's say) 4 snow "panes" instead of 50 snow flakes every tick.
First Post of 2006! This is now officially a multi-year blog. 😉
I decided to take my own advice at the bottom of this article and update my JavaScript dragging technique to be more generic and library-like so that it's theoretically easy to make SVG entities draggable. It's done now and you can see the results on this demo (works only in Firefox 1.5 and Internet Explorer + Adobe SVG Viewer). I've included some nested objects so you can see how they move when they are dragged.
