Svg Symbols Not Being Displayed in Firefox

Can't get my svg image displayed in Firefox?

You aren't specifying a size for your SVG anywhere. In your logo1 class, you specify 100%, but 100% off what? Chrome is working because it is defaulting to the "indeterminate sizing" default which is 300px width. But Firefox is using 100% of the width of the parent element (<li>), which is 0

Specify a real width and/or height in your logo1 class and everything should work fine in FF.

.logo1 {
    padding-top: 6px;
    width: 300px;
}

svg not displayed in Firefox

I was able to solve it (i think) by removing the div and img tag around the SVG and call the svg directly in CSS.

Here is my fiddle: https://jsfiddle.net/k110grkt/3/

svg {
  float: left;
  width: 700px;
  border-style: solid;
  border-width: 0px 2px 0px 0px;
  border-color: #e8e8e8;
  padding-bottom: 20px;
}

SVGs with use xlink not working in Firefox 84

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.

External SVG icons are not shown in Firefox

The problem was that my server didn't provide a proper MIME type for the svg file resource. After manually setting the MIME type in the response header to "image/svg+xml" it works in Firefox and Safari too.

Firefox not rendering svg properly

I don't know why FF is having a problem with this file. You may want to report this as bug to them.

Luckily there is a simple fix. Get rid of those somewhat unnecessary masks that Illustrator adds.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">    <path d="M13.333 9.333V7.746c0-.717.159-1.08 1.271-1.08H16V4h-2.33c-2.853 0-3.795 1.308-3.795 3.554v1.78H8V12h1.875v8h3.458v-8h2.35L16 9.333h-2.667z"/></svg>

Why are my SVGs showing properly in Chrome but not Firefox?

Thanks to zgood for the answer!

The path tags were doubled and the first path tag had no closing '/>'. Apparently Chrome handled invalid syntax better than Firefox.

Correct sprite file:

<svg width="0" height="0" class="hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <symbol id="edit">
    <path d="M 18.414062 2 C 18.158062 2 17.902031 2.0979687 17.707031 2.2929688 L 15.707031 4.2929688 L 14.292969 5.7070312 L 3 17 L 3 21 L 7 21 L 21.707031 6.2929688 C 22.098031 5.9019687 22.098031 5.2689063 21.707031 4.8789062 L 19.121094 2.2929688 C 18.926094 2.0979687 18.670063 2 18.414062 2 z M 18.414062 4.4140625 L 19.585938 5.5859375 L 18.292969 6.8789062 L 17.121094 5.7070312 L 18.414062 4.4140625 z M 15.707031 7.1210938 L 16.878906 8.2929688 L 6.171875 19 L 5 19 L 5 17.828125 L 15.707031 7.1210938 z"/>
  </symbol>
  <symbol id="delete">
    <path d="M 10 2 L 9 3 L 4 3 L 4 5 L 5 5 L 5 20 C 5 20.522222 5.1913289 21.05461 5.5683594 21.431641 C 5.9453899 21.808671 6.4777778 22 7 22 L 17 22 C 17.522222 22 18.05461 21.808671 18.431641 21.431641 C 18.808671 21.05461 19 20.522222 19 20 L 19 5 L 20 5 L 20 3 L 15 3 L 14 2 L 10 2 z M 7 5 L 17 5 L 17 20 L 7 20 L 7 5 z M 9 7 L 9 18 L 11 18 L 11 7 L 9 7 z M 13 7 L 13 18 L 15 18 L 15 7 L 13 7 z"/>
  </symbol>
</svg>