SVGLoader example is broken since r152

[bergden-resonai]

Description

Worked till r151: https://raw.githack.com/mrdoob/three.js/r151/examples/webgl_loader_svg.html
Not there's a big amount of z-ordering issues on most examples and the default tiger svg:
https://raw.githack.com/mrdoob/three.js/r152/examples/webgl_loader_svg.html

https://github.com/mrdoob/three.js/assets/37291459/b704d073-1392-4a2b-b08b-8006167e9e2c
(video showing r152 and then r151 and then back to r152)

Worth mentioning there's also a page resize issue but that existed in previous versions as well

Reproduction steps

1. Open the example: https://threejs.org/examples/#webgl_loader_svg
2. Rotate the scene
3. Look 👀

Screenshots

Version

r152

Device

Desktop, Mobile

Browser

Chrome, Firefox, Safari

OS

MacOS, Android

[Mugen87]

I can reproduce. It seems the regression was introduced by #25913. Reverting the PR fixes the issue.

/ping @donmccurdy

[Mugen87]

Um, if we don't want to revert #25913, SVGLoader probably needs to define a render order for its shapes.

[donmccurdy]

Hm. To some extent #25913 is doing exactly what it is supposed to do, and sorting the objects by distance. Clearly that is not the right choice for a 2D vector graphic. I am wondering what other feedback we will get on that PR, and hesitant to make deeper changes that depend on it. If SVGLoader defining render order seems OK whether or not the PR is later reverted, then we could go ahead and make that change.

Another solution might be #12135 (comment).

Another note — exporting this model to GLB (or another non-SVG format) and re-loading it gives a broken result, before or after r152. I'm not sure how much we can do about that, but mapping glTF Mesh/Primitive objects to three.js Compound/Mesh objects is an interesting idea.