SVG path does not display correctly when lazy loaded

[jdgamble555]

Describe the bug

If I load a component with an SVG file and path in it, it loads correctly. However, if I only load it on the browser, hence, lazy loading the component until rendering, it does not load correctly. The components look the same in the DOM, but the browser version does not load correctly.

+page.svelte

{#if browser}
	<Test />
{/if}
<Test />

This will only load correctly once, instead of two times. The TEST component contains this basic SVG code:

components/test.svelte

<button>
	<svg viewBox="0 0 16 16" xmlns="https://www.w3.org/2000/svg" width="1em" height="1em">
		<path
			d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 0 0 1.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13H8.21zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z"
		/>
	</svg>
</button>
<br />

Reproduction

Github

StackBlitz

You will see it only displays the B button once. However, when you remove xmlns="https://www.w3.org/2000/svg" from the svg component, it renders correctly two times.

I assume there is some odd way Svelte renders "createElement" versus "createElementNS" on the client side.

Notice the preview shows one B. Delete the xmlns key / value from the svg tag in components/test.svelte and you will see it displays two Bs.

System Info

SvelteKit 1.0

Severity

annoyance

Additional Information

While there is an easy work-around for this, if someone lazy imports a package that uses the xmlns key, it could cause issues.

[Rich-Harris]

You have the wrong namespace — it's http://www.w3.org/2000/svg, not https://www.w3.org/2000/svg (http, not https).

Svelte should probably be more forgiving in this case. Transferring the issue to sveltejs/svelte

[dummdidumm]

Fixed in Svelte 5