SVG use element refering external file doesn't work

[lord-t]

It doesn’t work in all browsers. I have svg4everybody.js in the html file and have right path to the svg. … Console: http://postimg.org/image/cuyn96f9d/

svg file: http://postimg.org/image/9rgqmhf8v/

And I have the following code in my html file:

<a href="index.html">
&lt;svg viewBox="0 0 385.5 128"&gt;
&lt;use xlink:href="img/global.svg#logo"&gt;&lt;/use&gt;
&lt;/svg&gt;
</a>

[Paulie_D]

Hard to help without seeing it but I assume you’ve met all the requirements in the documentation?

https://github.com/jonathantneal/svg4everybody

Also, you’re using a def but the set-up in the documentation uses a symbol. Whether that makes a difference, I dunno.

[lord-t]

Thanks for responding to my question. I replaced the defs with symbol and it still doesn’t work.

I am doing exactly what @chriscoyier is saying in this video.
https://www.youtube.com/watch?v=w83XRCkMtHQ&feature=youtu.be&t=25m41s

[Paulie_D]

As I said, without seeing it on a live page it’s hard to offer any definitive help.

Could be a cross-domain policy, .htaccess restriction, meta issue…anything.

Judging by the console output image it’s a security issue.

What OS are you using?

Is this affecting all browsers or just one, and which version….but I’ll keep coming back to we need to see it ‘not working’

[lord-t]

As I said in the description it is affecting all browsers. I’m thinking it might be a .htaccess or meta issue.

[lord-t]

yep I ftp’d the file into the server and tested it. It doesn’t work!!

[Author]

Posts