Svelte 5: svelte:element with the this of svg renders with a delay if it has spread props.

[HighFunctioningSociopathSH]

Describe the bug

When a svelte:element with the "this" of svg is rendered with props spread into it, it will render with a delay compared to a one that doesn't have spread props.
The effect is less when previewing build but it is still there.

Reproduction

For example in the code below the second SVG will render with a delay that can cause layout shift or flash of unstyled content.

<script lang="ts">
  let props = $state({
    height: "15px",
    width: "15px",
    viewBox: "0 0 185.343 185.343"
  });
</script>

<svelte:element this="svg" height="15px" width="15px" viewBox="0 0 185.343 185.343">
  <path
    style="fill:#010002;"
    d="M51.707,185.343c-2.741,0-5.493-1.044-7.593-3.149c-4.194-4.194-4.194-10.981,0-15.175
          l74.352-74.347L44.114,18.32c-4.194-4.194-4.194-10.987,0-15.175c4.194-4.194,10.987-4.194,15.18,0l81.934,81.934
          c4.194,4.194,4.194,10.987,0,15.175l-81.934,81.939C57.201,184.293,54.454,185.343,51.707,185.343z"
  />
</svelte:element>
<svelte:element this="svg" {...props}>
  <path
    style="fill:#010002;"
    d="M51.707,185.343c-2.741,0-5.493-1.044-7.593-3.149c-4.194-4.194-4.194-10.981,0-15.175
          l74.352-74.347L44.114,18.32c-4.194-4.194-4.194-10.987,0-15.175c4.194-4.194,10.987-4.194,15.18,0l81.934,81.934
          c4.194,4.194,4.194,10.987,0,15.175l-81.934,81.939C57.201,184.293,54.454,185.343,51.707,185.343z"
  />
</svelte:element>

For some reason the playground refuses to show a svelte:element with the "this" of svg while it works well with something like "div", but here is the repo anyway. REPO

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-12650H
    Memory: 4.75 GB / 15.63 GB
  Binaries:
    Node: 20.12.2 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD
    bun: 1.1.3 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (129.0.2792.52)
    Internet Explorer: 11.0.22621.3527

Severity

annoyance

[Rich-Harris]

It's failing in the playground because this only appears to work with SSR. We will need to add a special case for <svg> elements — IIUC the children aren't being created in the SVG namespace because the parent of the <svg> is an HTML element.

The delay is occurring because the viewBox attribute is omitted from the server-rendered HTML in the spread case, for reasons I don't yet understand

[Rich-Harris]

#14492 fixes the second part (the viewBox attribute was being omitted until hydration) but not the first part. Essentially, given a situation like this...

<svelte:element this={'svg'} width="100" height="100">
  <circle cx="50" cy="50" r="50"></circle>
</svelte:element>

...the <circle> lives in a $.template instead of an $.ns_template. Not exactly sure what the right fix is; we might need to use $.ns_template for all children of <svelte:element>, but default to a <div> in the common case.

[dummdidumm]

We try to infer the namespace statically but default to the html namespace if it's unclear. In this case we could check the children and see that they belong to the SVG namespace.
In general though, there will always be edge cases which is why it's possible to tell the namespace explicitly - see bottom of https://svelte.dev/docs/svelte/svelte-element