ExtrudeGeometry issue for SVG Containing Hole - svg

Question

I am currently looking for extruding the SVG below:
But I get the following result:
I would extrude only the two hexagon wall space. How can I do it ?
I tried both SVGLoader.createShapes(path); and //path.toShapes(true);
Here is my code:
const loader = new SVGLoader();
// load a SVG resource
loader.load(
// resource URL
'./svg/hexagone.svg',
// called when the resource is loaded
function (data) {
const paths = data.paths;
const svgGroup = new THREE.Group();
svgGroup.name = "svgGroup"
svgGroup.scale.y *= -1;
let mesh;
for (let i = 0; i < paths.length; i++) {
const path = paths[i];
const material = new THREE.MeshNormalMaterial();
const shapes = SVGLoader.createShapes(path); //path.toShapes(true);
shapes.forEach((shape, i) => {
const geometry = new THREE.ExtrudeGeometry(shape, {
depth: 10,
bevelEnabled: false
});
geometry.computeVertexNormals();
mesh = new THREE.Mesh(geometry, material);
svgGroup.add(mesh);
});
}
// Reshape items
const box = new THREE.Box3().setFromObject(svgGroup);
const size = new THREE.Vector3();
box.getSize(size);
const zOffset = size.z / -2;
const yOffset = size.y / -2;
const xOffset = size.x / -2;
svgGroup.children.forEach(item => {
item.position.z = zOffset;
item.position.x = xOffset;
item.position.y = yOffset;
});
scene.add(new THREE.AxesHelper(5))
scene.add(svgGroup)
// Rotate
svgGroup.rotateX(90 * Math.PI / 180);
}
My add my SVG below. When I tried to debug, I get 4 meshes. 1 for each line, 1 for the outside hexagon (overlapping the inside hexagon), 1 for the inside hexagon.
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.86 53.86">
<defs>
<style>
.cls-1 {
fill: #fff;
}
</style>
</defs>
<g>
<polygon class="cls-1" points="15.98 53.36 .5 37.88 .5 15.98 15.98 .5 37.88 .5 53.36 15.98 53.36 37.88 37.88 53.36 15.98 53.36"/>
<path d="M37.67,1l15.19,15.19v21.48l-15.19,15.19H16.19L1,37.67V16.19L16.19,1h21.48m.41-1H15.77L0,15.77v22.31l15.77,15.77h22.31l15.77-15.77V15.77L38.08,0h0Z"/>
</g>
<g>
<polygon class="cls-1" points="20.63 44.31 10.96 34.64 10.96 20.96 20.63 11.29 34.31 11.29 43.98 20.96 43.98 34.64 34.31 44.31 20.63 44.31"/>
<path d="M34.1,11.79l9.38,9.38v13.26l-9.38,9.38h-13.26l-9.38-9.38v-13.26l9.38-9.38h13.26m.41-1h-14.09l-9.96,9.96v14.09l9.96,9.96h14.09l9.96-9.96v-14.09l-9.96-9.96h0Z"/>
</g>
</svg>
With another SVG (see below) the result is the same even if in this scenario I have 2 paths in the SVG.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Fusion 360, Shaper Origin Export Add-In, Version 1.6.10 -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:shaper="http://www.shapertools.com/namespaces/shaper" shaper:fusionaddin="version:1.6.10" width="3.1176915cm" height="3.6cm" version="1.1" x="0cm" y="0cm" viewBox="0 0 3.1176915 3.6" enable-background="new 0 0 3.1176915 3.6" xml:space="preserve">
<path d="M-0,-1.8 L1.5588457,-0.9 1.5588457,0.9 -0,1.8 -1.5588457,0.9 -1.5588457,-0.9 -0,-1.8z" transform="matrix(1,0,0,-1,1.5588457,1.8)" fill="rgb(0,0,0)" stroke-linecap="round" stroke-linejoin="round" />
<path d="M-0.9588457,0.5535898 L-0.9588457,-0.5535898 -0,-1.1071797 0.9588457,-0.5535898 0.9588457,0.5535898 0,1.1071797 -0.9588457,0.5535898z" transform="matrix(1,0,0,-1,1.5588457,1.8)" fill="rgb(255,255,255)" stroke="rgb(0,0,0)" stroke-width="0.0010cm" stroke-linecap="round" stroke-linejoin="round" />
</svg>
Hexagon inside is also recovered by the biggest.

Answer 1

I finally chose to use lnkscape to generate my SVG. I have mush more options and I was able to generate the hole by combining all pathes in 1 path.