SVG G Element not rendering by attributes

[stemaDev]

Describe the bug

In both chrome and firefox, if within a component there is a "g" tag and a "div" on main level, the attributes of the "g" are disregarded by the browsers. You can see it written in the DOM, but these attributes are disregarded in the rendered view. Only if you do "edit as html" in devtools, and add a space somewhere it gets rendered. Inspecting the element the "g[Attributes Style]" is not there. If there's no HTML element next to the "g" there's no problem. The reason I'm putting a "div" next to the "g" is to have a tooltip (I portal it to "body"). Making a component encapsulating the "div" solves the issue. This worked in svelte4 and also works with "svg" element, but not with "g"

Reproduction

https://svelte.dev/playground/hello-world?version=5.19.4#H4sIAAAAAAAACpVRzWrDMAx-FaHTBiE_LbuEJDB22TtMOzSNmpg5trHVpKX03UdC062lO-wmfbL0_fiEZtMz5vjOWlsYrdcNPHGjhJtnjHCnNAfMP04oRze9mwCMlq1X5-IwsJYJqzeBH-Fba4SNBMyxCFuvnFRkSFTvrBd4s72zho3AztseCOPkCl1uEJIpkutqEYYWRtVIVxKu05QQOlZtJyXham4H9kFZUxJmcUYIh16bUBJ2Ii5PknEc43EdW98mqzRNkzC0hLOm4kdNUs2kQ1thhMIHwVz8ns_RH1Hci74N5MH0dywt7JTWJWGt97xo8byVq8_Vrc9sbg9zRQjHpbicUaZjr4TwYqNdYrvMnTJfD2myW5qXf7FMYZEpXCWdCtCoAUalNdQM009vNDcgFmrbHIvE3cX6ef4G_ujQ2IsCAAA=

Logs

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
    Memory: 9.90 GB / 31.77 GB
  Binaries:
    Node: 18.18.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.1.0 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Chrome: 131.0.6778.265
    Edge: Chromium (132.0.2957.115)
    Internet Explorer: 11.0.19041.4355

Severity

annoyance

[Prinzhorn]

This is broken markup in multiple ways (svg inside svg and p inside svg). And "this div will be portaled to body" is a weird way of saying "the browser will try it's best to make it work with the broken markup I gave it and will place the invalid element somewhere else instead of crashing"

(edit: the reason it's displaying different than in raw HTML is because Svelte is trying its best to figure out which namespace to put on each element but fails and you end up with mixed xhtml/svg)

[dummdidumm]

I second that - the HTML is invalid, so it will not render properly, and if you were to server-render this then you would get the browser trying to repair it as pointed out, leading to unexpected results.

Therefore closing this issue - make sure your HTML is valid, then this will render as expected.