So, I wanted to make all images with sepia effect, however code I use for grayscale in SVG, when changed to sepia doesn't work...
This is grayscale: a img {
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"); }
And this is sepia that doesn't work: img {
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id="sepia"><feColorMatrix type='matrix' values='0.393 0.769 0.189 0 0 0.349 0.686 0.168 0 0 0.272 0.534 0.131 0 0 0 0 0 1 0'/></filter></svg>#sepia"); }
Can anyone tell me what's wrong with sepia code?
And since I'm asking is there a way to make images both sepia and grayscale and play with opacities like with web-kit where I can make it -webkit-filter: grayscale(1) sepia (0.2);?
I'm guessing the double quotes in [id="sepia"]. Also, your values for sepia seem a bit off. This is a better place to start for sepia:
"0.30 0.30 0.30 0 0
0.25 0.25 0.25 0 0
0.20 0.20 0.20 0 0
0.00 0.00 0.00 1 0"
On your other question, you can use <animate> to animate between color matrix values, but svg animation doesn't work on IE (even IE10), so you'll have to script something that makes sense. (Update - you can try the FakeSMIL javascript library for IE - it can handle most SMIL.)