sveltejs
Svelte 5: Invalid namespace of elements within SVG
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
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: https://github.com/sveltejs/svelte/issues/7807#issuecomment-1362454410
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.
Oops. Sorry, you're totally right. I seem to have been confused :see_no_evil:
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==
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.