Add linting for extraneous elements in SVGs

[ericcornelissen]

To prevent issues like #3220. The simplest solution would be to run a regular expression on all SVGs to guarentee they start with <svg and end in </svg> (e.g. ^<svg.*</svg>$). But ideally we include this linting step as a part of svglint, and I'm not sure if that allows us to do such a regular expression.

[PeterShaggyNoble]

It looks to me like we should be able to do it within custom as both functions in there have the SVG file available via the $ parameter so would it be as simple as adding a new function, passing it the same agrument for the SVG, converting the markup to a string and then running the RegEx validation on it?

Side note: I have been meaning for a while now to run such a RegEx on all our existing icons to take care of a few, other, minor issues I've encountered (e.g., a space before the / in the <path> tag), for the sake of consistency.

[ericcornelissen]

It looks to me like we should be able to do it within custom as both functions in there have the SVG file available via the $ parameter so would it be as simple as adding a new function, passing it the same agrument for the SVG, converting the markup to a string and then running the RegEx validation on it?

Definitely, just wasn't 100% sure so I added the caveat to the post 🙂

Side note: I have been meaning for a while now to run such a RegEx on all our existing icons to take care of a few, other, minor issues I've encountered (e.g., a space before the / in the tag), for the sake of consistency.

Good idea, I'd be in favor of that 👍 Perhaps you could open a separate issue for that with a complete list of what you want to test for so there can be proper discussion?