Eyes Above The Waves

Robert O'Callahan. Christian. Repatriate Kiwi. Hacker.

Thursday 19 February 2009

SVG Filter Effects For Plain Old HTML

I forgot to mention this earlier, but Boris Zbarsky a while ago implemented SVG external document references, so that SVG features such as filter, mask, clipPath, use, fill, stroke, marker, and textPath can refer to elements in other documents. A nice benefit is that our support for SVG effects for HTML can now be very easily applied to Plain Old HTML documents. For example, check out this example in a Firefox 3.1 trunk build. The key piece of magic is

textarea {
filter:url(effects.xml#drop-shadow);
}


Comments

David
I love that feature : it makes HTML styling much more powerful without even a new spec.
It's really great !
David
...btw when you land SMIL support, remember to make it work with (X)HTML also. not only SVG, ok ?
thanks!
stelt
That is awesome.
When will we see it in a release?
Robert O'Callahan
"Real Soon"
Daniel
Sort of playing the Devil's advocate here: isn't the use of nonstandard (as far as HTML and CSS 2.1/3 go), unprefixed attributes bad? Why, for example, is this more acceptable than IE's "filter" proposal?
Robert O'Callahan
Because really all I'm doing is allowing two existing standards to work together. I also ran it by the SVG WG and other browser developers and they liked the idea. I would have used a -moz prefix except this approach is such a small increment on existing standards there is no new syntax to add a prefix to!
OTOH Microsoft's filter feature was entirely their own invention, it did not reuse existing standards, its design and nomenclature was tailored around their DirectX code, they did not collect feedback from standards organizations or other vendors, they did not propose it for standardization, and they did not use a prefix despite having the opportunity to do so.