fix: render attributes during SSR regardless of case

.changeset/proud-crews-itch.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: render attributes during SSR regardless of case

packages/svelte/src/internal/server/index.js

@@ -222,11 +222,13 @@ export function spread_attributes(attrs, classes, styles, flags = 0) {
 		if (name[0] === '$' && name[1] === '$') continue; // faster than name.startsWith('$$')
 		if (INVALID_ATTR_NAME_CHAR_REGEX.test(name)) continue;
 
+		var value = attrs[name];
+
 		if (lowercase) {
 			name = name.toLowerCase();
 		}
 
-		attr_str += attr(name, attrs[name], is_html && is_boolean_attribute(name));
+		attr_str += attr(name, value, is_html && is_boolean_attribute(name));
 	}
 
 	return attr_str;

packages/svelte/tests/runtime-runes/samples/dynamic-element-svg/_config.js

@@ -0,0 +1,20 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['hydrate'],
+
+	test({ assert, target, hydrate }) {
+		const svg = target.querySelector('svg');
+		const circle = target.querySelector('circle');
+
+		assert.equal(svg?.getAttribute('viewBox'), '0 0 1000 1000');
+		assert.equal(svg?.namespaceURI, 'http://www.w3.org/2000/svg');
+		assert.equal(circle?.namespaceURI, 'http://www.w3.org/2000/svg');
+
+		hydrate();
+
+		assert.equal(svg?.getAttribute('viewBox'), '0 0 1000 1000');
+		assert.equal(svg?.namespaceURI, 'http://www.w3.org/2000/svg');
+		assert.equal(circle?.namespaceURI, 'http://www.w3.org/2000/svg');
+	}
+});

packages/svelte/tests/runtime-runes/samples/dynamic-element-svg/main.svelte

@@ -0,0 +1,11 @@
+<script>
+	let props = {
+		height: '100px',
+		width: '100px',
+		viewBox: '0 0 1000 1000'
+	};
+</script>
+
+<svelte:element this={'svg'} {...props}>
+	<circle cx="500" cy="500" r="500"></circle>
+</svelte:element>