Repository: three.js
Issue: SVGLoader: render path incorrectly
Labels: Loaders,Needs Investigation

### Description

I want to render some icons from https://fonts.google.com/noto/specimen/Noto+Emoji. Instead of using font loader, I used other tools to generate SVG from the font and render it in three.js with SVGLoader.

However some of the icons are rendered incorrectly. Especially when there are holes in the icons.

For example, I would expect the icon is like:
![1692538973157](https://github.com/mrdoob/three.js/assets/5328030/2dc9691b-cdb2-4a7f-ab4e-edc1f56f4575)

But in three.js:
![1692539012719](https://github.com/mrdoob/three.js/assets/5328030/4be203e9-5395-44ca-8cf2-68fca62d8fc7)

The generated svg is below:
`<svg xmlns="http://www.w3.org/2000/svg" width="2000" height="2000" viewBox="0 0 2000 2000"><g transform="scale(0.12060007040760723 -0.12060007040760723) translate(0 1679.84)"><path d="M1300 340q-216 0-404.5-80.5-188.5-80.5-331.5-223.5-143-143-223.5-331.5-80.5-188.5-80.5-404.5 0-216 80.5-404.5 80.5-188.5 223.5-331.5 143-143 331.5-223.5 188.5-80.5 404.5-80.5 215 0 403.5 80.5 188.5 80.5 331.5 223.5 143 143 224 331.5 81 188.5 81 404.5 0 216-81 404.5-81 188.5-224 331.5-143 143-331.5 223.5-188.5 80.5-403.5 80.5m-440-359l25-94 49 6 5-41-44-5 17-65 46 6 5-41-41-5 24-92-40-5-24 92-41-6 24-91-41-5-24 91-49-5-5 42 43 5-16 65-47-6-4 40 40 5-24 95 40 4 24-94 42 5-25 95 41 4m-5-140l-42-4 17-65 41 5-16 64m285 202l6-51q39-2 62.5-27.5 23.5-25.5 23.5-62.5 0-23-12-40-12-17-41-33l-30-17q-20-11-27.5-21.5-7.5-10.5-7.5-25.5 0-34 37-34 43 0 79 26l18-41q-13-9-29-16-16-7-36-11l4-37-27-4-5 37q-42 0-65 23-23 23-23 63 0 44 53 76l33 20q32 19 32 41 0 40-46 40-45 0-88-35l-6 50q33 22 72 26l-6 50 29 4m231-5q36 0 36-36 0-37-36-37-36 0-36 37 0 36 36 36m618 212l-1490-156 64-622 1490 156-64 622m-586-324l38-225-67-8-18 227 47 6m-445-526q-52 0-89-44.5-37-44.5-37-105.5 0-62 37.5-106.5 37.5-44.5 88.5-44.5 53 0 89.5 44.5 36.5 44.5 36.5 106.5 0 61-36.5 105.5-36.5 44.5-89.5 44.5m738 706q25 0 58-10l5-35q-33 10-64 10-55 0-87-33.5-32-33.5-32-92.5 0-77 33.5-132 33.5-55 91.5-55 47 0 76 33.5 29 33.5 29 85.5 0 46-11.5 78-11.5 32-28.5 32-22 0-17-30l20-124q-13-8-32.5-14-19.5-6-33.5-6-41 0-63.5 35.5-22.5 35.5-22.5 87.5 0 74 54 74 26 0 45-33l7 2q3 43 44 43 41 0 60-47 19-47 19-93 0-70-40-114-40-44-107-44-52 0-89 32.5-37 32.5-56 83-19 50.5-19 105.5 0 77 43 119 43 42 118 42m-17-130q-20 0-20-35 0-26 11-60 11-34 33-34 12 0 20 5l-9 50q-7 41-14.5 57.5-7.5 16.5-20.5 16.5m-560-830q-129-11-217.5-46.5-88.5-35.5-150.5-100.5l55-52q55 55 128 81.5 73 26.5 191 37.5l-6 80m181 1114q199 0 373-74.5 174-74.5 306-206.5 132-132 206.5-306 74.5-174 74.5-373 0-199-74.5-373-74.5-174-206.5-306-132-132-306-206.5-174-74.5-373-74.5-199 0-373 74.5-174 74.5-306 206.5-132 132-206.5 306-74.5 174-74.5 373 0 199 74.5 373 74.5 174 206.5 306 132 132 306 206.5 174 74.5 373 74.5m342-860q-52 0-89-44.5-37-44.5-37-105.5 0-62 37.5-106.5 37.5-44.5 88.5-44.5 53 0 89.5 44.5 36.5 44.5 36.5 106.5 0 61-36.5 105.5-36.5 44.5-89.5 44.5m-160-254l-7-80q119-11 192-38 73-27 127-83l55 54q-62 65-150 100.5-88 35.5-217 46.5" /></g></svg>`

I've tested the svg itself with other tools. The svg is fine.

After some debugging, I found that the missing holes are actually there but they are treated as a normal path instead of a hole.


### Reproduction steps

1. 
2.
3.


### Code

```js
// code goes here

  const svgLoader = new SVGLoader()
  const data = svgLoader.parse(svg)
  const paths = data.paths

  for (let i = 0; i < paths.length; i++) {
    const path = paths[i]

    const material = new THREE.MeshStandardMaterial({
      color: new THREE.Color(path.color.r * 255, path.color.g * 255, path.color.b * 255),
      roughness: 0.7,
      bumpScale: 0.002,
      metalness: 0.2,
    })

    const shapes = SVGLoader.createShapes(path)

    for (let j = 0; j < shapes.length; j++) {
      const shape = shapes[j]
      const geometry = new THREE.ExtrudeGeometry(shape, {
        depth: height,
        steps: 1,
        bevelEnabled: false,
      })
      const mesh = new THREE.Mesh(geometry, material)
      meshes.push(mesh)
    }
  }


```


### Live example

* [jsfiddle-latest-release](https://jsfiddle.net/g3atw6k5/)
* [jsfiddle-dev](https://jsfiddle.net/hjqw94c5/)


### Screenshots

_No response_

### Version

155

### Device

_No response_

### Browser

_No response_

### OS

_No response_