CSS: SVGs in data URL not working in IE11

Question

I am doing something like this (in a React app, using styled components):

a {
    position: relative;
  }

  a::after {
    content: '';
    position: absolute;
    bottom: -10px;
    display: block;
    height: 8px;
    width: 100%;
    transform: rotate(180deg);
    background: 0 center repeat-x
      url('data:image/svg+xml;utf-8,<?xml version="1.0" encoding="UTF-8"?>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="8px" viewBox="0 0 9 6" enable-background="new 0 0 9 6" xml:space="preserve">
        <polygon stroke="${encodeURIComponent(
          c_NAV_ACTIVE
        )}" points="4.5,4.5 0,0 0,1.208 4.5,5.708 9,1.208 9,0 "/>
    </svg>');
  }

It works in most browsers but not in IE 11. This is the effect I am trying to achieve (the underline of a currently active page):

I have already checked similar posts such as this one here or this article. I have modified my background property to have HTML encoded like this:

background: 0 center repeat-x
      url("data:image/svg+xml;charset=UTF-8,%3C?xml version='1.0' encoding='UTF-8'?%3E
    %3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='100%' height='8px' viewBox='0 0 9 6' enable-background='new 0 0 9 6' xml:space='preserve'%3E
        %3Cpolygon stroke='${encodeURIComponent(
          c_NAV_ACTIVE
)}' points='4.5,4.5 0,0 0,1.208 4.5,5.708 9,1.208 9,0 '/%3E
    %3C/svg%3E");

It still won't work in IE 11. Any ideas? If I replace the background's value with a raw color, say red, the underline is there. Clearly, IE is fussy about how I use SVGs in a data URL. Thanks in advance!

Answer 1

This works for me:

background-position-x: 0;
background-position-y: center;
background-repeat: repeat-x;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='100%25' height='8px' viewBox='0 0 9 6' enable-background='new 0 0 9 6' xml:space='preserve'%3e%3cpolygon stroke='%23fb37f1' points='4.5,4.5 0,0 0,1.208 4.5,5.708 9,1.208 9,0 '/%3e%3c/svg%3e");
background-size: 12px 12px;

I used this encoder https://codepen.io/elliz/pen/ygvgay