Svelte 5: Invalid namespace of elements within SVG

[mspae]

Describe the bug

In certain situations* the elements inside SVG elements appear to have an invalid namespace which means they are shown in the inspector (DOM tree) but are not actually visible.

*] Such as using conditions and snippets in an svg element. Correction: When using a <svelte:element> whose this property expression is defined inside a closure (f.x. inside a snippet as a @const)

A similiar issue seems to have popped up several times through the years: https://github.com/sveltejs/svelte/issues?q=is%3Aissue+is%3Aopen+namespace+svg

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAA-1XXW_bNhT9K4S6hwQQaZGiJVt1sm5ZMwzIiqHF9jINgyMrtgBZEiQmTmD4v-9cUlaaeOm6D9Qvg2Fbury8H-dc8UBb76Yo885Lft161Xyde4n3TdN4vmceGrrp7vLS5Ljv6ts2I8usy9qiMedpxVixburWsHd1u56XH-6W7Kat1yz1xGgwCRch9V6nVWr6Dd89IFeRvS3zdV6ZJxsPlj4OMBsNyXGzCs9dGvbhl-99VtWsaetrbExmI6zB47Gw0bAFvmxTmBVbuEwsd6mGTYfF7Xd35qHM6dIky7K-npcn3d3ylG3Jkpr61pRFlSdMNvesq8tiwdrl9fwk8O1HjE9fO8f1_J5vioVZwTXI19a6s8318QH3ul4UN0W-8BLT3uY7f2BnaOnTHKHq-3VZdWeptzKmSUajzWYjNqGo2-VIBUEwgkvqsbsi33xb38MtYAGbToRkUk5Sz9I7a-ZmRReMYUpKOL26vAzfBkHqOesCph-nUkx8ORbRxSQQUx4I6Y-nQnEtYl-HIvLHQl3JCGalxORiAouKxdgPhfZDrPlSTMlxmnEpQj8WIWLAqhE2hEHBShAxlnFFe0TENdwim0EiO22M_AnCAGVfTqgCLKmx0JmUVFvsh4ryBoinJxQ9ELqkMrjET0YXNpoSMZeUBekVR2rZp0YRHKUhg-JUGkdptB5m8ObUpsY6fikAarqYAgPKKv1p7Hqf-gNUDsDRyyhfPoFYA1iUbDGiNhVyo01UQkUCSFjjDFUQ6tp-p6AipPbGKJGKDiw8Glti_EeAMioDcsC_pIb7Ri3kuI-IFYfUBHDqUmJbWFp-Zeb-4BZYd1SHey1kRkwoQtkyRTyhdxRHKS2tthSkA06BiK-iMSiL1YCytoVSgwreKBJdTLA7pEIpqwVeosfI0s7JVVsKiCBJfVF1kWMKMR6bjksuaUIiEe8HihakDRrRHPKxLV__BczyGcx6DzMFUIQDLWAiIxqm-HHQhjYxJACGRpmmf2z7GGdISv3QCFukfErqU9LQhtX2S6FDGnTKaUF1z90AKsFGRMGFLgjUPbtubGEAvZxGnOjlRC8wJX4JYZnZX8sFeU-pWE7s_m3Er0KaJR0NzxF3Q-P6VIQrNoLiLrB4oHefqH06RmE_RtFLY1QSr-gpfgnaPvs_A5ii0JMlaYXTAWZZ5fYYI1ovNB1WMkAiX6v-WUXxw2P7-LzP6OA9_9QJf6A_n6fGqcnqqjNsy7pVfVsu3ufVIm_Zjp2xr6CLTXfi9KfMDaMTR9JCZ-Ymx8KTFfXxCgnfPrSZL2kt9eyJdSDITiP_A-VJzcx1mvTa7HTTrIrubEtF7JwhNddFtUic3fa0c4fmS3r1v2L9S8Vy5IyesuPIN9tXXVU0zX6Ifu_vTk53rqDtm2GKzvYjxPq1Z3yzgeqeacaeMa3-hOnLZzR_MdU8omZ-WcU8il4eSy2PrJXHVMoj62T_wmW2o_4M2fUnzJvWidrhAeNk1b3jtU5oV_r8HRS1a-ZZ3tHbnYb1J1KJhDm1YF87JRTV3u_n9z-wBALHObtFphu8zy0Y56m3m127sBRA9QFUH0B9ToBDyf9t9weK7zAyfg8AAA==

Logs

No response

System Info

System:
    OS: Linux 5.10 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (4) x64 Intel Core Processor (Skylake, IBRS)
    Memory: 6.80 GB / 7.76 GB
    Container: Yes
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 20.13.1 - /usr/bin/node
    npm: 10.5.2 - /usr/bin/npm
  Browsers:
    Chrome: 125.0.6422.112
  npmPackages:
    @astrojs/svelte: ^5.5.0 => 5.5.0 
    astro: ^4.9.2 => 4.9.2 
    svelte: ^5.0.0-next.151 => 5.0.0-next.151

Severity

blocking an upgrade

Update

Fixed wrong error description and update reproduction REPL link

[mspae]

I forgot to mention: Using <svelte:options namespace="svg" /> does not have any effect.

I was able to get the element to show using a use: directive like this to dynamically change the elements namespace: #7807 (comment)

[dummdidumm]

I can't reproduce this. The REPL works as expected: If I add shouldRender to the <SvgWithCondition /> component it shows the path (it's invisible because it has white fill, changing the color reveals it).

Please state the steps to reproduce this.

[mspae]

Oops. Sorry, you're totally right. I seem to have been confused 🙈

The issue happens when using a dynamic element (<svelte:element>) within an svg but only when defining the tag expression inside the close (f.x. the snippet)

Here is an updared reproduction:

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAA-1XXW_bNhT9K4S6hwQQaZGiJVt1sm5ZMwzIiqHF9jINgyMrtgBZEiQmTmD4v-9cUlaaeOm6D9Qvg2Fbury8H-dc8UBb76Yo885Lft161Xyde4n3TdN4vmceGrrp7vLS5Ljv6ts2I8usy9qiMedpxVixburWsHd1u56XH-6W7Kat1yz1xGgwCRch9V6nVWr6Dd89IFeRvS3zdV6ZJxsPlj4OMBsNyXGzCs9dGvbhl-99VtWsaetrbExmI6zB47Gw0bAFvmxTmBVbuEwsd6mGTYfF7Xd35qHM6dIky7K-npcn3d3ylG3Jkpr61pRFlSdMNvesq8tiwdrl9fwk8O1HjE9fO8f1_J5vioVZwTXI19a6s8318QH3ul4UN0W-8BLT3uY7f2BnaOnTHKHq-3VZdWeptzKmSUajzWYjNqGo2-VIBUEwgkvqsbsi33xb38MtYAGbToRkUk5Sz9I7a-ZmRReMYUpKOL26vAzfBkHqOesCph-nUkx8ORbRxSQQUx4I6Y-nQnEtYl-HIvLHQl3JCGalxORiAouKxdgPhfZDrPlSTMlxmnEpQj8WIWLAqhE2hEHBShAxlnFFe0TENdwim0EiO22M_AnCAGVfTqgCLKmx0JmUVFvsh4ryBoinJxQ9ELqkMrjET0YXNpoSMZeUBekVR2rZp0YRHKUhg-JUGkdptB5m8ObUpsY6fikAarqYAgPKKv1p7Hqf-gNUDsDRyyhfPoFYA1iUbDGiNhVyo01UQkUCSFjjDFUQ6tp-p6AipPbGKJGKDiw8Glti_EeAMioDcsC_pIb7Ri3kuI-IFYfUBHDqUmJbWFp-Zeb-4BZYd1SHey1kRkwoQtkyRTyhdxRHKS2tthSkA06BiK-iMSiL1YCytoVSgwreKBJdTLA7pEIpqwVeosfI0s7JVVsKiCBJfVF1kWMKMR6bjksuaUIiEe8HihakDRrRHPKxLV__BczyGcx6DzMFUIQDLWAiIxqm-HHQhjYxJACGRpmmf2z7GGdISv3QCFukfErqU9LQhtX2S6FDGnTKaUF1z90AKsFGRMGFLgjUPbtubGEAvZxGnOjlRC8wJX4JYZnZX8sFeU-pWE7s_m3Er0KaJR0NzxF3Q-P6VIQrNoLiLrB4oHefqH06RmE_RtFLY1QSr-gpfgnaPvs_A5ii0JMlaYXTAWZZ5fYYI1ovNB1WMkAiX6v-WUXxw2P7-LzP6OA9_9QJf6A_n6fGqcnqqjNsy7pVfVsu3ufVIm_Zjp2xr6CLTXfi9KfMDaMTR9JCZ-Ymx8KTFfXxCgnfPrSZL2kt9eyJdSDITiP_A-VJzcx1mvTa7HTTrIrubEtF7JwhNddFtUic3fa0c4fmS3r1v2L9S8Vy5IyesuPIN9tXXVU0zX6Ifu_vTk53rqDtm2GKzvYjxPq1Z3yzgeqeacaeMa3-hOnLZzR_MdU8omZ-WcU8il4eSy2PrJXHVMoj62T_wmW2o_4M2fUnzJvWidrhAeNk1b3jtU5oV_r8HRS1a-ZZ3tHbnYb1J1KJhDm1YF87JRTV3u_n9z-wBALHObtFphu8zy0Y56m3m127sBRA9QFUH0B9ToBDyf9t9weK7zAyfg8AAA==

[dummdidumm]

It's not possible for Svelte to know what namespace to assign to the dynamic element because it's inside a snippet and therefore could be rendered from anywhere. What you can do in these situations is add xmlns="http://www.w3.org/2000/svg" to the <svelte:element> tag.
Giving this the documentation label, we should add this info to the docs.

[mspae]

Great, thanks for the info!