# SVG Screenshot node

**URL:** <https://discourse.nodered.org/t/svg-screenshot-node/78143>\
**Category:** Share Your Nodes\
**Created:** [3 May 2023 09:30 UTC](https://discourse.nodered.org/t/svg-screenshot-node/78143 "2023-05-03T09:30:14Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [3 May 2023 09:30 UTC](https://discourse.nodered.org/t/svg-screenshot-node/78143/1 "2023-05-03T09:30:15Z")

</div>

Hi There,

As part of a new collection of [introspection nodes](https://flows.nodered.org/node/@gregoriusrippenstein/node-red-contrib-introspection), I've created a screenshot node that creates an SVG of the current tab. The idea is one drags the node into the flow, double clicks on the node and the tray opens with the SVG code. With a download link in the tray, the SVG can be downloaded.

This is an editor-only node meaning there is no need to deploy this node but that also means it works in Node-RED read-only mode.

It improves on something like [svgexport.io](https://svgexport.io) browser plugin:

- Respects the 'hide' CSS class that is used to hide specific elements, this the svgexport plugin cannot know.
- Compliments the setting of visibility on the 'g' element with opacity=0. The SVG Standard ignores visibility on 'g' elements but browsers don't seem to care, Inkscape does care.
- Image data (i.e. icons) is inlined using `data:image/XXXX;base64,` - this is good for things such as Inkscape that can't resolve relative urls. PNG, JPEG and SVG are supported.
- It also retrieves font details and includes them in the SVG. This makes the font italic, even if it's not the correct font family (because font might not be installed on system).

Why I did this? Because I find some flows simply artistically pleasing and wanted to scale them up! And also because svgexport did not give me what I wanted 🙂

[Example](https://demo.openmindmap.org/omm/#flow/4e2d8c13066b705e) is available online, resulting SVG image is shown below. [Codebase](https://github.com/gorenje/node-red-contrib-introspection) is on github.

Cheers!

![img](https://raw.githubusercontent.com/gorenje/node-red-contrib-introspection/main/assets/screenshot.svg)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [3 May 2023 09:43 UTC](https://discourse.nodered.org/t/svg-screenshot-node/78143/2 "2023-05-03T09:43:26Z")

</div>

Sadly:

```auto
0|Node-RED | 3 May 10:41:24 - [warn] ------------------------------------------
0|Node-RED | 3 May 10:41:24 - [warn] npm WARN config production Use `--omit=dev` instead.
0|Node-RED | npm ERR! code EBADENGINE
0|Node-RED | npm ERR! engine Unsupported engine
0|Node-RED | npm ERR! engine Not compatible with your version of node/npm: eslint-plugin-jsdoc@36.0.8
0|Node-RED | npm ERR! notsup Not compatible with your version of node/npm: eslint-plugin-jsdoc@36.0.8
0|Node-RED | npm ERR! notsup Required: {"node":"^12 || ^14 || ^16"}
0|Node-RED | npm ERR! notsup Actual: {"npm":"9.5.0","node":"v18.15.0"}
0|Node-RED |
0|Node-RED | npm ERR! A complete log of this run can be found in:
0|Node-RED | npm ERR! C:\Users\julia\AppData\Local\npm-cache\_logs\2023-05-03T09_41_15_280Z-debug-0.log
0|Node-RED |
0|Node-RED | 3 May 10:41:24 - [warn] ------------------------------------------
0|Node-RED | Error: Install failed
0|Node-RED | at C:\src\nr\node_modules\@node-red\registry\lib\installer.js:285:25
0|Node-RED | at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
0|Node-RED | 3 May 10:41:24 - [error] Error: Install failed

```

You've set it to require node.js v12, 14 or 16. Could you please update to the current LTS versions?

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [3 May 2023 10:07 UTC](https://discourse.nodered.org/t/svg-screenshot-node/78143/3 "2023-05-03T10:07:00Z")

</div>

I now downdated it to being \>=6 - I hope that's ok!

I also noticed that the screenshot node does not work with Opera, I'll have a look why in due course. Tested it with Firefox on Mac...

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [3 May 2023 10:09 UTC](https://discourse.nodered.org/t/svg-screenshot-node/78143/4 "2023-05-03T10:09:53Z")

</div>

> [@gregorius](#):
>
> Tested it with Firefox on Mac

Ouch - outlier! 🤣

I'll have to install manually I think as the palette manager doesn't want to pick up the new version. I'll try to restart NR first, this is only my dev PC.

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [3 May 2023 11:52 UTC](https://discourse.nodered.org/t/svg-screenshot-node/78143/5 "2023-05-03T11:52:14Z")

</div>

> [@TotallyInformation](#):
>
> Ouch - outlier! 🤣

Nothing new there ...

SVG and browsers compatibility is a jungle of vines ... hopefully it's nothing major to get Opera working properly, don't have Chrome!

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [3 May 2023 13:33 UTC](https://discourse.nodered.org/t/svg-screenshot-node/78143/6 "2023-05-03T13:33:40Z")

</div>

> [@gregorius](#):
>
> I also noticed that the screenshot node does not work with Opera,

With version 0.0.3 it should be working with Opera.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [3 May 2023 17:15 UTC](https://discourse.nodered.org/t/svg-screenshot-node/78143/7 "2023-05-03T17:15:23Z")

</div>

Sadly, not working with Windows 11 and Edge:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/1/019a7109a5768848bc0d23c7bdbdaa3163f424bb.png)

No console output.

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [3 May 2023 17:39 UTC](https://discourse.nodered.org/t/svg-screenshot-node/78143/8 "2023-05-03T17:39:57Z")

</div>

That's weird, if it fails there should be an exception in the console. Alternative would be that the image retrieval somehow failed or wasn't triggered. The [code for that](https://github.com/gorenje/node-red-contrib-introspection/blob/4da276624dd8e131773c622895306a26d97e59dd/nodes/15-screenshot.html#L229-L242) assumes that all images are retrieved, else the SVG isn't dumped into the editor window.

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [3 May 2023 17:46 UTC](https://discourse.nodered.org/t/svg-screenshot-node/78143/9 "2023-05-03T17:46:32Z")

</div>

> [@gregorius](#):
>
> Alternative would be that the image retrieval somehow failed or wasn't triggered

...or wasn't triggered --\> fixed with 0.0.4 --\> if you drag the screenshot node onto an empty flow there happens to be no images! Fixed it so that svg is dump into editor when no images are defined.

Thanks for the heads 👍

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [3 May 2023 20:07 UTC](https://discourse.nodered.org/t/svg-screenshot-node/78143/10 "2023-05-03T20:07:03Z")

</div>

Will try again when I get a chance.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [3 May 2023 20:16 UTC](https://discourse.nodered.org/t/svg-screenshot-node/78143/11 "2023-05-03T20:16:49Z")

</div>

OK, which happens to be now! 😁

Interesting SVG output though:

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

```auto
<?xml version="1.0" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    width="10" height="10" pointer-events="all" style="cursor: crosshair; touch-action: none;">
    <circle cx="5" cy="5" r="5" fill="#00bcff" stroke="#1c668c" stroke-width="1px" fill-opacity="1" stroke-opacity="1"
        opacity="1" />
</svg>

```

Again no console errors but I do get this warning which I think means that you are missing a cleanup step for the Monaco editor:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/b/dbb47491a4d66a9f1d467d465f0a858e646cd68b.png)

That circle is all the output I'm getting on any tab. I think it is the blue circle you get on a node in the editor if it needs deploying. But I get it even if nothing needs deploying. Tried on a couple of different tabs, restarted Node-RED and reloaded the editor, no difference I'm afraid.

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [3 May 2023 20:23 UTC](https://discourse.nodered.org/t/svg-screenshot-node/78143/12 "2023-05-03T20:23:42Z")

</div>

The editor thing should easy, the blue dot of disaster won't be that easy....

Do you only ever get the dot or do you get something else for other flows?

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [3 May 2023 20:28 UTC](https://discourse.nodered.org/t/svg-screenshot-node/78143/13 "2023-05-03T20:28:24Z")

</div>

> [@gregorius](#):
>
> The editor thing should easy,

With the power of [copy & paste](https://github.com/node-red/node-red/blob/c81cd5450f9d0c450c42b6566c7f88cd9e7b66c7/packages/node_modules/%40node-red/nodes/core/function/80-template.html#L139-L147), I pronounce it fixed with version 0.0.6.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [3 May 2023 21:55 UTC](https://discourse.nodered.org/t/svg-screenshot-node/78143/14 "2023-05-03T21:55:41Z")

</div>

> [@gregorius](#):
>
> Do you only ever get the dot or do you get something else for other flows?

Nope, I'm only ever just getting that no matter what I do. Sorry.