How to desaturate svg with css?

Question

css

Hello guys and that another consultation on working with I SVG through CSS, and so I have a feedback block and it has an avka that I display in a svg figure, now I want to activate a specific hover feedback to activate the desaturate the image to make it gray here see www.prntscr.com/9vzjrs!
figure code

<div class="clo">
    <svg id="ava"viewBox="0 0 172.9 184.3" style="enable-background:new 0 0 172.9 184.3;" xml:space="preserve">
      <pattern id="avatar-1" width="400" height="400" patternUnits="userSpaceOnUse">
        <image xlink:href="img/face1.jpg" >
      </pattern>
      <filter id="shadow" filterUnits="userSpaceOnUse" x="0" y="0"
      width="300" height="300">
        <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
        <feOffset in="blur" dx="0" dy="3" result="offsetBlr" />
        <feFlood flood-color="rgba(0,0,0,.4)"/>
        <feComposite operator="in" in2="offsetBlr" result="colBlur"/>
        <feMerge>
          <feMergeNode in="colBlur"/>
          <feMergeNode in="SourceGraphic"/>
        </feMerge>
      </filter>
      </image>
      <path class="st0" d="M105.3,11.3c15.5,7.9,26.7,14.2,41.3,22.2c14.1,7,16.9,15.5,16.9,33.2c0,16,0,28.3,0,46.3
      c0.1,18-3.5,20.9-17.8,30.2c-13.4,7.7-25.2,14.5-40.3,23c-13.3,8.6-24.6,8.3-36.7,0c-14.8-8-25.6-14.2-40.3-23
      C14,134.6,8.8,127.9,8.6,110.9c0-16.2-0.1-27.9,0-44.2C8.5,50,14.3,41.1,28.3,34.3c15.1-9.4,25.5-15.4,40.3-23
      C85,2.4,89.1,2.3,105.3,11.3z"/>		
    </svg>
  </div>

Shape styles

.col{ height: 15
    margin: auto;
  }
  



    .st0, .st1, .st2, .st3, .st4{
    	stroke:#F0F0F0;
    	stroke-width:2.5;s
    	troke-miterlimit:10;
    	filter: url(#shadow);}

    .st0{fill:url(#avatar-1);}
    .st1{fill:url(#avatar-2);}
    .st2{fill:url(#avatar-3);}
    .st3{fill:url(#avatar-4);}
    .st4{fill:url(#avatar-5);}
    #ava  pattern image{height: 150px; width: 150px;}
    #ava{height: 500px;}

Answer 1

Guys, I solved this problem in such a simple way!

<filter id="myFilter3">		      
          <feColorMatrix in="a1" type="saturate" values="0"></feColorMatrix>
</filter>

but if you have other methods, post it interesting how you solved such a problem!