SVGs disappear if first instance is found in a `display:none` component

[xaviergmail]

The title describes it well. I have an app that uses PrimeVue's TabPanels. Each tab has a navigation menu using SVG icons. When switching tabs, PrimeVue applies display: none to inactive tab panels.

Reproduction

Here is a StackBlitz repro: https://stackblitz.com/edit/nuxt-svgo-playground-fvu9fj?file=app.vue

display:none in the parent of the first svg:

without display:none in the parent of the first svg:

In my PrimeVue app, this makes it show but without the background.

First tab

Second tab

I can update the stackblitz example using PrimeVue the way I have it configured in my app if necessary

[jd1378]

Hi the problem is not in svgo, but in svg itself this would still happen if you replace the component with the svg content itself

the reason is that your svg is defining ids each time it is added to the dom, and the duplicate IDs act weird in general with svg

what I suggest to you is either of these:

• make sure only one of the SVGs of this kind is rendered at once in a page
• move the definition of ids out of your svg, so it is only defined once on the page. this is quite a hassle.
• change your svg and make it work without any id. this is my recommended approach whenever it's possible.

[xaviergmail]

Thanks for the quick feedback and advice! I was under the impression that modern avg loaders would take care of all that for me by magically reassigning unique ids each time the component is rendered, is there such a feature?

Perhaps PrimeVue could benefit from wrapping panels inKeepAlive rather than using display: none, I'll play around with that and if not, the latter two workarounds you mentioned will definitely work. Thanks!

[jd1378]

You're welcome I wished such feature existed as well, but it would require runtime modifications or some way to keep track of renders, and to detect and pass ids to svg component to render, which I don't think will happen with the way things are, at least now

Feel free to open another issue if there's any other problem