Search code examples
canvassvgfiltercolormatrix

Strength of feColorMatrix filter

I'm trying to create a Sepia filter in SVG with a adjustable strength. In Canvas this is easy to do. But im unsure how to approach this problem in SVG.

This is my current code for the filter.

 <filter id="image1362918248406filter">
    <feColorMatrix color-interpolation-filters="sRGB" 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"></feColorMatrix>
 </filter>

The fiddle below is a demo of what im trying to achieve. How can i get the SVG example to look the same as the canvas example?

http://jsfiddle.net/5LLFS/

Solution

  • This looks like what you want when I tried it on Firefox.

    <defs>
    <filter id="image1362918248406filter" color-interpolation-filters="sRGB">
        <feColorMatrix 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" result="sepia"></feColorMatrix>
        <feComposite in="sepia" in2="SourceGraphic" operator="arithmetic" k2="0.5" k3="0.5" />
       </filter>
</defs>