Well, I'm Back: SVG Filter Effects For Plain Old HTML

Friday, 20 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);
}

6 comments:

DavidFeb 19, 2009 02:51 PM
I love that feature : it makes HTML styling much more powerful without even a new spec.
It's really great !
ReplyDelete
DavidFeb 19, 2009 02:53 PM
...btw when you land SMIL support, remember to make it work with (X)HTML also. not only SVG, ok ?
thanks!
ReplyDelete
steltFeb 19, 2009 03:18 PM
That is awesome.
When will we see it in a release?
ReplyDelete
Robert O'CallahanFeb 19, 2009 04:58 PM
"Real Soon"
ReplyDelete
DanielFeb 19, 2009 09:28 PM
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?
ReplyDelete
Robert O'CallahanFeb 20, 2009 01:30 AM
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.
ReplyDelete

Add comment