ShapeGeometry is not giving expected result from svg path data

I am trying to load shape with svg path in three js using THREE.ShapeGeometry but I did not get expected result sometimes.
Here is the code I used to load shape

let loader = new SVGLoader()
loader.load('./test.svg', function (data) {
    let paths = data.paths
    let group = new THREE.Group()
    group.scale.y *= -1

    let path = paths[0]
    if(!path) return

    let shapes = path.toShapes(true)
    let shape = shapes[0]

    let material = new THREE.MeshBasicMaterial({
        color: "black",
        side: THREE.DoubleSide

    let geometry = new THREE.ShapeGeometry(shape)
    let mesh = new THREE.Mesh(geometry, material)

    let box = new THREE.Box3().setFromObject(group)
    threeViewer.controls.smoothTime = 0.1
    threeViewer.controls.fitToBox(box, true)

For this svg THREE.ShapeGeometry renders

Code looks good.

Are you using latest 161 version?
Can you share the test.svg?

Do you get the same result if you paste your test.svg into this page three-svg-js

It might be a bug.

It is there (extra small).


Three-svg-js has the same issue:

I ran your file through this online tool SVGOMG - SVGO’s Missing GUI (

The generated file fixes the problem

I think there’s some duplicate paths that SVGLoader doesn’t handle very well.

I haven’t done a details comparison of before and after to see what actually changed


thanks for your help, I fixed this issue by creating a separate svg’s for each character.