Generating `<image />` elements inside an `<svg>` ends up with `<img />` outside

[n-gt]

Astro Info

Astro                    v5.1.8
Node                     v20.15.1
System                   Linux (x64)
Package Manager          npm
Output                   server
Adapter                  @astrojs/cloudflare
Integrations             astro-icon
                         @astrojs/tailwind
                         @astrojs/alpinejs

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

When I try to add elements to an SVG programmatically within an <svg></svg>, the resulting html ends up with <img> tags outside of it.

What's the expected result?

<svg>
  <image 1.. />
  <image 2.. />
  ....
</svg>

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-hx1emndl?file=src%2Fpages%2Findex.astro

Participation

• I am willing to submit a pull request for this issue.

[Trombach]

I believe this is a compiler issue. The TS transform incorrectly replaces the image tags with img.

[Trombach]

This was actually an issue with using an expression {} inside an SVG element. This minimal example produces the wrong output, but just removing the curly braces fixes it.
I've submitted a PR in the compiler repo to fix this. This issue should probably be moved there as well.

[n-gt]

Thank you very much!