Re: Future SVG Filter Ideas
"James Churchman [email protected] [svg-developers]" <[email protected]> Wed, 16 Dec 2015 04:22:49 +0000
| Newsgroups | gmane.text.xml.svg.devel |
|---|---|
| Message-ID | <[email protected]> |
--Apple-Mail-DB2A193A-5950-4296-92CD-5AC219B2694F Content-Type: text/plain; charset=utf-8 Content-Transfer-Encoding: quoted-printable Hi David, thanks very much for your reply ! Reading threw it looks posable that svg feBlend blend modes have been combi= ned already in Compositing and Blending Level 1 already .. I will have to c= heck fully now ! http://www.w3.org/TR/compositing/ This is the only one which is not posable with simple workarounds so it's g= reat if it's getting finalised. More reeding required. The others all just require workarounds to achieve the same effect .. Eg yo= u can create an image in a define, Id it, then url it in an feImage. You ca= n duplicate filter nodes rather than having an import shortcut. Plus you ca= n have a set of groups and apply each filter in turn .. All of which work b= ut could be much more elegant I will do more research then email the w3 svg list=20 Ps if you remember we met at the graphical web before in the uk & I will tr= y to make the one this summer ! Thanks again=20 James=20 Sent from my iPhone > On 15 Dec 2015, at 20:35, 'David Dailey' [email protected] [svg-de= velopers] <[email protected]> wrote: >=20 > Hi James, >=20 > I had wanted to take time to think about your suggestions more fully, to = make sure I understood them properly and that they weren=E2=80=99t in any w= ay 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=E2=80=99m = not sure what all is planned for SVG2.0, nor if the SVG WG is still welcomi= ng public suggestions. Recently there have been suggestions that advocates = for new features should first persuade particular browser makers of the mer= its, since it is ultimately those entities who must provide advocacy for ne= w features to move forward.=20 >=20 > On the other hand, what you=E2=80=99ve suggested seems perfectly reasonab= le, logical and worthwhile to me. It might not hurt to bounce them off the = Working Group at [email protected].=20 >=20 > Regards >=20 > David >=20 > From: [email protected] [mailto:[email protected]= om]=20 > Sent: Saturday, December 12, 2015 7:45 PM > To: [email protected] > Subject: [svg-developers] Future SVG Filter Ideas >=20 > Hi List, I have several things that bug be when using filters, so i thoug= ht i would document my thoughts : >=20 > A) Combine feBlend spec with the CSS Blend modes >=20 > CSS Blend modes currently allow the very powerful : normal ( reset ), scr= een, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-li= ght, difference, exclusion, hue, saturation, color,luminosity >=20 > However the blend modes offered in feBlend are very limited only offering= : normal, multiply, screen, darken, lighten >=20 > Given that browsers already offer these very powerful blend modes these c= ould be combined and offered to the user in feBlend as well. e.g. : >=20 > <feBlend mode=3D"color | saturation ( etc.. would be great) "> >=20 > B) Inline feImage >=20 > One of the most powerful features of SVG filters is feImage, especially w= hen importing other referenced parts of the document. This is still often q= uite a verbose experience as you have to place external parts in a defs tag= , give them an id, reference that id etc...=20 >=20 > It would be far cleaner if you could inline svg directly inside a special= filter tag. Maybe simply : >=20 > <feInlineImage height=3D"50" width=3D"50"> >=20 > <circle cx=3D"10" cy=3D"10" r=3D"15" fill=3D"black" /> >=20 > </feInlineImage> >=20 > C) Importing / Referencing other filters in a filter >=20 > 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 node= s, and therefore combine multiple filters into one far more powerful filter= . Maybe a "feUse" or "feCombine", e.g. in this very simple example : >=20 > <defs> > <filter id=3D"blur"> > <feGaussianBlur stdDeviation=3D"10" /> > </filter> >=20 > <filter id=3D"hue_rotate"> > <feColorMatrix type=3D"hueRotate" values=3D"180" /> > </filter> >=20 > <filter id=3D"blur_and_hue_rotate"> > <feCombine input=3D"url(#hue_rotate)"/> >=20 > <feCombine input=3D"url(#blur)"/> >=20 > </filter> > </defs> >=20 > D) Multiple filters per element >=20 > Currently if you wish to apply multiple filters to an element, you curren= tly have to wrap the element in multiple group G elements, and place each f= ilter 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. : >=20 > <elem filter=3D"url(#filter_1) url(#filter_2) url(#filter_1)" /> >=20 > Would very much welcome your comments! >=20 > James >=20 > [Non-text portions of this message have been removed] >=20 >=20 --Apple-Mail-DB2A193A-5950-4296-92CD-5AC219B2694F Content-Type: text/html; charset=UTF-8 Content-Transfer-Encoding: quoted-printable <head> <style type=3D"text/css"> <!-- /* start of attachment style */ .ygrp-photo-title{ clear: both; font-size: smaller; height: 15px; overflow: hidden; text-align: center; width: 75px; } div.ygrp-photo{ background-position: center; background-repeat: no-repeat; background-color: white; border: 1px solid black; height: 62px; width: 62px; } div.photo-title=20 a, div.photo-title a:active, div.photo-title a:hover, div.photo-title a:visited { text-decoration: none;=20 } div.attach-table div.attach-row { clear: both; } div.attach-table div.attach-row div { float: left; /* margin: 2px;*/ } p { clear: both; padding: 15px 0 3px 0; overflow: hidden; } div.ygrp-file { width: 30px; valign: middle; } div.attach-table div.attach-row div div a { text-decoration: none; } div.attach-table div.attach-row div div span { font-weight: normal; } div.ygrp-file-title { font-weight: bold; } /* end of attachment style */ --> </style> </head> <html><head><meta http-equiv=3D"content-type" content=3D"text/html; charset= =3Dutf-8"></head><body dir=3D"auto"> <!-- |**|begin egp html banner|**| --> <br><br> <!-- |**|end egp html banner|**| --> <div>Hi David, thanks very much for your reply !</div><div><br></div><div>R= eading threw it looks posable that svg feBlend blend modes have been combin= ed already in <span style=3D"background-color: rgba(255, 255, 255, 0); font= -size: medium;">Compositing and Blending Level 1 already .. I will have to = check fully now !</span></div><div><a href=3D"http://www.w3.org/TR/composit= ing/">http://www.w3.org/TR/compositing/</a></div><div><br></div><div>This i= s the only one which is not posable with simple workarounds so it's great i= f it's getting finalised. More reeding required.</div><div><br></div><div>T= he 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 bu= t could be much more elegant</div><div><br></div><div>I will do more resear= ch then email the w3 svg list </div><div><br></div><div>Ps if you reme= mber we met at the graphical web before in the uk & I will try to make = the one this summer !</div><div><br></div><div>Thanks again </div><div= ><br></div><div>James </div><div><br><div>Sent from my iPhone</div></d= iv><div><br>On 15 Dec 2015, at 20:35, 'David Dailey' <a href=3D"mailto:ddai= [email protected]">[email protected]</a> [svg-developers] <<a = href=3D"mailto:[email protected]">[email protected]= om</a>> wrote:<br><br></div><blockquote type=3D"cite"><div> =20 <span style=3D"display:none"> </span> <div id=3D"ygrp-text"> =20=20=20=20=20=20 =20=20=20=20=20=20 <p>Hi James,<br> <br> I had wanted to take time to think about your suggestions more fully, to ma= ke sure I understood them properly and that they weren=E2=80=99t 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=E2=80=99m no= t 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 fo= r new features should first persuade particular browser makers of the merit= s, since it is ultimately those entities who must provide advocacy for new = features to move forward. <br> <br> On the other hand, what you=E2=80=99ve suggested seems perfectly reasonable= , logical and worthwhile to me. It might not hurt to bounce them off the Wo= rking Group at <a href=3D"mailto:[email protected]">[email protected]</a>. <br> <br> Regards<br> <br> David<br> <br> From: <a href=3D"mailto:[email protected]">svg-developers@yaho= ogroups.com</a> [<a href=3D"mailto:[email protected]">mailto:s= [email protected]</a>] <br> Sent: Saturday, December 12, 2015 7:45 PM<br> To: <a href=3D"mailto:[email protected]">svg-developers@yahoog= roups.com</a><br> Subject: [svg-developers] Future SVG Filter Ideas<br> <br> Hi List, I have several things that bug be when using filters, so i thought= i would document my thoughts :<br> <br> A) Combine feBlend spec with the CSS Blend modes<br> <br> CSS Blend modes currently allow the very powerful : normal ( reset ), scre= en, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-lig= ht, difference, exclusion, hue, saturation, color,luminosity<br> <br> However the blend modes offered in feBlend are very limited only offering := normal, multiply, screen, darken, lighten<br> <br> Given that browsers already offer these very powerful blend modes these cou= ld be combined and offered to the user in feBlend as well. e.g. :<br> <br> <feBlend mode=3D"color | saturation ( etc.. would be great) "><br> <br> B) Inline feImage<br> <br> One of the most powerful features of SVG filters is feImage, especially whe= n importing other referenced parts of the document. This is still often qui= te a verbose experience as you have to place external parts in a defs tag, = give them an id, reference that id etc... <br> <br> It would be far cleaner if you could inline svg directly inside a special f= ilter tag. Maybe simply :<br> <br> <feInlineImage height=3D"50" width=3D"50"><br> <br> <circle cx=3D"10" cy=3D"10" r=3D"15" fill=3D"black" /><br> <br> </feInlineImage><br> <br> C) Importing / Referencing other filters in a filter<br> <br> It would be incredibly useful to be able to, like you can with an feImage o= r 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 :<br> <br> <defs><br> <filter id=3D"blur"><br> <feGaussianBlur stdDeviation=3D"10" /><br> </filter><br> <br> <filter id=3D"hue_rotate"><br> <feColorMatrix type=3D"hueRotate" values=3D"180" /><br> </filter><br> <br> <filter id=3D"blur_and_hue_rotate"><br> <feCombine input=3D"url(#hue_rotate)"/><br> <br> <feCombine input=3D"url(#blur)"/><br> <br> </filter><br> </defs><br> <br> D) Multiple filters per element<br> <br> Currently if you wish to apply multiple filters to an element, you currentl= y have to wrap the element in multiple group G elements, and place each fil= ter in turn on each element. The experience could be a lot better if the fi= lter attribute could contain a list of filters separated by spaces maybe ( = and with a definition of which order to apply them in) e.g. :<br> <br> <elem filter=3D"url(#filter_1) url(#filter_2) url(#filter_1)" /><br> <br> Would very much welcome your comments!<br> <br> James<br> <br> [Non-text portions of this message have been removed]<br> <br> </p> </div> =20=20=20=20=20 =20=20=20=20 <!-- end group email --> </div></blockquote> <!-- |**|begin egp html banner|**| --> <br> <br> <!-- |**|end egp html banner|**| --> <div width=3D"1" style=3D"color: white; clear: both;"/>__._,_.___</div> =20=20=20=20=20=20 =20=20 =20=20=20=20 <div id=3D"fromDMARC" style=3D"clear:both; margin-top: 10px;"> <hr style=3D"height:2px ; border-width:0; color:#E3E3E3; backgroun= d-color:#E3E3E3;"> Posted by: James Churchman <[email protected]> = <hr style=3D"height:2px ; border-width:0; color:#E3E3E3; background-color= :#E3E3E3;"> </div> <!-- Start Recommendations --> <!-- End Recommendations --> <!-- |**|begin egp html banner|**| --> <br><br> <tt> -----<BR> To unsubscribe send a message to: [email protected]= m<BR> -or-<BR> visit <a href=3D"http://groups.yahoo.com/group/svg-developers">http://group= s.yahoo.com/group/svg-developers</a> and click "edit my membership&quo= t;<BR> ----</tt> <br><br> <!-- |**|end egp html banner|**| --> <!-- |**|begin egp html banner|**| --> <img src=3D"http://geo.yahoo.com/serv?s=3D97476590/grpId=3D1298421/grpspI= d=3D1706030390/msgId=3D66509/stime=3D1450239778" width=3D"1" height=3D"1"> = <br> <!-- |**|end egp html banner|**| --> =20=20=20=20 <!-- |**|begin egp html banner|**| --> <br> =20=20=20 =20=20=20=20=20 =20 <!-- |**|begin egp html banner|**| --> <div id=3D"ygrp-vital" style=3D"background-color: #f2f2f2; font-fam= ily: Verdana; font-size: 10px; margin-bottom: 10px; padding: 10px;"> <span id=3D"vithd" style=3D"font-weight: bold; color: #333; text-tr= ansform: uppercase; "><a href=3D"https://groups.yahoo.com/neo/groups/svg-de= velopers/info;_ylc=3DX3oDMTJlM2N2Z3E3BF9TAzk3MzU5NzE0BGdycElkAzEyOTg0MjEEZ3= Jwc3BJZAMxNzA2MDMwMzkwBHNlYwN2dGwEc2xrA3ZnaHAEc3RpbWUDMTQ1MDIzOTc3OA--" sty= le=3D"text-decoration: none;">Visit Your Group</a></span> <ul style=3D"list-style-type: none; margin: 0; padding: 0; display: in= line;"> </ul> </div> <div id=3D"ft" style=3D"font-family: Arial; font-size: 11px; margin-top: 5p= x; padding: 0 2px 0 0; clear: both;"> <a href=3D"https://groups.yahoo.com/neo;_ylc=3DX3oDMTJkY2Z1bTdpBF9TAzk3ND= c2NTkwBGdycElkAzEyOTg0MjEEZ3Jwc3BJZAMxNzA2MDMwMzkwBHNlYwNmdHIEc2xrA2dmcARzd= GltZQMxNDUwMjM5Nzc4" style=3D"float: left;"><img src=3D"http://l.yimg.com/r= u/static/images/yg/img/email/new_logo/logo-groups-137x15.png" height=3D"15"= width=3D"137" alt=3D"Yahoo! Groups" style=3D"border: 0;"/></a> <div style=3D"color: #747575; float: right;"> • <a href=3D"https://i= nfo.yahoo.com/privacy/us/yahoo/groups/details.html" style=3D"text-decoratio= n: none;">Privacy</a> • <a href=3D"mailto:svg-developers-unsubscribe@y= ahoogroups.com?subject=3DUnsubscribe" style=3D"text-decoration: none;">Unsu= bscribe</a> • <a href=3D"https://info.yahoo.com/legal/us/yahoo/utos/te= rms/" style=3D"text-decoration: none;">Terms of Use</a> </div> </div> <!-- |**|end egp html banner|**| --> </div> <!-- ygrp-msg --> =20=20=20 <br> <!-- |**|end egp html banner|**| --> <div style=3D"color: white; clear: both;"/>__,_._,___</div> </body></html> --Apple-Mail-DB2A193A-5950-4296-92CD-5AC219B2694F--