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!

Can you try to check whether your a::after CSS class applied in IE or not ? If it is not applied than try to add it in container element. For IE I suggest you to use simple css underline to avoid the svg related issue. — Deepak-MSFT, Sep 18 '19 at 06:13
@Deepak-MSFT Thank you for your feedback! Yeah, the class applies. I can see it in the IE11 developer tools. Further, if I change the URL attribute with a colour, it works. For example `background: pink` works just fine, i.e. the underline is displayed. it's clearly an issue with the svg as part of a data URI. For the sake of consistency, I need to make it look the same for all browsers we support so unfortunately using simple CSS is not an option in this case. — Alin C., Sep 18 '19 at 09:08
I try to test the issue by removing the one by one part in background value to check which exact part causing this issue but still it did not worked and did not gave any hint about the cause for the issue. I will try to make further tests and to see whether there is any solution or workaround for IE. — Deepak-MSFT, Sep 19 '19 at 09:56
yeah, that's what I did and I just got it to work. it's a combination of the right encoding, swapping attribute values' double quotes with single quotes, wrapping the URL with double quotes, not using the `background` property as a shorthand (so I had to break it down) and adding a `background-size` with 2 values. I will answer my question and post the answer below. — Alin C., Sep 19 '19 at 10:47

Alin C. · Accepted Answer · 2019-09-19T13:06:21.440

0

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

edited Sep 19 '19 at 13:06

answered Sep 19 '19 at 10:50

Alin C.

66
1
8

Thanks for posting the solution for this issue. I suggest you to try to mark your own answer as an accepted answer for this question after 48 hrs, when it is available to mark. It can help other community members in future in similar kind of issues. Thanks for your understanding. – Deepak-MSFT Sep 20 '19 at 03:09

CSS: SVGs in data URL not working in IE11

1 Answers1