Using a data: encoded SVG as a CSS filter

StackOverflow https://stackoverflow.com//questions/11703541

  •  13-12-2019
  •  | 
  •  

Question

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 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

Was it helpful?

Solution

After more trials and errors I've found that using escape on the data works and now we just have to wait for other browsers to implement support for it.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">

#filterBase64 {
    filter:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9ImRlc2F0dXJhdGUiPjxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiLz48L2ZpbHRlcj48L3N2Zz4%3D#desaturate);
}

#filterEscape {
    filter:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cfilter%20id%3D%22desaturate%22%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22/%3E%3C/filter%3E%3C/svg%3E#desaturate);
}

</style>
</head>
<body>
<p style="color:red" id=filterBase64>This one is encoded as base64</p>
<p style="color:red" id=filterEscape>Filter encoded with "escape()"</p>
<p style="color:red" id=filterScript>This one is applied with javascript</p>
<script>
document.getElementById("filterScript").style.filter="url(data:image/svg+xml," + escape('<svg xmlns="http://www.w3.org/2000/svg"><filter id="desaturate"><feColorMatrix type="saturate" values="0"/></filter></svg>') + "#desaturate)";
</script>
</body>
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top