SVG Icons not working in Internet Explorer

Question

SVG Icons not working in Internet Explorer

1.5k views Asked by Maradilly At 03 September 2019 at 07:41

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 +

Original Q&A

There are 1 answers

**Fazberry** · Answer 1 · 2019-09-03T09:39:08+00:00

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.

TechQA.

SVG Icons not working in Internet Explorer

There are 1 answers

Related Questions in CSS

Related Questions in INTERNET-EXPLORER

Related Questions in SVG

Related Questions in INTERNET-EXPLORER-8

Related Questions in INTERNET-EXPLORER-11

Popular Questions

Popular Tags

Trending Questions