Slightly ajar

Recently I joined the SVG-IG Working Group at the W3C. Unlike the regular SVG WG, the Interest Group’s main task is not making specs, but to foster interest in the developer/designer community and to provide feedback to the SVG WG on the needs of those designers and developers. It is fairly inline with the work I already do for Opera in promoting web standards and the Open Web, and providing feedback to our own developers. SVG is one of those technologies that shows a lot of promise, but hasn’t taken off in the mainstream like its brothers and sisters, HTML, CSS and JavaScript. There are numerous reasons for this, not least not support in IE (as of yet), but they are issues that are solvable. Plus if SVG doesn’t become viable this year, we get to punch Mike (TM) Smith in the face. I guess I have to help an ex-colleague from getting a battering.

I'd admit to not being anywhere close to being a worlds expert at SVG. I’m only just learning myself—which is a good thing, as I can see and remember the difficulties in using and learning SVG as I interact with the community. As part of my studying of the SVG spec, I've been teaching myself about alpha transparent gradients, animations, filters and XLink in SVG. The product of that will be a couple of in depth articles on how to use the techniques, but I'd first like to show you a demo I’ve made combining some of these aspects of SVG. You of course need a decent browser to view the demo, so if your browser sucks, you'll need to upgrade (sorry. This actually includes the latest release version of Firefox, as I used CSS 3 selectors to make my life easier):

Unless you are a lighting fast reader, the animation will probably have already run by the time you've scrolled to the point where you can see the image, so you can see it in all its unscaled glory by going to my SVG animations and filters experiment file directly. You'll also have to use this link if you are using Opera 9.6 or below, or Safari, as embedding with the img element is not supported. Opera 10 and above work as expected. With the file being a vector graphic (apart from the referenced JPEG image), all the elements scale and stay in proportion, whether you see it at its native size in the link or in the 50% shrank version embedded in the page with the img element.

While the effect I used isn't particularly useful—you probably don't want your image caption and link to scroll off the screen—it is fairly trivial to achieve:

• The gradient is set with the linearGradient element, and CSS to set the stop-color and stop-opacity. I used CSS 3 nth-of-type here to avoid adding lots of IDs, so it currently doesn't work in Firefox. In a production environment it would be simple to use the more basic selectors that Firefox 3 supports.
• The fade in and fade out effect is done with the animate element, which is applied to the CSS opacity property using attributeType="css" and attributeName="opacity". You can simply set the starting and ending values of the animation, how long it should take, and when it should begin.
• The scrolling of the caption is done also with the animate element, but this time by using attributeType="XML" and attributeName="width". You'll notice a attribute fill="freeze", which basically tells the browser to keep the element in the state it was at the last frame of the animation, instead of resetting back to the default value after the animation has ended. Otherwise the caption would appear again after it scrolls off the screen.
• The shadow behind the One Web text is applied using the filter element, which seems quite complex, but it creates a blurred version of the alpha channel of the text using feGaussianBlur, offsets the result of that filter by 2px using feOffset, and then blends the result of that filter with the original text using feBlend. This is a bit more complex than the CSS text-shadow but isn't so hard when you know how. Safari 4 doesn't seem capable of using these filters, so you'll just get flat text in that browser.

As I mentioned previously, I'll explain these concepts in more detail at a later date, and will attempt to make the results more cross browser accessible.