fix: use svg methods for updating svg attributes too (#11755)

Closes #11746

we were using the svg methods for every child of svg but not for svg itself

.changeset/green-snails-tickle.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: use svg methods for updating svg attributes too

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

@@ -472,7 +472,7 @@ function serialize_dynamic_element_attributes(attributes, context, element_id) {
 function serialize_element_attribute_update_assignment(element, node_id, attribute, context) {
 	const state = context.state;
 	const name = get_attribute_name(element, attribute, context);
-	const is_svg = context.state.metadata.namespace === 'svg';
+	const is_svg = context.state.metadata.namespace === 'svg' || element.name === 'svg';
 	const is_mathml = context.state.metadata.namespace === 'mathml';
 	let [contains_call_expression, value] = serialize_attribute_value(attribute.value, context);
 

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

@@ -0,0 +1,18 @@
+import { flushSync } from '../../../../src/index-client';
+import { test, ok } from '../../test';
+
+export default test({
+	mode: ['client'],
+	test({ assert, target }) {
+		const svg = target.querySelector('svg');
+		const button = target.querySelector('button');
+		ok(svg);
+		ok(button);
+
+		assert.equal(svg.getAttribute('class'), '0');
+		flushSync(() => {
+			button.click();
+		});
+		assert.equal(svg.getAttribute('class'), '1');
+	}
+});

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

@@ -0,0 +1,8 @@
+<script>
+	let count = $state(0);
+</script>
+
+<svg class={count}>
+</svg>
+
+<button onclick={()=>count++}></button>