YUI Compressor is removing spaces from filter values

Question

I have a css containing filter for adding Grayout images in FF like this:-

filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */

When I use YUI compressor it removes all the spaces between filter values and it becomes like this:-

.desaturate{filter:url("data:image/svg+xml;utf8,<svgxmlns='http://www.w3.org/2000/svg'><filterid='grayscale'><feColorMatrixtype='matrix'values='0.33330.33330.3333000.33330.33330.3333000.33330.33330.33330000010'/></filter></svg>#grayscale")}

Its removing the spaces which makes it useless in FF.

I also tried moving it to an .svg file but then it gives cross domain issues in FF. Please suggest if anyone has any idea on how can I fix this problem?

Answer 1

I found out by experimenting with JW.'s idea that you can base64-encode the entire string, except for the final #grayscale part and adding the corresponding encoding part, or, even nicer. only url-encode the spaces between xml attributes and/or tag names and separating the matrix values by commas.

So in the end you have:

filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333,0.3333,0.3333,0,0,0.3333,0.3333,0.3333,0,0,0.3333,0.3333,0.3333,0,0,0,0,0,1,0'/></filter></svg>#grayscale");

which is compact and doesn't get altered by the css compressor