poppa/sveltekit-svg

Library overriding gradient IDs to #a

Closed this issue · 2 comments

yaeszlo commented

I'm using version 0.3.1

the problem with this is essentially described here https://selleo.com/til/posts/htrdr7kwfo-disappearing-gradient-from-svg

Basically means, when I'm hiding an icon on mobile and it has a gradient, it will hide all other gradients on every other icon.

Is there something I can do to quickly mitigate that? I am kinda time-constrained

Best Regards

yaeszlo commented

I have found a way to disable the ID "optimization"

this is what needs to be done in svelte.config file:

svg({
	includePaths: ['./src/assets/'],
	svgoOptions: {
		plugins: [
			{
				name: 'preset-default',
				params: {
					overrides: {
						cleanupIDs: false
					}
				}
			}
		]
	}
})

Altough that's only half the solution, because due to that "bug" described in the link I posted, if you use the same icon on single page twice and dissapear one of them (display: none), second one will lose gradient as well. Not really the fault of this library I guess.

poppa commented

Hi @yaeszlo! I'm glad you partially solved your issue.

Altough that's only half the solution, because due to that "bug" described in the link I posted, if you use the same icon on single page twice and dissapear one of them (display: none), second one will lose gradient as well. Not really the fault of this library I guess.

The way I see it this is how browser works: If you hide something withdisplay:none it effectively removes that element from the DOM tree, so if you happen to reference something from that element that reference will of course be lost.

And this has of course nothing to to with this plugin.