8

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?

3
  • What about a relative URL? or on my local environment? "../images/svg-sprite.svg#home-icon" works well with chrome and safari
    – PulledBull
    Commented Aug 20, 2015 at 16:32
  • I know the external example on the fiddle doesn't work anywhere but I couldn't demonstrate the relative url on the fiddle
    – PulledBull
    Commented Aug 20, 2015 at 16:36
  • @RobertLongson Perfect. This explains my problem. I added the sprite in the same parent folder and it worked on Firefox. Chrome and safari didn't mind the ../images though. Thanks!
    – PulledBull
    Commented Aug 20, 2015 at 16:40

5 Answers 5

3

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.

1
  • I would even go further and say that the same directory doesn't work either, because I have just tried to get that to work unsuccessfully. Unless it's a web server, and then, like you say, the restriction doesn't apply.
    – Hakanai
    Commented Jul 9 at 9:16
3

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

0
2

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>
1

In my document, I was missing a closing SVG tag. Worked in other browsers, but not Firefox. Fixing the problem SVG tag solved the issue, so check your source document to make sure it's valid SVG.

0

The attribute xlink:href is missing the first ' " '.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.