# SVGRenderer not work with LineMaterial

**URL:** https://discourse.threejs.org/t/svgrenderer-not-work-with-linematerial/48470
**Category:** Questions
**Tags:** svg-renderer, svg
**Created:** [February 27, 2023, 5:00am UTC](https://discourse.threejs.org/t/svgrenderer-not-work-with-linematerial/48470 "2023-02-27T05:00:33Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![luatdt-ttlab](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/luatdt-ttlab/32/33475_2.png) [@luatdt-ttlab](https://discourse.threejs.org/u/luatdt-ttlab)
#### Post date: [February 27, 2023, 5:00am UTC](https://discourse.threejs.org/t/svgrenderer-not-work-with-linematerial/48470/1 "2023-02-27T05:00:33Z")

</div>

I have my outline object created exactly follow this example from @prisoner849: [fatlinesBatch](https://codesandbox.io/s/serene-margulis-iuiob3?file=/src/js/FatLinesBatch.js) and it works perfectly with WEBGLRenderer. The problem is that when I want to have an svg version of this outline projection, the SVGRenderer could not draw out the outline.  
I did some experiments and found out that this might be due to the LineMaterial, when I have Linesegment with LineBasicMaterial, SVG renderer works as expected but when I switch to LineMaterial, not thing comes out of the scene.  
I wonder if there’s anyway to make the [fatlinesBatch](https://codesandbox.io/s/serene-margulis-iuiob3?file=/src/js/FatLinesBatch.js) works with SVGRenderer, or any other way to achieve similar outline effect and still work with SVGRenderer.  
Thanks a lot for your help! 💫

---

<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: [February 27, 2023, 8:32am UTC](https://discourse.threejs.org/t/svgrenderer-not-work-with-linematerial/48470/2 "2023-02-27T08:32:12Z")

</div>

The wide line implementation was added since WebGL can’t draw line primitives greater than 1 pixel. That is not true for `SVGRenderer`. This renderer handles lines as paths so it can render them by default with line width greater than 1 pixel. Just set the `linewidth` property of `LineBasicMaterial`.

So adding support for `LineMaterial` and `LineSegmentsGeometry` to `SVGRenderer` does not really make sense since these classes are intended for WebGL to solve the 1 pixel line restriction.

---

<div class="post-metadata">

### Author: ![luatdt-ttlab](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/luatdt-ttlab/32/33475_2.png) [@luatdt-ttlab](https://discourse.threejs.org/u/luatdt-ttlab)
#### Post date: [February 28, 2023, 6:04pm UTC](https://discourse.threejs.org/t/svgrenderer-not-work-with-linematerial/48470/3 "2023-02-28T18:04:47Z")

</div>

I see. @Mugen87, but I’m not clear how to make similar outline effect with `LineBasicMaterial` and `EdgesGeometry`. Could you please give me some hints about how to accomplish that. The above **fatlines** example did some _ **shading modification** _ to the `LineMaterial` to achieve outline effect, which I find no way to apply to the `LineBasicMaterial`

.  
If that’s not possible, is there any way to achieve outline effect with `SVGRenderer`.  
Thanks alot!

---

<div class="post-metadata">

### Author: ![luatdt-ttlab](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/luatdt-ttlab/32/33475_2.png) [@luatdt-ttlab](https://discourse.threejs.org/u/luatdt-ttlab)
#### Post date: [February 28, 2023, 8:38pm UTC](https://discourse.threejs.org/t/svgrenderer-not-work-with-linematerial/48470/4 "2023-02-28T20:38:46Z")

</div>

I’m thinking of modifying the edgesGeometry according to [this example](https://plnkr.co/edit/43Sd9vsiAUsB7pTCUMEQ?preview) that I found on [this similar issue](https://github.com/mrdoob/three.js/issues/10517). The problem is that given the `positionAttr.count` as **n** then my new edgesGeo will have then runtime of _O(n^2)_ instead of _O(n)_ (which can scale up to 10 billion with n = 100k). My app crashed even before any thing was renderer 😔

---

<div class="post-metadata">

### Author: ![luatdt-ttlab](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/luatdt-ttlab/32/33475_2.png) [@luatdt-ttlab](https://discourse.threejs.org/u/luatdt-ttlab)
#### Post date: [May 29, 2023, 3:03am UTC](https://discourse.threejs.org/t/svgrenderer-not-work-with-linematerial/48470/5 "2023-05-29T03:03:14Z")

</div>

I already found a solution for my requirement.  
For this problem of generating outline edges and also making it work with SVGRenderer, this example by @gkjohnson utilizing three-mesh-bvh is just what I’m looking for.  
[https://gkjohnson.github.io/three-mesh-bvh/example/bundle/edgeProjection.html](https://gkjohnson.github.io/three-mesh-bvh/example/bundle/edgeProjection.html)
