Saturday, 21 February 2009

Filters, Libraries And The Web

Daniel Glazman writes, somewhat in passing:

We can now apply SVG filters to all content, including HTML 4, in Firefox but I have mixed feelings about the fact you have to know HTML, CSS and SVG to apply such a filter. Seems to me overkill, and too far away from the original spirit of the Web.

He didn't enable comments on that post, so I'll reply here: you don't need to know SVG to use filters. You can just paste filter code from a cookbook into an XML file --- or use an XML file from a library --- and refer to that file from your CSS and HTML. This is not only easy and reasonable; SVG filters provide a rich vocabulary of composable operators, so they're much more flexible and powerful than providing ten canned filter keywords to handle all the author needs that the CSS WG can think of.

You could perhaps reinvent SVG filters with CSS syntax, but I don't see that as a real win for author understanding.

Generally in computer science we prefer to create a set of composable primitives with clean semantics, on top of which libraries are built to make frequent tasks easy, over trying to anticipate every possible need and encoding a feature for each one. Unfortunately CSS has often taken the latter course ... partly because the Web's mechanisms for code reuse are weak. But external document references give us a reuse mechanism that makes using a library of SVG effects quite convenient, IMHO.



Posted by Robert at 12:27 AM
Labels:

14 comments:

  1. Instead of using an external reference, would using a data: uri of an xml file work?
    Oh the irony if it does, since svg filters don't work in a data: uri of an svg directly.
    ReplyDelete
  2. Robert O'CallahanFeb 20, 2009 05:46 AM
    I don't think that works, but I'm not sure.
    ReplyDelete
  3. "partly because the Web's mechanisms for code reuse are weak"
    Could I tie this together with Thunderhead?
    It would be ideal if browsers allowed us to create custom markup+CSS that would be interpreted/executed by javascript+canvas (or whatever) and that we could redistribute as standard libraries.
    There are various impediments to doing this right now. (For example, Firefox drops unknown CSS declarations.)
    Do you think it will ever be possible to have a graph.js library that would let you do something like this?:
    <style>lineplot { line: dotted; }</style>
    <script src="graph1.1.js"></script>
    <graph><lineplot data="0 0; 1 3; 2 2"/></graph>
    ReplyDelete
  4. data: URIs don't work, because they don't support a fragment identifier.... At least in Gecko.
    ReplyDelete
  5. @voracity: Flex 3 allows you to do some nice things around this, defining a custom tag in a namespace and then back it up with some code; Silverlight has a similar notion. Of course XUL + XBL has had this for awhile, and Microsoft Behaviors kicked off some of this thinking in the late 90s. It's never taken off on the mainstream web though for some reason, probably because theres no clear common mechanism.
    ReplyDelete
  6. Daniel is forgetting that you also have to know Javascript / HTTP / Atom/rss / ... in order to make a web page work nice.
    His thought is very common among developers but it's something that I really don't understand.
    Why do they think it would be simpler to learn a brand new syntax in CSS instead of learning SVG ?
    People always argue CSS is designed to be simple. I really think CSS is NOT simple anymore. Since CSS2, I always have to do lots of trials/errors to achieve what I want (especially for layouts).
    Is it the xml syntax that scares people ?
    I have mixed feelings about bloating the CSS spec. It's becoming monstruous. Developers will have to know new transforms and transitions syntaxes in addition of the already existing and powerful ones (svg filters and smil). Do we really want to reinvent the wheel all the time ?
    ReplyDelete
  7. Robert O&#39;CallahanFeb 20, 2009 03:07 PM
    XBL2 is currently our best shot at reusable DOM-level modules.
    ReplyDelete
  8. I've thought for a while now that CSS mostly seemed to be growing more baroque instead of more flexible, and that this would turn out to be suboptimal in the long run. It's nice to see someone who actually knows what he's talking about express similar sentiments.
    ReplyDelete
  9. @voracity
    >it would be ideal if browsers allowed us to create custom markup+CSS that would be interpreted/executed by javascript+canvas (or whatever) and that we could redistribute as standard libraries.
    This is exactly you can do with XBL. With XBL, you can create your own markup which have their own content, their own styles (CSS) their own behaviors (js) etc..
    http://www.w3.org/TR/xbl/
    ReplyDelete
  10. openclipart.org already has a section for people to place filters too, so there is some semblance of "libraries" for these things already available.
    I was playing with this the other day. Do external references allow any access to the external document. Can you apply a filter and then modify it to animate the filter (say to fade from black and white to color), or does that require that the filter be included in your document?
    ReplyDelete
  11. Robert O&#39;CallahanFeb 21, 2009 12:54 AM
    Currently there is no access to the external document. If you want to change the filter, you have to put it in your own document.
    ReplyDelete
  12. Thanks all. I will have to start playing around with XBL. I guess I'd avoided it because I was under the impression it was still in flux.
    ReplyDelete
  13. I heard noises about a year ago that Safari/webkit was implementing XBL 2. Did this ever land and become a reality? Is it in Safari 3 or Safari 4 beta? Has Firefox itself updated its XBL 1.0 implemention to 2.0, and if so, what version?
    ReplyDelete
  14. Robert O&#39;CallahanFeb 24, 2009 11:38 PM
    You're asking the wrong person about Webkit ... but AFAIK no XBL support has landed on Webkit trunk. We haven't implemented XBL2 yet but Jonas has it as his next #1 priority I believe.
    ReplyDelete

Subscribe to: Post Comments (Atom)