fix(cleanupIds): handle uri encoded references

[SethFalco]

References to IDs in href or url() references are URIs, and so should be URI encoded/decoded.

We'll have to review and update all usage in SVGO for this, but for now, I've resolved the immediate issue found in Cleanup IDs.

Related

• Fixes [cleanupIDs] symbol is incorrectly removed when its ID is only used by URL-encoded reference #1696

[ctrlcctrlv]

Awesome, thanks! 😍

[simonhermann]

Hi @SethFalco
we're using SVGO to optimize svgs only containing a <symbol>. Before 3.1, this worked as expected, with 3.1+, SVGO only returns an empty svg element. I guess it is related to this change.
Is this a bug or am I missing something?

our svgo.config.js

// @ts-check
/** @type {import('svgo').Config} */
module.exports = {
	plugins: [
		{
			name: 'preset-default',
			params: {
				overrides: {
					cleanupIds: false, // prevented removing unused <symbol>s before svgo 3.1
					removeViewBox: false,
				},
			},
		},
		{
			name: 'sortAttrs',
			params: {
				xmlnsOrder: 'alphabetical',
			},
		},
	],
};

[SethFalco]

@simonhermann

Hey! Sorry about that. Would you mind sharing an example with me, so I can review it in more detail? If it's private, you're welcome to email it to me instead of uploading it here.

In general, an SVG with only symbols should have always become empty after running through SVGO's default preset, as SVG sprites aren't a use-case the default preset is designed to handle.

I'm not dismissing your issue ofc, we'll get this addressed! Sorry for effectively releasing a breaking change without warning. We'll improve our documentation and handling of SVG sprites for the next minor release.

I'm not sure if it's caused by this PR in your case, but the problem you've raised was ultimately reported in another issue. The author closed it, but it's on my radar, and I'll publish a solution this weekend:

• Optimize SVG Sprites #1962

The default behavior will remain the same, but we'll add a preset specific for SVG sprites and add documentation for how to use that preset.

Meanwhile, I recommend you give that issue a read. You're also welcome to chime in if you have any specific thoughts on what should be in or out of an SVG sprite preset. No pressure though!

Let me know if you have any problems.

[simonhermann]

Hi @SethFalco, thanks for your quick reply!
Nothing to apologize! From your link I see now removeHiddenElems: false makes the difference, I just assumed, setting cleanupIds: false was enough, since it was, before 3.1.

Maybe you could enhance the docs on removeHiddenElems to include an example with <symbol>?
I tried searching the docs, but did not find what I need to do to perserve unused symbols, but of course now I realise they are obviously hidden elements.

Thank you for your support and the awesome work!