# SVGLoader stroke and other params support

**URL:** <https://discourse.threejs.org/t/svgloader-stroke-and-other-params-support/5952>\
**Category:** Questions\
**Created:** [January 31, 2019, 7:59am UTC](https://discourse.threejs.org/t/svgloader-stroke-and-other-params-support/5952 "2019-01-31T07:59:26Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Boris](https://avatars.discourse-cdn.com/v4/letter/b/74df32/32.png) [@Boris](https://discourse.threejs.org/u/Boris)\
**Post date:** [January 31, 2019, 7:59am UTC](https://discourse.threejs.org/t/svgloader-stroke-and-other-params-support/5952/1 "2019-01-31T07:59:26Z")

</div>

Hi, guys!

I’d like to use three.js in combination with mapBox to achieve 2d svg icons placed on map in different locations. While I was successful to implement it by changing this example [https://bl.ocks.org/ryanbaumann/b9725e79b5b1742d92ada00ddbf5c3d3](https://bl.ocks.org/ryanbaumann/b9725e79b5b1742d92ada00ddbf5c3d3), I’ve run into problems of SVGLoader implementation being not complete. For example strokes are ignored, some parts of svg completely missing. My question is whether there is known full(er) implementation to use or whether you can point me into some hints how to extend the [https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/SVGLoader.js](https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/SVGLoader.js) myself.

This is the code used for SVG load (based on svg example on threejs site):

```auto
var loader = new THREE.SVGLoader();
		loader.load( 'spatial.svg', function ( paths ) {
			var group = new THREE.Group();
			group.scale.multiplyScalar( 0.25 );
			group.position.x = - 70;
			group.position.y = 70;
			group.scale.y *= - 1;
			for ( var i = 0; i < paths.length; i ++ ) {
				var path = paths[i];
				var material = new THREE.MeshBasicMaterial( {
					color: path.color,
					side: THREE.DoubleSide,
					depthWrite: false
				} );
				var shapes = path.toShapes( true );
				for ( var j = 0; j < shapes.length; j ++ ) {
					var shape = shapes[j];
					var geometry = new THREE.ShapeBufferGeometry( shape );
					var mesh = new THREE.Mesh( geometry, material );
					group.add( mesh );
				}
			}
			this.scene.add( group );
		} );

```

This is the resulting image vs original (with desired complexity):  
 ![threejs_svg](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/d/d571ddb205d26f8749d55b2208dbaddc0502b540.png)  
 ![real_svg](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/4/4035dc7f384d3684d1d9cdedb5274f00f7517574.png)

This is the svg data:

```auto
    <svg xmlns="http://www.w3.org/2000/svg" height="800">
      <g id="rotary_wing_heavy_1_friend">
        <path id="Path_20046" data-name="Path 20046" class="rotary_wing_heavy_1_friend-cls-2" stroke="#000" fill="#80e0ff" d="M25,50H86.07V90.713H25Z" />
        <path id="Path_20047" data-name="Path 20047" class="rotary_wing_heavy_1_friend-cls-3" stroke="#000" d="M60,85l16.285,6.107L92.571,85V97.214L76.285,91.107,60,97.214Z" />
      </g>
    </svg>

```

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [January 31, 2019, 9:59am UTC](https://discourse.threejs.org/t/svgloader-stroke-and-other-params-support/5952/2 "2019-01-31T09:59:50Z")

</div>

Yes, there are some open issues in context of `SVGLoader` for example:

> <https://github.com/mrdoob/three.js/issues/15032>

It’s best to add or support existing feature requests if you want to extend the functionality of the loader. If you want to write the necessary code by yourself, you will have to study the implementation which is mainly based on `three.js`'s curve and path API.