Three.js: SVGLoader - Incorrect/mangled path rendering

[Thornation]

Describe the bug

Hello, it appears that with SVG's which have been exported from Adobe XD, SVGLoader fails to convert the paths reliably.

This might be the same issue as #18560

Alternatively, is there a tool/script which can convert/re-export the SVG paths into a format Three can parse?

Live example
Here is how the SVG renders as a browser element

• jsfiddle

Screenshots

Here is how the SVG appears when imported into the ThreeJS editor (https://threejs.org/editor/)

Platform:

• Device: [Desktop,]
• OS: [Windows]
• Browser: [Chrome]
• Three.js version: [r120.1]

[mrdoob]

Can you attach the svg file here?

[Thornation]

Can you attach the svg file here?

Apologies, I had left the SVG inlined in the JS fiddle. File has been attached below.

tooth.svg.zip

[Thornation]

My mistake - This doesn't appear to be caused by Paths exported from XD. I was unaware SVGO 'optimizes' paths by default which changes the delimiter inside the path.

For now I can just disable path optimization in SVGO.

I've attached below a zip with 2 SVG's, the clean export from XD which Three loads fine, and the mangled one.
svgs.zip

The only difference appears to be here

Clean export (Loads Fine):

<path id="tooth-solid-export" d="M16.035,3.479A4.679,4.679,0,0,0,12.711.092,3.836,3.836,0,0,0,9.49.971a2.413,2.413,0,0,1-.379.2l1.023.658a.578.578,0,0,1-.625.972L5.877.465A3.324,3.324,0,0,0,3.463.092,4.679,4.679,0,0,0,.139,3.479a4.739,4.739,0,0,0,.777,3.99,7.51,7.51,0,0,1,1.311,3.879,38.586,38.586,0,0,0,.757,5.07l.282,1.227a1.1,1.1,0,0,0,2.139.02l1.245-5a1.479,1.479,0,0,1,2.873,0l1.245,5a1.1,1.1,0,0,0,2.139-.02l.282-1.227a38.638,38.638,0,0,0,.757-5.07,7.509,7.509,0,0,1,1.311-3.879,4.735,4.735,0,0,0,.778-3.99Z" transform="translate(0.006 -0.001)" fill="#fff"/>
vs Optimized (mangled):

<path id="tooth-solid-export" d="M16.035 3.479A4.679 4.679 0 0012.711.092 3.836 3.836 0 009.49.971a2.413 2.413 0 01-.379.2l1.023.658a.578.578 0 01-.625.972L5.877.465A3.324 3.324 0 003.463.092 4.679 4.679 0 00.139 3.479a4.739 4.739 0 00.777 3.99 7.51 7.51 0 011.311 3.879 38.586 38.586 0 00.757 5.07l.282 1.227a1.1 1.1 0 002.139.02l1.245-5a1.479 1.479 0 012.873 0l1.245 5a1.1 1.1 0 002.139-.02l.282-1.227a38.638 38.638 0 00.757-5.07 7.509 7.509 0 011.311-3.879 4.735 4.735 0 00.778-3.99z" fill="#fff"></path>

[makc]

0,0,0,12 vs 0 0012 ? is this even supported by browsers

edit: it is! browsers read this just fine

[mrdoob]

You can use https://yqnn.github.io/svg-path-editor/ to compare the d commands.