Can't properly change image's color using svg filter

Question

I have this image	And I need to make it look this way (at least, I need to fill the t-shirt fully)

And I've got this:

With this code:

img {
  filter: url('#grayscale');
}

body {
 background:#000;
}

<img src="https://i.sstatic.net/csRyu.png">
<svg xmlns="http://www.w3.org/2000/svg" version="2">
            <defs>
              <filter id="grayscale">
                <feColorMatrix in="SourceGraphic" 
                type="matrix" 
                values="1 1 1 1 1
                        1 1 1 1 1
                        1 1 1 1 1
                        -0.8 -0.7 0 1 0" 
                result="grayscale" />
              </filter>
            </defs>
          </svg>

How should I change the code to fill the red color fully? Would be very grateful to any answers.

Answer 1

a saturate filter can get you closer

img {
  filter:saturate(0) url('#grayscale');
}

body {
 background:#000;
}

<img src="https://i.sstatic.net/csRyu.png">
<svg xmlns="http://www.w3.org/2000/svg" version="2">
            <defs>
              <filter id="grayscale">
                <feColorMatrix in="SourceGraphic" 
                type="matrix" 
                values="1 1 1 1 1
                        1 1 1 1 1
                        1 1 1 1 1
                        -0.8 -0.7 0 1 0" 
                result="grayscale" />
              </filter>
            </defs>
          </svg>