From 81b3f9faf824b56c49cbbcebb932f2f7a30a411e Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Tue, 12 Dec 2023 12:41:19 +0000
Subject: [PATCH] fix: improve html tag svg behaviour

---
 .changeset/strong-gifts-smoke.md                   |  5 +++++
 packages/svelte/src/internal/client/reconciler.js  |  4 +++-
 .../samples/svg-html-tag4/_config.js               | 14 ++++++++++++++
 .../samples/svg-html-tag4/main.svelte              |  7 +++++++
 4 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/strong-gifts-smoke.md
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/svg-html-tag4/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/svg-html-tag4/main.svelte

diff --git a/.changeset/strong-gifts-smoke.md b/.changeset/strong-gifts-smoke.md
new file mode 100644
index 000000000000..202efbb48094
--- /dev/null
+++ b/.changeset/strong-gifts-smoke.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: improve html tag svg behaviour
diff --git a/packages/svelte/src/internal/client/reconciler.js b/packages/svelte/src/internal/client/reconciler.js
index c96d9460a941..80c221e448c5 100644
--- a/packages/svelte/src/internal/client/reconciler.js
+++ b/packages/svelte/src/internal/client/reconciler.js
@@ -89,6 +89,8 @@ export function reconcile_html(dom, value, svg) {
 	}
 	var clone = content.cloneNode(true);
 	frag_nodes = Array.from(clone.childNodes);
-	target.before(svg ? /** @type {Node} */ (clone.firstChild) : clone);
+	frag_nodes.forEach((node) => {
+		target.before(node);
+	});
 	return /** @type {Array<Text | Comment | Element>} */ (frag_nodes);
 }
diff --git a/packages/svelte/tests/runtime-legacy/samples/svg-html-tag4/_config.js b/packages/svelte/tests/runtime-legacy/samples/svg-html-tag4/_config.js
new file mode 100644
index 000000000000..1e59eab130e5
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/svg-html-tag4/_config.js
@@ -0,0 +1,14 @@
+import { ok, test } from '../../test';
+
+export default test({
+	test({ assert, target, component }) {
+		let svg = target.querySelector('svg');
+		ok(svg);
+
+		assert.equal(svg.namespaceURI, 'http://www.w3.org/2000/svg');
+		assert.htmlEqual(
+			svg.outerHTML,
+			'<svg height="24" style="border:1px solid red;" width="24"><path d="M17 11h1a3 3 0 0 1 0 6h-1"></path><path d="M9 12v6"></path><path d="M13 12v6"></path><path d="M14 7.5c-1 0-1.44.5-3 .5s-2-.5-3-.5-1.72.5-2.5.5a2.5 2.5 0 0 1 0-5c.78 0 1.57.5 2.5.5S9.44 2 11 2s2 1.5 3 1.5 1.72-.5 2.5-.5a2.5 2.5 0 0 1 0 5c-.78 0-1.5-.5-2.5-.5Z"></path><path d="M5 8v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8"></path></svg>'
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/svg-html-tag4/main.svelte b/packages/svelte/tests/runtime-legacy/samples/svg-html-tag4/main.svelte
new file mode 100644
index 000000000000..c8d313689996
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/svg-html-tag4/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	let content = '<path d="M17 11h1a3 3 0 0 1 0 6h-1" /><path d="M9 12v6" /><path d="M13 12v6" /><path d="M14 7.5c-1 0-1.44.5-3 .5s-2-.5-3-.5-1.72.5-2.5.5a2.5 2.5 0 0 1 0-5c.78 0 1.57.5 2.5.5S9.44 2 11 2s2 1.5 3 1.5 1.72-.5 2.5-.5a2.5 2.5 0 0 1 0 5c-.78 0-1.5-.5-2.5-.5Z" /><path d="M5 8v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8" />'
+</script>
+
+<svg width="24" height="24" style="border:1px solid red;">
+	{@html content}
+</svg>