Can't change svg fill. What is the problem?

Question

css

Here is my code:

<svg display="none">
    <symbol id="facebook" viewBox="0 0 11 20">
      <g clip-path="url(#clip-244)"><image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAUCAYAAABbLMdoAAABBElEQVQ4T83TyyqFURTA8d9xKzGhvIInMOAtUAwwMHEZ6BAzAxNMjJRymxhKlJDwEp5BKUOJicsRLe1TX9v5ytA322v917fW/u+9K35/TRjGBHrRglfcVzI21lVsoC3/Tw734QbdDTrK4WWsF8BnHOEOtRzewWwBXsVKfZ3D+5hKyRpGcVoGb2EuJd8wgosi3I9WfGEJgyn5gRjjGh14ijEe0IPP5LS5MHOMEvHQeBbwI7oaqcpi2wG/oPMP8GLA82hP7YYwkAqj/SFu057Oc3WbqTj493RHLsvU7WImJQMex0kZvIfpAhw37/ifwweYLDgfS/p+Qrm6tfScwnEc9QKu6sXfhA47SwA74VUAAAAASUVORK5CYII="/></g>
    </symbol>
  </svg>

  <svg class="face_logo">
    <use xlink:href="#facebook"></use>
  </svg>

.face_logo {
  fill: red;
}

The picture is displayed, but its color does not change. It seems to me that the issue is more in the picture itself than in the code. Here's what she looks like.


Looks like a raster to me

Answer 1

Because the png is encoded in base64