# \[ANNOUNCE\] Layer manager in SVG nodes

**URL:** <https://discourse.nodered.org/t/announce-layer-manager-in-svg-nodes/19324>\
**Category:** Share Your Nodes\
**Created:** [18 December 2019 22:10 UTC](https://discourse.nodered.org/t/announce-layer-manager-in-svg-nodes/19324 "2019-12-18T22:10:36Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [18 December 2019 22:10 UTC](https://discourse.nodered.org/t/announce-layer-manager-in-svg-nodes/19324/1 "2019-12-18T22:10:36Z")

</div>

Hi folks,

Some time ago, @Steve-Mcl shared a [demo](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/2) to simulate a HMI device via our Svg-Node. To accomplish that, Steve had to draw a number of screens that will be shown one by one in the dashboard. However he had a big issue to draw those screens with DrawSVG (= the SVG editor that we have integrated into our Svg node): DrawSvg had **no** layer manager, which means that - _while designing a screen - that all other screens were also visible_. So it was a mess of multiple screens rendered all together, which is very hard to work with.

To solve that problem, I have contacted again **Joseph Liard** (the author of DrawSvg). And although this functionality was not on his roadmap, he has been so kind to implement a **layer manager in DrawSvg 7.6**. 🥳 🍾 So I would like to thank Joseph again for supporting our community!!

The layer manager from **DrawSvg 7.6** is now available in both our SVG nodes:

- _ **node-red-contrib-ui-svg** _ uses the DrawSvg cloud editor, which is upgraded to 7.6. So there is no new version of this node available, since only the cloud editor is upgraded...
- _ **node-red-contrib-drawsvg** _ has been upgraded to version 1.1.0, which can host a local version of DrawSvg 7.6.

The layer manager is available in the top menu:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/36de5fd519dd9448f4aec1eba3846c34a3207def.png)  
Here is a small demo that demonstrates how easy it has become to work with layers, e.g. to draw all your FontAwesome icons on a separate layer (and every layer can be showed or hided):

 ![svg_layers](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/c/cf5ce9c3f4b95e94ee6b00446cefe0bbd7e44b1b.gif)

BTW Joseph has provided some showcases, for those who want tot start using his layer manager:  
[http://drawsvg.org/drawsvg.html#showcase:manage-layers](http://drawsvg.org/drawsvg.html#showcase:manage-layers)  
[http://drawsvg.org/drawsvg.html#showcase:style-layers](http://drawsvg.org/drawsvg.html#showcase:style-layers)  
[http://drawsvg.org/drawsvg.html#showcase:change-layer](http://drawsvg.org/drawsvg.html#showcase:change-layer)

Have fun with it!  
Bart

---

<div class="post-metadata">

**Author:** ![Nxito](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nxito/32/88293_2.png) [@Nxito](https://discourse.nodered.org/u/Nxito)\
**Post date:** [19 December 2019 08:01 UTC](https://discourse.nodered.org/t/announce-layer-manager-in-svg-nodes/19324/2 "2019-12-19T08:01:39Z")

</div>

Great !, the option of using it offline makes its use much easier.  
Only a small mistake:  
this makes me nervous  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/1d36717019f4deda8a04ae2e4403900c5d164a75.png)

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [19 December 2019 11:59 UTC](https://discourse.nodered.org/t/announce-layer-manager-in-svg-nodes/19324/3 "2019-12-19T11:59:52Z")

</div>

> [@Nxito](#):
>
> this makes me nervous

Hi Anxo,  
I have fixed the typo on Github, so will be fixed on npm with the next release. Meanwhile try to keep your nerves under control ...

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [5 April 2020 20:01 UTC](https://discourse.nodered.org/t/announce-layer-manager-in-svg-nodes/19324/4 "2020-04-05T20:01:32Z")

</div>

FYI version _ **1.2.0** _ is now available in the palette:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/6/e6457e9fa2484e62070d5b97825f18faf2834112.png)

This contains an offline edition of _ **DrawSvg version 8.0** _, which offers horizontal/vertical line drawing, triangle drawing, ... The full release notes from DrawSvg can be found [here](http://node-red-contrib-drawsvg "beta version").