SVG use external source not working on firefox

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.


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

Tags:

Html

Css

Svg