Safari 9 < 9.1.1 / Mobile Safari 9 < 9.3.2 download external svg sprite file for every <use> xlinks:href instance

[bjankord]

This was originally posted by @codecandies on the svg4everybody repo. Copying it to here for posterity.

In this testcase http://phpscripts.zeit.de/svg-use-testcase/ you can see the problem, by loading and examining it with Chrome and a Safari greater 9 (exact version mentioned on the testcase). The problem is also seen in iOs safari, since 9.2 i guess (inspected with Charles proxy).

The problem

For every combination of the code

<svg class="svg-symbol" role="img" aria-labelledby="title">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="icons.svg#svg-search"></use>
</svg>

the svg file icons.svg is (re-)downloaded by safari/mobile safari browsers. Additionally the file is not cached in the browser or ever served from cache, and the developer tools see this file not as image/svg+xm but as other.

This leads to extreme high content downloads, which, especially on mobile, is not good.

A bug has been logged to webkit: https://bugs.webkit.org/show_bug.cgi?id=156368

@martinwolf has documented the issue in detail here: https://www.youtube.com/watch?v=OAbmDlnq1UE

Screenshots from the network panel from Chrome v50 compared with Safari v9.1:

[hexalys]

Slightly aside from this issue:
For those interested in a server side alternative to svg4everybody.
You may want to have a look at: http://codepen.io/hexalys/details/epErZj

That can fix, or at least bypass, the Safari 9 to 9.3 bug, employing the same technique as for Webkit < 537 and IE/Edge < 13.

Not sure I will target those UAs myself yet with this method. Probably depends on when the fix is deployed, and whether it affect both iOS and Desktop... But it can be of help with this particular issue.

[maddesigns]

This bug is fixed in the newest Safari version 9.1.1 for OSX and 9.3.2. for iOS.