0

In my web application i'm using SVG icons, main reason is dat i'm using than for multi-tenant design. I've tried a lot of options but in Internet Explorer almost every version, it doesn't work. It shows op like a o filled block.

Working code : Chrome / Mozilla / Safari 

HTML:
<div class="svg_icon" id="icon_business"></div>

CSS:
#icon_business {
    -webkit-mask-image: url(/svg/business.svg);
}
.svg_icon {
    width: 100%;
    height: 80px;
    text-align: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-position-x: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    background-color: #00E3A7;
}

Could someone help me? What's the best way to handle this? And is there a way it works with IE 8 +

Improve this question
2
  • Actually I can't get it to work on Firefox (68.0.2) -> All white or on Edge (17.17134) -> All green. I made a fiddle because we can't access your svg image: the fiddle. Note that from MDN there is no support at all for Internet Explorer for mask-image
    – Kaddath
    Commented Sep 3, 2019 at 8:20
  • As mask-image is not supported with IE, as a work around are you available to use SVG star shape? If yes than you can refer this example. it is working with IE. Ref: textuploader.com/1r4n0
    – Deepak-MSFT
    Commented Sep 3, 2019 at 9:36

1 Answer 1

Reset to default
0

You should use background image. Also SVGs are not supported in IE8 see here.

This should work for everything above IE8: 

#icon_business {
  background-image: url('https://mdn.mozillademos.org/files/12676/star.svg');
}
.svg_icon {
  display: block;
  width: 80px;
  height: 80px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  background-color: #00E3A7;
}

To target IE8 you could put this in to the top of you HTML file:

<!DOCTYPE html>
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->

Then using the class ie8. Use fallback image (png/jpg/gif)

.ie8 #icon_business {
  background-image: url('https://mdn.mozillademos.org/files/12676/star.png');
}

Or use some javascript.

Improve this answer
4
  • Thank you very much, going to try this!! Great
    – Maradilly
    Commented Sep 11, 2019 at 8:08
  • @Maradilly, Is there any progress on this issue? If you had find the solution than please try to post it as an answer and try to mark your own answer as an accepted answer for this question after 48 hrs, when it is available to mark. If issue still persist than try to refer the suggestions on the thread and let us know about your status for this issue. We will try to provide further suggestions. Thanks for your understanding.
    – Deepak-MSFT
    Commented Sep 17, 2019 at 8:43
  • @Deepak-MSFT , Excuse me, new to Stackoverflow. it didn't worked, this solution made the background green but the line icon didn't worked. I'm working on a solution but i'm using Gulp, so didn't find a solution. svgicons.sparkk.fr working on this one.
    – Maradilly
    Commented Sep 18, 2019 at 9:20
  • Is there any possibility to use SVG shape as I suggested you in my previous comment? As mask-image is not supported on IE, It can be the work around for the issue if you are using svg icons on a small scale in your app.
    – Deepak-MSFT
    Commented Sep 19, 2019 at 6:09

Not the answer you're looking for? Browse other questions tagged or ask your own question.