SVG feColorMatrix + its inverse not giving back original image

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

  •  30-03-2022
  •  | 
  •  

Question

This filter combines a color matrix and its inverse, so why doesn't this give back the original image? [It converts to YIQ and back to RGB]. Instead it gives back a greyscale image with some reddish artifacts.). This is the same on firefox, safari and IE10, so I think it's my fault, and not a bug. 

    <filter  id="matrixtest" filterUnits="userSpaceOnUse" x="-10" y="-10" width="340" height="220">
        <feColorMatrix in="SourceGraphic" result="YIQ" values="0.299 0.587 0.114 0 0  0.596 -0.274 -0.321 0 0   0.211 -0.523 0.311 0 0   0 0 0 1 0"/>
        <feColorMatrix in="YIQ" result="RGB" type="matrix" values="1 0.956 0.621 0 0  1 -0.272 -0.647 0 0  1 -1.107 1.705 0 0  0 0 0 1 0"/>

    </filter>
Was it helpful?

Solution

Ok I forgot my linear algebra - because matrix multiplication is not commutative, and therefore the inverse is being calculated in the wrong order (needs to be A-1.V, not V.A-1)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top