Can't get my svg image displayed in Firefox?

Question

I can't get my svn-image displayed in Firefox... it works fine in Safari and Chrome (don't have IE, so haven't tested that yet).

It's implemented like this in my html;

img class="logo1" src="/images/logo6.svg"

Where logo1 is just a class for positioning.

I've tried to google but have just found that sag isn't supported by Firefox, but nonetheless, there are ways to display it. All solutions has been really hard to understand though. (I'm not a programmer!)

Are there any easy ways of doing this?

Answer 1

I've run into a rendering issue with Firefox (v58.0.2) where having display: flex as a parent of the SVG caused issues, e.g.:

<div style="width: 50px; display: flex">
  <span class="Icon">
    <svg>
      <use xlink:href="#myicon" href="#myicon"></use>
    </svg>
  </span>
</div>

Removing the display: flex style in the parent div helped fix the issue.

Answer 2

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;
}

Answer 3

You can check if it's a geometry problem by trying to load the svg directly on the browser. If it is not a gemoetry issue and the svg does not display by itself, you definitively want to check inside the svg code for culprits. Using Inkscape, you can access the XML structure under Edit -> XML Editor, but you can just open the svg (uncompressed) with a text editor of your choice -- for complex svg files, this may be a more agile tool. In the svg for my case, I was "borrowing" a printer symbolic device from the Paper theme, and turns out the layer from where I did the copy/paste had in it a style attribute with "display: inline-block", which came along into my own file. This layer Chrome would render just fine, but Firefox wouldn't display it. I removed the style attribute and violá! There goes the icon.

Answer 4

Firefox supports svg. You can use this HTML code and it will work in firefox.

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
   Sorry, your browser does not support inline SVG.
</svg> 

If you will provide with full code and files I will correct it for you.