Re: [css3] support for filters

On 11/01/2011 5:25 PM, Boris Zbarsky wrote:
> On 1/11/11 1:07 AM, Alan Gresley wrote:
>> Can you please clarify SVG content? I can use SVG content within XHTML
>> with an xml extension.
>
> Or in HTML in any browser with an HTML5 parser, right?


I currently use FF 3.6.13 which I believe has a HTML5 parser. I create a 
HTML document with SVG content that seems valid HTML5.

<http://css-class.com/test/svg/svg-within-html.htm>


But nothing is appearing in FF. Safari and Opera shows the text flowing 
around the border of the floated <svg> element but no SVG (just the text 
node 'svg'). FF is worst since it shows bazaar rendering. The FF web 
developers toolbar reports that the <p> is the child of <stop>. The tree 
shows html > body > svg > g > lineargradient #gradient > stop > p.

I did a quick search and found this 
<http://www.tutorialspoint.com/html5/html5_svg.htm>. It mentions Firefox 
3.7 and about enabling HTML5 via about:config.

Now if I view my demo in IE9, hey presto it works. I can only assume 
from the above tutorial that FF 3.6.13 is serving my HTML as HTML4.01.


>> The way you are answering, it sounds like you can
>> use SVG filters as part of the CSS syntax within a <style> element of
>> external stylesheet.
>
> Yes.


So what appears between <style> and </style> that can be a SVG filter 
but is part of the CSS? This is not CSS,

   mask: url(file.svg#Gaussian_Blur)

but rather something pointing to another resource or format.


>> I see this post,
>>
>> https://developer.mozilla.org/web-tech/2008/09/15/svg-effects-for-html-content/
>>
>>
>>
>> Where you write.
>>
>> | Robert O'Callahan Says:
>> |
>> | Right now they can ONLY be used in XHTML.
>> |
>> | That should change soon when we add the ability to reference
>> | external SVG files from plain HTML documents.
>
> Right; that happened over 2 years ago, a few weeks after the post in
> question. See
> <http://weblogs.mozillazine.org/roc/archives/2009/02/svg_filter_effe.html>
> and
> <https://developer.mozilla.org/web-tech/2008/10/10/svg-external-document-references/>.
> This shipped in Gecko 1.9.1, so if you have anything resembling a recent
> (read: "still gets security updates") Gecko-based browser on hand you
> can experiment with it.


I have FF 3.6.13 with the Gecko 1.9.2.13 engine. I go to here,

<https://developer.mozilla.org/web-tech/2008/10/10/svg-external-document-references/>

which has the link "SVG Effects in HTML Content" to,

https://developer.mozilla.org/web-tech/2008/09/15/svg-effects-for-html-content/

but all the examples return a 404. The link below to "a small demo" also 
return a 404.

http://people.mozilla.org/~bzbarsky/svg-external-resource/example.html


I can put this file on my server,

http://css-class.com/test/svg/example2.svg

I can view it in FF 3.6.13 and other browsers. When offline though, 
unlike the other browsers, FF pops up a window asking me what I would 
like to do with the file.

https://developer.mozilla.org/En/SVG/FAQ#Why_am_I_asked_to_choose_a_program_to_open_SVG_files.3f


>> Or do we use something like this.
>>
>> .class { mask: url(http://example.com/file.svg#Gaussian_Blur); }
>
> That's exactly what you use, yes (though there are some same-origin
> restrictions, etc).
>
> -Boris


What is a same-origin restrictions? Another test but with something like 
the above syntax.

http://css-class.com/test/svg/svg-within-html2.htm

Works ok (the SVG renders) in IE9 beta apart from the issue that IE9 
beta does not support SVG filters. Opera 11 shows much like the last 
test. Safari shows the SVG with CSS missing even though the line boxes 
are indented. FF chews most of the documents rendering just the header 
but like the last test, I can outline that tree.


All in all, I not saying that the above non support or behavior is 
wrong. I am just seeking a method of testing with SVG filters to see how 
it is best to incorporate it into CSS as CSS syntax. Using some MS 
propriety filter is not a way to demonstrate an affect.



-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo

Received on Tuesday, 11 January 2011 11:55:50 UTC