# More understanding on SVG new page

**URL:** <https://discourse.nodered.org/t/more-understanding-on-svg-new-page/63811>\
**Category:** General\
**Created:** [12 June 2022 07:15 UTC](https://discourse.nodered.org/t/more-understanding-on-svg-new-page/63811 "2022-06-12T07:15:36Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![AungKL](https://avatars.discourse-cdn.com/v4/letter/a/ba9def/32.png) [@AungKL](https://discourse.nodered.org/u/AungKL)\
**Post date:** [12 June 2022 07:15 UTC](https://discourse.nodered.org/t/more-understanding-on-svg-new-page/63811/1 "2022-06-12T07:15:36Z")

</div>

Continuing the discussion from [Node-red-contrib-ui-svg example flow not working properly](https://discourse.nodered.org/t/node-red-contrib-ui-svg-example-flow-not-working-properly/29545/2):

Hi,  
I've basic knowledge of SVG drawing, but I don't understand the drawing of SVG of that example. My question is not directly related to node red, but I cannot just continue to work.  
Can anyone explain how to draw SVG for new page as described in above example? It's something like overlay drawing. I've attached node red file (json) as well.

Regards,  
Aung  
[HMI New Page.json](https://discourse.nodered.org/uploads/short-url/myMZg7KljTkKcYbtV4pDhPiq8g3.json) (24.0 KB)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [12 June 2022 09:14 UTC](https://discourse.nodered.org/t/more-understanding-on-svg-new-page/63811/2 "2022-06-12T09:14:51Z")

</div>

> [@AungKL](#):
>
> It's something like overlay drawing

Yes, it uses layers & shows / hides the layers.

Unfortunately (and @BartButenaers will correct me if necessary) the author of the built in editor removed the layer manager feature so your options are...

1. Pay for his "expert profile" to get access to layer manager
2. Create layers by hand or by using another SVG node instance then copy/paste the SVG generated into one SVG node in `<g>` tags
  1. Look in the SVG tab - you will see `page 2` is a `g` (group) element and is hidden by default `<g id="page2" display="none">`
  2. Look at the `"event"` TAB and you will see how the main page is hidden and page 2 is shown

3. Use an external SVG editor & paste SVG into the SVG tab
  1. use the same layout of groups (defaulted to hidden) for your additional pages

---

<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:** [12 June 2022 09:27 UTC](https://discourse.nodered.org/t/more-understanding-on-svg-new-page/63811/3 "2022-06-12T09:27:21Z")

</div>

Yes indeed, the explanation of @Steve-Mcl is 100% correct.

---

<div class="post-metadata">

**Author:** ![AungKL](https://avatars.discourse-cdn.com/v4/letter/a/ba9def/32.png) [@AungKL](https://discourse.nodered.org/u/AungKL)\
**Post date:** [12 June 2022 11:53 UTC](https://discourse.nodered.org/t/more-understanding-on-svg-new-page/63811/4 "2022-06-12T11:53:41Z")

</div>

Thank you very much, now I can see page2.  
I think I need to learn more on SVG, which book or web link do you recommend?

Regards,  
Aung

 ![HMI New Page_Edit](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/2/323074930b0e32c41d750020fbb715f9f831907d.jpeg)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [26 June 2022 11:54 UTC](https://discourse.nodered.org/t/more-understanding-on-svg-new-page/63811/5 "2022-06-26T11:54:22Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.