# SVGs with holes inside hole failing to load properly with SVG Loader

**URL:** <https://discourse.threejs.org/t/svgs-with-holes-inside-hole-failing-to-load-properly-with-svg-loader/48451>\
**Category:** Questions\
**Tags:** svg-loader, loaders, svg, geometry\
**Created:** [February 26, 2023, 3:22pm UTC](https://discourse.threejs.org/t/svgs-with-holes-inside-hole-failing-to-load-properly-with-svg-loader/48451 "2023-02-26T15:22:00Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![deepushajia](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/deepushajia/32/33896_2.png) [@deepushajia](https://discourse.threejs.org/u/deepushajia)\
**Post date:** [February 26, 2023, 3:22pm UTC](https://discourse.threejs.org/t/svgs-with-holes-inside-hole-failing-to-load-properly-with-svg-loader/48451/1 "2023-02-26T15:22:00Z")

</div>

![concen](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/b/4bf0abdc72ef9f7fe790d4b509749ff1dc2ee2e5.svg)  
This is the SVG in question. It is getting rendered as:

 ![concen](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/c/1c673588dd401117356bafe1b857e48271486ecd.png)

My code for SVG Loader is as follows:

```javascript
const loader = new SVGLoader();
        let thisPointer = this;
        loader.load( this.url, function ( data ) {
          const paths = data.paths;
          const group = new THREE.Group();
          group.name = thisPointer.name
          group.scale.multiplyScalar( thisPointer.multiplyScalar );
          group.scale.y *= - 1;
          
          
          for ( let i = 0; i < paths.length; i ++ ) {
    
            const path = paths[i];
    
            const fillColor = path.userData.style.fill;
            if ( fillColor !== undefined && fillColor !== 'none' ) {
    
              const material = new THREE.MeshBasicMaterial( {
                color: new THREE.Color().setStyle( fillColor ).convertSRGBToLinear(),
                opacity: path.userData.style.fillOpacity,
                // transparent: true,
                side: THREE.DoubleSide,
                depthWrite: false,
                wireframe: false
              } );
              material.transparent = true;
    
              const shapes = SVGLoader.createShapes( path );
    
              for ( let j = 0; j < shapes.length; j ++ ) {
    
                const shape = shapes[j];
                const geometry = new THREE.ShapeGeometry( shape );
                const mesh = new THREE.Mesh( geometry, material );
                
                  group.add( mesh );

                
              }
    
            }
    
            const strokeColor = path.userData.style.stroke;
    
            if ( strokeColor !== undefined && strokeColor !== 'none' ) {
    
              const material = new THREE.MeshBasicMaterial( {
                color: new THREE.Color().setStyle( strokeColor ).convertSRGBToLinear(),
                opacity: path.userData.style.strokeOpacity,
                transparent: true,
                side: THREE.DoubleSide,
                depthWrite: false,
                wireframe: false
              } );
              material.transparent = true;
              for ( let j = 0, jl = path.subPaths.length; j < jl; j ++ ) {
    
                const subPath = path.subPaths[j];
    
                const geometry = SVGLoader.pointsToStroke( subPath.getPoints(), path.userData.style );
                if ( geometry ) {
    
                  const mesh = new THREE.Mesh( geometry, material );
                  
                  group.add( mesh );
    
                }
    
              }
    
            }
            
          }
        } );

```

---

<div class="post-metadata">

**Author:** ![anidivr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/anidivr/32/32924_2.png) [@anidivr](https://discourse.threejs.org/u/anidivr)\
**Post date:** [February 27, 2023, 12:33pm UTC](https://discourse.threejs.org/t/svgs-with-holes-inside-hole-failing-to-load-properly-with-svg-loader/48451/2 "2023-02-27T12:33:22Z")

</div>

Try organizing it as 10 circles with 10 holes. That is, each circle only has one hole.