Re: Filter Templates

On Jan 11, 2011, at 11:34 AM, Simon Fraser <smfr@me.com> wrote:

> On Jan 11, 2011, at 11:27 AM, Sylvain Galineau wrote:
> 
>>> From: public-fx-request@w3.org [mailto:public-fx-request@w3.org] On
>>> Behalf Of Brad Kemper
>>> Sent: Tuesday, January 11, 2011 10:22 AM
>>> To: www-style list; public-fx@w3.org
>>> Subject: Filter Templates
>>> 
>>> Let me begin by saying I know very little about SVG, but I am trying to slowly
>>> learn more.
>>> 
>>> There has been talk before about "canned" SVG filter effects. I would like to
>>> propose (or at least, discuss the merits of) accomplishing this via a templating
>>> element inside the filter element, that defines what values it takes from the
>>> CSS declaration.
>>> 
>>> Thus, for the following SVG filter that defines a certain drop shadow effect:
>>> 
>>> 	<filter id="bradsDropShadow" x="0" y="0" width="1" height="1"
>>> 			  filterUnits="userSpaceOnUse">
>>> 		  <feTemplate values="feFlood.flood-color && [feOffset.dx
>>> feOffset.dy feGaussianBlur.stdDeviation]"/>
>>> 		  <feFlood flood-color="black" in="SourceAlpha"
>>> result="Colorized" />
>>> 		  <feGaussianBlur stdDeviation="2" in="Colorized" />
>>> 		  <feOffset dx="2" dy="2" />
>>> 		  <feMerge>
>>> 			   <feMergeNode />
>>> 			   <feMergeNode in="SourceGraphic" />
>>> 		  </feMerge>
>>> 	</filter>
>>> 
>>> Given the above "feTemplate" values, it could be used in a declaration like
>>> this:
>>> 
>>> filter: url(#bradsDropShadow) 4px 5px;
>>> 
>>> ...and the two lengths would be mapped to the "dx" and "dy" of feOffset.dx,
>>> and the omitted values would take their default values from the regular filter
>>> values ("black" for flood-color and "2" for stdDeviation in the above example),
>>> as long as the order and so forth of the feTemplate values were satisfied.
>>> 
>>> Could that work?
>> 
>> Like Tab, +1 on concept. My first thought was to apply SVG Parameters to 
>> Filters. (See http://www.w3.org/TR/2009/WD-SVGParamPrimer-20090616/ for SVG
>> Parameters). 
> 
> That seems like the right approach, but how do you name the parameters from CSS?
> You'd have to do something like:
> 
> filter: url(#myCoolFilter, param1=10px, param2=20px);

Agreed that using SVG Parameters is the right approach (I wasn't aware of that before). Still, what you wrote above for the CSS part doesn't seem very appealing. What if there was still an added element in the SVG to indicate value order, so that the CSS part can be shorter and more CSS-like? Thus: 

<feTemplate values="param1 && [param2 param3 param4?]"/>

...where Param1, etc. are defined as per the SVG Parameters spec. The syntax of the "values" attribute would by similar to that used in CSS module specs (with the ampersands, pipes, etc.), so it would be familiar. Thus, if param1 above is supposed to be a color, then it would be valid if it came at either the beginning or end of the CSS value, and you could still have this:

filter: url(#bradsDropShadow) 4px 5px red;

Or maybe like this:

filter: bradsDropShadow(4px 5px red);

Or like this:

filter: url(#bradsDropShadow 4px 5px red);