Using a data: encoded SVG as a CSS filter
===

Maybe someone can point an error in my test, but it seems that if I want to use a SVG filter in CSS encoding it as `data: uri` to avoid using an additional file, it fails if the data isn't encoded as base64.

I've tested with Firefox Aurora, other browsers don't seem to recognize the filter in neither case.

Test file:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <style type="text/css">
    
    #filter1 {
    filter:url(data:image/svg+xml,<svg xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"><filter id%3D"desaturate"><feColorMatrix type%3D"saturate" values%3D"0"%2F><%2Ffilter><%2Fsvg>#desaturate);
    }
    
    #filter2 {
    filter:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9ImRlc2F0dXJhdGUiPjxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiLz48L2ZpbHRlcj48L3N2Zz4%3D#desaturate);
    }
    
    </style>
    </head>
    <body>
    <p style="color:red" id=filter1>Filter applied "as is"</p>
    <p style="color:red" id=filter2>This one is encoded as base64</p>
    </body>
    </html>


Live demo at http://martinezdelizarrondo.com/bugs/svgfilter.html

the contents of the url() is the same in both cases:

    <svg xmlns="http://www.w3.org/2000/svg"><filter id="desaturate"><feColorMatrix type="saturate" values="0"/></filter></svg>

Encoded with http://software.hixie.ch/utilities/cgi/data/data

As you can see, the first one remains red, but in the second case the svg filter is applied and the text becomes gray.

Have I forgot about something in the first case?

In [this bug][1] I don't find anything about the encoding, so I guess that it should be possible (and certainly using a simpler text encoding is much better instead of "encrypting" it with base64)

Thanks


  [1]: https://bugzilla.mozilla.org/show_bug.cgi?id=686013