SVG use element refering external file doesn't work in Safari

Question

I have a HTML file with inline SVG, which in turn refers to SVG elements in external SVG file with library elements. It uses a <use> elements with xlink:href="Library.svg#libraryShapeID". It works as a breeze in Opera and Firefox, but doesn't work in Safari. I've made a simple test file here:

http://sasq.comyr.com/Stuff/SVG/test01.html

Is it some browser bug or am I doing something wrong? How should I rewrite it to make it work in Safari too?

score 4 · Answer 1 · edited May 23 '17 at 12:30

4

There was a bug about this on Webkit but it has been fixed for the Version: 420+ BUT the bug for Fragment identifier is still not solved.

Someone gave an answer: Importing external SVG (with WebKit) using XMLHttpRequest. Quite unfortunate but in the meantime, I guess working.

edited May 23 '17 at 12:30

Community

1
1

answered Jul 02 '12 at 22:06

karlcow

6,977
4
38
72

Is this bug in the current Safari? I am on Version 5.1.7 (6534.57.2), and this still seems to be a problem. – supertrue Jul 20 '12 at 19:35
@supertrue As I said the Bug 65344 - Make external URL references work is still opened. – karlcow Jul 22 '12 at 22:46

score 1 · Answer 2 · answered Nov 16 '15 at 23:19

I realize that this is an old question. But as this method of using SVGs has become more popular these days, I wrote a polyfill to make this technique work in browsers that fail to load the external SVG by default. At the time of writing this, IE9+ doesn't support referencing external SVGs in use elements. The polyfill that I wrote is quite simple and lightweight; it detects whether the SVG has failed to load and if so, sends a GET request to fetch it. It will then prepend it to body.

I hope you find it useful. I would appreciate any feedback.

Thanks for your great work! svg4everybody failed on recent iPads, but your script worked! — Fabian von Ellerts, Oct 03 '19 at 17:47

SVG use element refering external file doesn't work in Safari

2 Answers2