fix: create <svelte:element> instances with the correct namespace

packages/svelte/src/compiler/phases/1-parse/read/options.js

@@ -1,3 +1,4 @@
+import { namespace_svg } from '../../../../constants.js';
 import { error } from '../../../errors.js';
 
 const regex_valid_tag_name = /^[a-zA-Z][a-zA-Z0-9]*-[a-zA-Z0-9-]+$/;
@@ -156,7 +157,7 @@ export default function read_options(node) {
 					error(attribute, 'invalid-svelte-option-namespace');
 				}
 
-				if (value === 'http://www.w3.org/2000/svg') {
+				if (value === namespace_svg) {
 					component_options.namespace = 'svg';
 				} else if (value === 'html' || value === 'svg' || value === 'foreign') {
 					component_options.namespace = value;

packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js

@@ -2102,9 +2102,7 @@ export const template_visitors = {
 					context.state.node,
 					get_tag,
 					b.arrow([element_id, b.id('$$anchor')], b.block(inner)),
-					namespace === 'http://www.w3.org/2000/svg'
-						? b.literal(true)
-						: /** @type {any} */ (undefined)
+					namespace ? b.literal(namespace) : /** @type {any} */ (undefined)
 				)
 			)
 		);

packages/svelte/src/constants.js

@@ -77,3 +77,6 @@ export const DOMBooleanAttributes = [
 	'seamless',
 	'selected'
 ];
+
+export const namespace_svg = 'http://www.w3.org/2000/svg';
+export const namespace_html = 'http://www.w3.org/1999/xhtml';

packages/svelte/src/internal/client/render.js

@@ -28,7 +28,9 @@ import {
 	EACH_ITEM_REACTIVE,
 	PassiveDelegatedEvents,
 	DelegatedEvents,
-	AttributeAliases
+	AttributeAliases,
+	namespace_svg,
+	namespace_html
 } from '../../constants.js';
 import {
 	create_fragment_from_html,
@@ -1543,10 +1545,10 @@ function swap_block_dom(block, from, to) {
  * @param {Comment} anchor_node
  * @param {() => string} tag_fn
  * @param {null | ((element: Element, anchor: Node) => void)} render_fn
- * @param {any} is_svg
+ * @param {string} namespace
  * @returns {void}
  */
-export function element(anchor_node, tag_fn, render_fn, is_svg = false) {
+export function element(anchor_node, tag_fn, render_fn, namespace) {
 	const block = create_dynamic_element_block();
 	hydrate_block_anchor(anchor_node);
 	let has_mounted = false;
@@ -1570,11 +1572,12 @@ export function element(anchor_node, tag_fn, render_fn, is_svg = false) {
 	// Managed effect
 	const render_effect_signal = render_effect(
 		() => {
+			const ns = namespace ?? tag === 'svg' ? namespace_svg : null;
 			const next_element = tag
 				? current_hydration_fragment !== null
 					? /** @type {HTMLElement | SVGElement} */ (current_hydration_fragment[0])
-					: is_svg
-					? document.createElementNS('http://www.w3.org/2000/svg', tag)
+					: ns
+					? document.createElementNS(ns, tag)
 					: document.createElement(tag)
 				: null;
 			const prev_element = element;
@@ -2327,7 +2330,7 @@ export function cssProps(anchor, is_html, props, component) {
 			tag = document.createElement('div');
 			tag.style.display = 'contents';
 		} else {
-			tag = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+			tag = document.createElementNS(namespace_svg, 'g');
 		}
 		insert(tag, null, anchor);
 		component_anchor = empty();
@@ -2821,7 +2824,7 @@ export function spread_dynamic_element_attributes(node, prev, attrs, css_hash) {
 			/** @type {Element & ElementCSSInlineStyle} */ (node),
 			prev,
 			attrs,
-			node.namespaceURI !== 'http://www.w3.org/2000/svg',
+			node.namespaceURI !== namespace_svg,
 			css_hash
 		);
 	}

packages/svelte/tests/runtime-legacy/samples/dynamic-element-svg-implicit-namespace/_config.js

@@ -0,0 +1,12 @@
+import { test } from '../../test';
+
+export default test({
+	html: '<svg><path></path></svg>',
+
+	test({ assert, target }) {
+		const svg = target.querySelector('svg');
+		const rect = target.querySelector('path');
+		assert.equal(svg?.namespaceURI, 'http://www.w3.org/2000/svg');
+		assert.equal(rect?.namespaceURI, 'http://www.w3.org/2000/svg');
+	}
+});

packages/svelte/tests/runtime-legacy/samples/dynamic-element-svg-implicit-namespace/main.svelte

@@ -0,0 +1,10 @@
+<script>
+	// ensure these are treated as dynamic, despite whatever
+	// optimisations we might apply
+	export let svg = 'svg';
+	export let path = 'path';
+</script>
+
+<svelte:element this={svg}>
+	<svelte:element this={path}></svelte:element>
+</svelte:element>