It’s Only Software

A month ago, I posted about using inline SVG to simulate the Web 2.0 “shiny floor technique” (SFT) for a mirrored reflection effect on page headings. I have not had time to perfect it, but I figured I’d publish it and see if people are interested in enhancing the technique. Note that this has only been tested thus far on 2 browsers that natively support inline SVG, Firefox 2 and Safari.

Demo Page

For those not running one of the aforementioned browsers, here’s what it looks like:

There are several reasons why this is currently impractical for real-world use (although I’d like to change this):

• This technique will only work if the page is served up as XHTML (content-type application/xhtml+xml, aka “true XHTML”). Since some browsers do not like proper XHTML, this will prevent a large percentage of your audience from seeing this technique in action.
• Currently, the inline SVG is embedded in the page.
• The demonstration of this does not use true headings (h1, etc.)
• The text “SWOOSH” is repeated twice in the page – once in the heading and once in the SVG.

The latter three will be changed in the next published iteration of this technique. In the next iteration, I plan on adding Javascript so that this effect can be added unobtrusively on top of headings on an existing page. This will also allow the effect to degrade gracefully on browsers that do not support inline SVG.

Based on the way that inline SVG is implemented in current browsers (requiring support in the render engine of XML namespaces), I’m not sure whether the requirement of serving the content as true XHTML is a technical hurdle that can be overcome.

As far as I’ve been able to research, this is the first time anything has been published that uses SVG for this type of effect, using only plain text. Prior examples of the SFT have required Photoshop, required Flash, or only work on images.

I’m excited to take it to the next level (as noted above) and hopefully provide something that people find useful.

Ran across this site with some nice examples of text manipulation in SVG. I bet, with a modern browser, you could implement the shiny floor technique using DOM-scripted SVG. I’ll be working on this and hopefully post some results shortly.