2

I'm letting the user upload an SVG image, and I'm trying to show it to him.

The image is showing nicely on Edge, Firefox and Chrome but not on IE11. When I'm entering debug mode, it looks like the data URI is different on IE and on Chrome. When I'm copying the data URI that I'm having in Chrome to IE, it's working.

What is the problem? Why is IE changing the data URI?

Here is the code

<img class="large-icon img large-icon-img user-img" id="large-icon" src="" style="height: 96px; width: 96px;">

Check the fiddle

Thx

Owaiz Yusufi
  • 849
  • 1
  • 14
  • 34
Lior Sharabi
  • 91
  • 1
  • 9
  • The only thing in your SVG is a PNG image. Why even bother with an SVG? You are not getting any of the benefits of the SVG format. Just use the PNG itself. – Paul LeBeau Nov 05 '18 at 12:09
  • ANyway... this is probably a duplicate of https://stackoverflow.com/questions/32870788/css-using-raw-svg-in-the-url-parameter-of-a-background-image-in-ie – Paul LeBeau Nov 05 '18 at 12:10

1 Answers1

4

Solved it,

The problem was that for using data URI in IE11 the URI must be in base64. so i took the SVG data and used 'btoa' function on it and added 'svg+xml;base64' as his MIME type.

<img src={`data:image/svg+xml;base64,${window.btoa(data)}`} />
Lior Sharabi
  • 91
  • 1
  • 9
  • @ Lior, I can see that you had solved your issue. I suggest you to mark your own last answer as an answer for this thread may help other members in future. – Deepak-MSFT Nov 06 '18 at 07:02