How to make background svg in IE/EDGE?

L

lexstile2019-10-25 11:27:33

css

lexstile, 2019-10-25 11:27:33

There is an icon, it is svg, it lies on our cdn, we have and should only have a link to it in the format site.ru/cdn/icons/close.svg
How to make it work in IE11/EDGE through background?

background: url(http://site.ru/cdn/icons/close.svg) no-repeat;

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="4" y="4" width="16" height="17">
<path d="M11.9826 4C9.93339 4 7.90628 4.80442 6.34377 6.36692C3.21874 9.49203 3.21874 14.5544 6.34377 17.6794C9.46879 20.8044 14.5312 20.8044 17.6562 17.6794C20.7813 14.5544 20.7813 9.49203 17.6562 6.36692C16.0937 4.80442 14.0318 4 11.9826 4V4ZM11.9826 5.11384C13.7441 5.11384 15.5053 5.78232 16.8557 7.13269C19.5563 9.83331 19.5563 14.1782 16.8557 16.8788C14.155 19.5795 9.81018 19.5795 7.10953 16.8788C4.40889 14.1782 4.40889 9.83331 7.10953 7.13269C8.45986 5.78232 10.2211 5.11384 11.9826 5.11384V5.11384ZM9.37203 8.03768L8.04934 9.39518L10.6947 12.0057L8.04934 14.6511L9.37203 15.9738L12.0174 13.3632L14.628 15.939L15.9507 14.6163L13.3401 12.0057L15.9507 9.39518L14.628 8.07249L12.0174 10.6831L9.37203 8.03768Z" fill="black"/>
</mask>
<g mask="url(#mask0)">
<rect width="24" height="24" fill="black"/>
</g>
</svg>

UPD: for some reason this svg is transparent in IE/EDGE, it works in other browsers.
UPD: figured out how to fix it in IE, but it doesn't work in EDGE.

<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
  <path d="M11.9826 4C9.93339 4 7.90628 4.80442 6.34377 6.36692C3.21874 9.49203 3.21874 14.5544 6.34377 17.6794C9.46879 20.8044 14.5312 20.8044 17.6562 17.6794C20.7813 14.5544 20.7813 9.49203 17.6562 6.36692C16.0937 4.80442 14.0318 4 11.9826 4V4ZM11.9826 5.11384C13.7441 5.11384 15.5053 5.78232 16.8557 7.13269C19.5563 9.83331 19.5563 14.1782 16.8557 16.8788C14.155 19.5795 9.81018 19.5795 7.10953 16.8788C4.40889 14.1782 4.40889 9.83331 7.10953 7.13269C8.45986 5.78232 10.2211 5.11384 11.9826 5.11384V5.11384ZM9.37203 8.03768L8.04934 9.39518L10.6947 12.0057L8.04934 14.6511L9.37203 15.9738L12.0174 13.3632L14.628 15.939L15.9507 14.6163L13.3401 12.0057L15.9507 9.39518L14.628 8.07249L12.0174 10.6831L9.37203 8.03768Z" fill="black"/>
</svg>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

O

origami1024, 2019-10-25
@lexstile

He doesn't wear a mask.
If you throw out the mask, it works. And weighs less

<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
  <path d="M11.9826 4C9.93339 4 7.90628 4.80442 6.34377 6.36692C3.21874 9.49203 3.21874 14.5544 6.34377 17.6794C9.46879 20.8044 14.5312 20.8044 17.6562 17.6794C20.7813 14.5544 20.7813 9.49203 17.6562 6.36692C16.0937 4.80442 14.0318 4 11.9826 4V4ZM11.9826 5.11384C13.7441 5.11384 15.5053 5.78232 16.8557 7.13269C19.5563 9.83331 19.5563 14.1782 16.8557 16.8788C14.155 19.5795 9.81018 19.5795 7.10953 16.8788C4.40889 14.1782 4.40889 9.83331 7.10953 7.13269C8.45986 5.78232 10.2211 5.11384 11.9826 5.11384V5.11384ZM9.37203 8.03768L8.04934 9.39518L10.6947 12.0057L8.04934 14.6511L9.37203 15.9738L12.0174 13.3632L14.628 15.939L15.9507 14.6163L13.3401 12.0057L15.9507 9.39518L14.628 8.07249L12.0174 10.6831L9.37203 8.03768Z" fill="black"/>
</svg>