CODEWITHSUNDEEP
svgfirefoxcross-browser
Mondego
Mondego

Reputation: 303

SVGs with use xlink not working in Firefox 84

I'm having an issue where I have a couple of SVGs that are not showing up in Firefox. They work fine in Chromium and Safari.

HTML

<svg
  class="something">
  <use xlink:href="sprite.svg#home" />
</svg>

CSS

.something {
    width: 2rem;
    height: 2rem;
    fill: black;
    cursor: pointer;
}

Sprite.svg

<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="home" viewBox="0 0 32 32">
<path d="M28 17.333v13.333h-8v-8h-8v8h-8v-13.333h-4l16-16 16 16h-4zM26.667 9.457v-6.791h-4v2.791l4 4z"></path>
</symbol>
...
</defs>
</svg>

Upon inspection with developer tools, I can see the path for Chrome:

enter image description here

But not for Firefox:

enter image description here

What I have already tried based on other posts:

Any idea how to resolve this?

I see from caniuse that Firefox supports use xlink:href.

It seems to be a problem of rendering and not fill as changing the size of the icon isn't causing visible changes.

Upvotes: 0

Views: 1198

Answers (2)

uki
uki

Reputation: 45

in my case, i missed a defs closing tag , that's where the error originated from.

Upvotes: -1

Mondego
Mondego

Reputation: 303

Found the issue: one of the symbols in the sprites file didn't have a closing tag. For some reason other browsers were still able to display all of them without complaining, but not Firefox.

Since it may happen to others, I'll keep the question posted.

Upvotes: 2

Related Questions