SVG/use testcase

This is driving me crazy… newer versions of (mobile) safari seem to download too much content when you use svg and use with an external svg file and fragment identifiers (like svg for everybody does).

Test: some SVG

Code example

The SVG icons and logos are coded like this:


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

What's wrong?

Most supported browser download the externally used svg file one time, while Safari > 9 on desktop and Safari on iOS > 9.2 loads the complete file everytime an icon is referrenced via the <use> tag.

Google Chrome Version 49.0.2623.87 (64-bit)

This page: 3 requests | 87.8KB transferred | 1 time icons.svg

Safari Version 9.1 (11601.5.17.1)

This page: 14 requests | 2.48MB | 11 times icons.svg