Name collisions in SVG Image import

[wodeni]

Describe the bug

When there are more than one diagram on the page, imported images might not show up. This is usually caused by name collisions among the imported SVGs. If an imported SVG defines a <linearGradient id="foo"> and refer to foo by url(#foo) somewhere else, there must be only one such reference in the entire DOM tree.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://361060b0.penrose-72l.pages.dev/try/
2. Click on the "Walk on Spheres" example
3. Select Grid
4. See the following output

Expected behavior

Spheres should be shaded by the imported image:

Additional context
This is a known problem with SVG (e.g. gregberge/svgr#150) and there are some SVG cleaning tools like svgr. It would be great to experiment with some of them.

[wodeni]

#1444 revealed another likely case of this issue, which I bumped into again in #1464. Reopen to investigate.

[keenancrane]

It would be great to experiment with some of them.

It would be great to pursue this sooner rather than later, given how important SVG support is in real use cases. I've flagged it as high priority to keep focus on it.

In general our SVG support has really suffered regression with some recent PRs. Given that it's quite central to the core value of the system, let's please not sacrifice it in favor of more "nice to have" features like the gallery, preview icons, build system niceties, etc.