Can't change fill in svg icon. Where is the mistake?

Question

Sprites

1. There is an svg sprite that has been run through - gulp-svgstore and gulp-svgmin. At the output I got:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol id="logo" viewBox="0 0 43 47"><image width="43" height="47" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAvCAMAAABNEsPkAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAANlBMVEUAAACkxjmkxjmkxjmkxjmkxjmkxjmkxjmkxjmkxjmkxjmkxjmkxjmkxjmkxjmkxjmkxjkAAACTXjzEAAAAEHRSTlMAIN9An4AQYK/vj3DPv1AwJxVnQAAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfhBwQNGy3Ivy18AAAA80lEQVRIx+3V0RaCIAwG4AFjOAz0/Z82BoqdgDjHbv0v0sGXEgoBHFEa6qkxRtVKX6c1aOWT3MK7hBdH0mCxpUDpAuQLLGGkdDvqWFiX9VNmndqgm2+ZdZ966UOs7GXly75HjfSH9BtPSxDlYDpWS4cm0qeNYHNTS+M+Smynd2jbCQ5DGxq7jwP/xIxzbwzKrmpq1WoTcvLQ48RGedquvDB6YnV5jc7ypz2Oj33sXZvXr5/YvH0FIGT203XhtWywd/aHjQeUt3bRb1i0DiVlD2Ts0DoMe1R2MIDHfgY7Fge2/L2cc7/lKg6sXIpdrRxfN8l5A2ocSPHUn5T/AAAAAElFTkSuQmCC"/></symbol></svg> и тд ....

2. Inline sprite on the svg page using js
3. I call the desired icon using:

<svg class="logo__svg" width="147" height="40">
  <use xlink:href="#logo"></use>
</svg>

And all right, the icon is displayed.
But as soon as I want to recolor it, let's say red:

.logo__svg {
    fill:  red;
  }

She doesn't repaint. I would be very grateful if you point out the error. I googled the problem but didn't find any results.
PS I saved svg icons from Photoshop using the export as method.

Answer 1

You can't change the color of an image in a sprite. This is the same bitmap, only wrapped in svg. You can only change the color of vector elements. Such as path, g, circle, etc.