F2F/Auckland 2011/Filter effects

From SVG

Filter Effects

See http://www.w3.org/Graphics/fx/wiki/Filter_effects

Filter Effects on HTML

There has been a lot of discussion on this topic in email and in face to face meetings. I am attempting to list a high level summary of these as well as make a proposed solution based on those discussion. The motivation is to have the larger discussion both at the face-to-face as well as beyond.

I feeled compelled to recognize Robert O'Callahan's and Tab Atkins work on the subject. http://weblogs.mozillazine.org/roc/archives/2008/06/applying_svg_ef.html http://webkit.org/blog/182/css-reflections/

Overview

The current web development pipleline often includes graphics created by 3rd party tools. These tools are all beginning to or already support HTML5, including SVG. They have a rich set of effects that are familiar to designers. With support of SVG Filter Effects on HTML, designers can now define these filters and web developers can apply them to content or the Web. In fact there are at least 50 or more effects available to designers in tools like Adobe Illustrator or Inkscape. The CSS Working Group has begun discussions on how to introduce more canned effects (in addition to box-shadow and text-shadow). These effects are already composable by underlying primitive SVG Filters. With an appropriate mapping syntax, the browsers can more quickly implement CSS canned effects.

Defintions

Canned effects - filters with names familliar to either web developers or designers (e.g. text-shadow) Primitives - the SVG filters defined in the specification that are composable

Scenarios

Web Developers want to provide graphically rich experiences to their web pages, similar to those that can be achieved with SVG Filters. They currently have some available to them (opacity, text-shadow, box-shadow) but more are desirable. These scenarios are simplified in that I believe they are well understood. An embossed look to a title on a web page A glow is applied to images that the user hovers over to note selection A video is greyed out or blurred A image shows a reflection

Proposal

  • Formalize support for filter="url(#filter)" syntax as provided for by Robert
  • Support the inclusing of SVG <defs> as part of <link> in HTML
    • [That would essentially make SVG a new type of stylesheet. What other options do we have if we want to allow reuse of SVG filters? Allowing SVG markup inside of CSS stylesheets? Accepting that it must be a part of the main document? --Erik Dahlström 11:54, 21 February 2011 (UTC)]]
    • [I believe that HTML WG is already considering different types of link, so this doesn't mean that it would be a style sheet. I will follow up --Patrick Dengler
  • Support filter-target attribute to identify targetting content|other
  • Provide mapping for existing and already identified Filters on HTML content
  • Map new canned filter proposals
    • box-reflect
    • text-reflect
    • box-emboss
    • text-emboss
    • box-blur
    • text-blur
    • box-engrave
    • text-engrave
    • box-glow
    • text-glow
    • box-light
    • text-light