SVG use external source not working on firefox

Question

I'm trying to make a SVG icon sprite, something like in this fiddle

http://jsfiddle.net/8ke8nsft/6

Only difference is on my app I use a relative URL "../images/svg-sprite.svg#home-icon" this works great on chrome and safari, but doesn't show up on firefox.

<svg class="home-icon">
    <use xlink:href=../images/svg-sprite.svg#home-icon"/>
</svg>

Firefox works perfectly when I add the svg sprite inline on top of the page then use it

<svg class="home-icon">
    <use xlink:href=#home-icon"/>
</svg>

and this is my SVG file

<svg>
    <symbol id="home-icon" viewBox="0 0 512 512">
        <title>Home Icon</title>
        <path d="M512,296l-96-96V56h-64v80l-96-96L0,296v16h64v160h160v-96h64v96h160V312h64V296z"/>
    </symbol>
</svg>

am I missing something here?

Answer 1

In order to better protect your security, Firefox only allows files to refer to other files if they are in the same directory or a sub-directory of the original file.

If you access content via a web-server then this restriction does not apply, however the web-server may impose other restrictions on file location.

Answer 2

I found my self troubled with this issues. I just realised that I'm missing xmlns="http://www.w3.org/2000/svg" from external svg file. So try to:

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="home-icon" viewBox="0 0 512 512">
        <title>Home Icon</title>
        <path d="M512,296l-96-96V56h-64v80l-96-96L0,296v16h64v160h160v-96h64v96h160V312h64V296z"/>
    </symbol>
</svg>

And I think you would be fine

Answer 3

Please make sure you're running html in webserver. Directly it will not work.

Example:

Running it in webserver will work:

http://localhost/test/home/home.svg.html

Running without webserver will not work:

file:///C:/wamp64/www/test/home/home.svg.html

Further, please use "href" tag instead of "xlink:href". href tag is being deprecated with SVG2. https://www.w3.org/TR/SVG2/linking.html

So new tag would be:

<svg>
  <use href="home.svg#home-icon"> </use>
</svg>