Adding new content does not work in IE11?

[Jiri Pokorny]

I read issue #4 but still can't get to work this in IE11. It results in empty SVG added to DOM.

$("#container").html("<svg><use xlink:href=\"sprite.svg#icon\"></use></svg>");

Here is my "codepen" https://skrz.cz/storage/temp/svg4everybody/index.html

[Jiri Pokorny]

So above code really doesn't work. It occurs when inline SVG links to another use element in external SVG.

Inline SVG:

<svg>
	<use xlink:href=sprite.svg#arrow-left-usage"></use>
</svg>

sprite.svg:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
		<symbol viewBox="0 0 32 32" id="arrow-left">
			...
		</symbol>
	</defs>
	<use id="arrow-left-usage" xlink:href="#arrow-left" />
</svg>

For example svg-sprite-loader produces SVG sprites with this technique.

So workaround is refer to SVG symbol directly, like so:

<svg>
	<use xlink:href=sprite.svg#arrow-left"></use>
</svg>