[svg-developers] Future SVG Filter Ideas

[James Churchman [e-mail] [svg-developers]]

Hi List, I have several things that bug be when using filters, so i thought
i would document my thoughts :

*A) Combine feBlend spec with the CSS Blend modes*
CSS Blend modes currently allow the very powerful : *normal ( reset
), **screen,
overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light,
difference, exclusion, hue, saturation, color,luminosity*
However the blend modes offered in feBlend are very limited only
offering : *normal,
multiply, screen, darken, lighten*
Given that browsers already offer these very powerful blend modes these
could be combined and offered to the user in feBlend as well. e.g. :

<feBlend mode="color | saturation ( etc.. would be great) ">

*B) Inline feImage*
One of the most powerful features of SVG filters is feImage, especially
when importing other referenced parts of the document. This is still often
quite a verbose experience as you have to place external parts in a defs
tag, give them an id, reference that id etc...
It would be far cleaner if you could inline svg directly inside a special
filter tag. Maybe simply :

<feInlineImage height="50" width="50">
<circle cx="10" cy="10" r="15" fill="black" />
</feInlineImage>

*C) Importing / Referencing other filters in a filter*
It would be incredibly useful to be able to, like you can with an feImage
or a use element for graphical nodes, pull in another filter's filter
nodes, and therefore combine multiple filters into one far more powerful
filter. Maybe a "feUse" or "feCombine", e.g. in this very simple example :

<defs>
<filter id="blur">
<feGaussianBlur stdDeviation="10" />
</filter>
<filter id="hue_rotate">
<feColorMatrix type="hueRotate" values="180" />
</filter>
<filter id="blur_and_hue_rotate">
<feCombine input="url(#hue_rotate)"/>
<feCombine input="url(#blur)"/>
</filter>
</defs>



*D) Multiple filters per element*
Currently if you wish to apply multiple filters to an element, you
currently have to wrap the element in multiple group G elements, and place
each filter in turn on each element. The experience could be a lot better
if the filter attribute could contain a list of filters separated by spaces
maybe ( and with a definition of which order to apply them in) e.g. :

<elem filter="url(#filter_1) url(#filter_2) url(#filter_1)" />



Would very much welcome your comments!

James

['David Dailey' [e-mail] [svg-developers]]

Hi James,



I had wanted to take time to think about your suggestions more fully, to make sure I understood them properly and that they weren’t in any way redundant with things already in SVG1.1, but absent having had that time, I think it makes sense to reply rather than to leave a void. I’m not sure what all is planned for SVG2.0, nor if the SVG WG is still welcoming public suggestions. Recently there have been suggestions that advocates for new features should first persuade particular browser makers of the merits, since it is ultimately those entities who must provide advocacy for new features to move forward.



On the other hand, what you’ve suggested seems perfectly reasonable, logical and worthwhile to me. It might not hurt to bounce them off the Working Group at www-***@w3.org.



Regards

David





From: svg-***@yahoogroups.com [mailto:svg-***@yahoogroups.com]
Sent: Saturday, December 12, 2015 7:45 PM
To: svg-***@yahoogroups.com
Subject: [svg-developers] Future SVG Filter Ideas





Hi List, I have several things that bug be when using filters, so i thought i would document my thoughts :



A) Combine feBlend spec with the CSS Blend modes

CSS Blend modes currently allow the very powerful : normal ( reset ), screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color,luminosity

However the blend modes offered in feBlend are very limited only offering : normal, multiply, screen, darken, lighten

Given that browsers already offer these very powerful blend modes these could be combined and offered to the user in feBlend as well. e.g. :



<feBlend mode="color | saturation ( etc.. would be great) ">



B) Inline feImage

One of the most powerful features of SVG filters is feImage, especially when importing other referenced parts of the document. This is still often quite a verbose experience as you have to place external parts in a defs tag, give them an id, reference that id etc...

It would be far cleaner if you could inline svg directly inside a special filter tag. Maybe simply :



<feInlineImage height="50" width="50">

<circle cx="10" cy="10" r="15" fill="black" />

</feInlineImage>



C) Importing / Referencing other filters in a filter

It would be incredibly useful to be able to, like you can with an feImage or a use element for graphical nodes, pull in another filter's filter nodes, and therefore combine multiple filters into one far more powerful filter. Maybe a "feUse" or "feCombine", e.g. in this very simple example :



<defs>
<filter id="blur">
<feGaussianBlur stdDeviation="10" />
</filter>

<filter id="hue_rotate">
<feColorMatrix type="hueRotate" values="180" />
</filter>

<filter id="blur_and_hue_rotate">
<feCombine input="url(#hue_rotate)"/>

<feCombine input="url(#blur)"/>

</filter>
</defs>







D) Multiple filters per element

Currently if you wish to apply multiple filters to an element, you currently have to wrap the element in multiple group G elements, and place each filter in turn on each element. The experience could be a lot better if the filter attribute could contain a list of filters separated by spaces maybe ( and with a definition of which order to apply them in) e.g. :



<elem filter="url(#filter_1) url(#filter_2) url(#filter_1)" />







Would very much welcome your comments!



James





[Non-text portions of this message have been removed]

[James Churchman [e-mail] [svg-developers]]

Hi David, thanks very much for your reply !

Reading threw it looks posable that svg feBlend blend modes have been combined already in Compositing and Blending Level 1 already .. I will have to check fully now !
http://www.w3.org/TR/compositing/

This is the only one which is not posable with simple workarounds so it's great if it's getting finalised. More reeding required.

The others all just require workarounds to achieve the same effect .. Eg you can create an image in a define, Id it, then url it in an feImage. You can duplicate filter nodes rather than having an import shortcut. Plus you can have a set of groups and apply each filter in turn .. All of which work but could be much more elegant

I will do more research then email the w3 svg list

Ps if you remember we met at the graphical web before in the uk & I will try to make the one this summer !

Thanks again

James

Sent from my iPhone

Post by 'David Dailey' ***@zoominternet.net [svg-developers]
Hi James,
I had wanted to take time to think about your suggestions more fully, to make sure I understood them properly and that they weren’t in any way redundant with things already in SVG1.1, but absent having had that time, I think it makes sense to reply rather than to leave a void. I’m not sure what all is planned for SVG2.0, nor if the SVG WG is still welcoming public suggestions. Recently there have been suggestions that advocates for new features should first persuade particular browser makers of the merits, since it is ultimately those entities who must provide advocacy for new features to move forward.
Regards
David
Sent: Saturday, December 12, 2015 7:45 PM
Subject: [svg-developers] Future SVG Filter Ideas
A) Combine feBlend spec with the CSS Blend modes
CSS Blend modes currently allow the very powerful : normal ( reset ), screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color,luminosity
However the blend modes offered in feBlend are very limited only offering : normal, multiply, screen, darken, lighten
<feBlend mode="color | saturation ( etc.. would be great) ">
B) Inline feImage
One of the most powerful features of SVG filters is feImage, especially when importing other referenced parts of the document. This is still often quite a verbose experience as you have to place external parts in a defs tag, give them an id, reference that id etc...
<feInlineImage height="50" width="50">
<circle cx="10" cy="10" r="15" fill="black" />
</feInlineImage>
C) Importing / Referencing other filters in a filter
<defs>
<filter id="blur">
<feGaussianBlur stdDeviation="10" />
</filter>
<filter id="hue_rotate">
<feColorMatrix type="hueRotate" values="180" />
</filter>
<filter id="blur_and_hue_rotate">
<feCombine input="url(#hue_rotate)"/>
<feCombine input="url(#blur)"/>
</filter>
</defs>
D) Multiple filters per element
<elem filter="url(#filter_1) url(#filter_2) url(#filter_1)" />
Would very much welcome your comments!
James
[Non-text portions of this message have been removed]