# Temporary DOM elements somewhere cached

**URL:** <https://discourse.nodered.org/t/temporary-dom-elements-somewhere-cached/15520>\
**Category:** Developing Nodes\
**Created:** [13 September 2019 20:42 UTC](https://discourse.nodered.org/t/temporary-dom-elements-somewhere-cached/15520 "2019-09-13T20:42:44Z")\
**Posts on this page:** 5\
**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:** [13 September 2019 20:42 UTC](https://discourse.nodered.org/t/temporary-dom-elements-somewhere-cached/15520/1 "2019-09-13T20:42:44Z")

</div>

Hi folks,

We have a nasty bug in our new SVG-node. Found at last where it is located and found a solution. But I don't understand the problem, don't know why the fix solves it and don't know if the fix will work on all browsers. So if anybody has a better solution, that would be nice!

The users can enter an **SVG string**. But let's assume they use a file path to a local image (which _cannot be accessed_ by our Javascript code running in a browser):

```auto
<svg .../>
 <image xlink:href="file://c:/temp/unaccessible_image.jpg"/>
</svg>

```

At some point in our node, we convert this SVG string to (temporary) DOM elements:

```auto
function someFunction(svgString) {
   var svgElement = $(svgStr)[0];
   ...

```

This allows us to search through the SVG easily, and we can even manipulate it. And this works fine!!  
Once someFunction is completed, we don't need the temporary DOM elements anymore...

However quite some time after this function has finished (somewhere up in the call stack), an error occurs in my Chrome console log:

> Not allowed to load local resource..."

So for some reason it seems that these (temporary) SVG elements are stored somewhere in memory, but I couldn't pinpoint where and why that error was raised. 😟 This also means I cannot give a code snippet here to reproduce the problem ...

So I tried some alternatives (to convert the SVG string into DOM elements):

- Have tried to do `$(svgStr).empty()` and `$(svgStr).detach()` and `$(svgStr).remove()` since I read somewhere that jQuery caches those objects. But nothing helped...

- So tried to do it in Vanilla Javascript:

- At the end I tried it with the DOMParser:

Summarized the DOMParser is my only solution...

Thanks!!  
Bart

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [14 September 2019 00:32 UTC](https://discourse.nodered.org/t/temporary-dom-elements-somewhere-cached/15520/2 "2019-09-14T00:32:53Z")

</div>

Perhaps the issue is relate to missing xmlns attribute ?

> **[Converting SVG text string to blob for image source](https://medium.com/@benjamin.black/using-blob-from-svg-text-as-image-source-2a8947af7a8e)**
>
> It is simple to compose an SVG image as a string of text, convert the string to a blob, and use the blob as an image element source…with…

> <https://stackoverflow.com/questions/18467982/are-svg-parameters-such-as-xmlns-and-version-needed>

> **[Namespaces Crash Course](https://developer.mozilla.org/en-US/docs/Web/SVG/Namespaces_Crash_Course)**
>
> As an XML dialect, SVG is namespaced. It is important to understand the concept of namespaces and how they are used if you plan to author SVG content. Versions of SVG viewers prior to the release of Firefox 1.5 unfortunately paid scant attention to...

---

<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:** [14 September 2019 06:24 UTC](https://discourse.nodered.org/t/temporary-dom-elements-somewhere-cached/15520/3 "2019-09-14T06:24:08Z")

</div>

Morning Andrei (@Andrei),  
Thanks! My SVG string above is a bit simplified, but at the 3 dots I have all the required namespaces...

But the error that Chrome logs is entirely correct: the image path in the SVG string refers to a local file, to which the browser has no access. But I don't expect that error to occur somewhere AFTER my function has ended. This means that the SVG element keeps being stored somewhere (and being validated). But I just want the (temporary) svg elements to be deleted/detached/removed/emptied/... at the end if my function, so it cannot be validated anymore afterwards...  
Bart

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [14 September 2019 06:33 UTC](https://discourse.nodered.org/t/temporary-dom-elements-somewhere-cached/15520/4 "2019-09-14T06:33:29Z")

</div>

It sounds like this ?

> However, using the `use xlink:href` mechanism results in a [non-exposed cloned DOM tree](http://www.w3.org/TR/SVG/struct.html#UseElement),

From: [5 Gotchas You’re Gonna Face Getting Inline SVG Into Production](https://css-tricks.com/gotchas-on-getting-svg-into-production/)

---

<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:** [14 September 2019 07:00 UTC](https://discourse.nodered.org/t/temporary-dom-elements-somewhere-cached/15520/5 "2019-09-14T07:00:23Z")

</div>

Hey @bakman2,

Perhaps it might be something like this. But that link is referring to the SVG [shadow DOM](https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/) tree.

In SVG you can reuse (groups of) shapes, via defintions or symbols. For example I create a symbol and I want to draw that symbol twice in my drawing. To avoid having to repeat everthing twice, you can easily `use` that symbol twice:

```auto
<symbol id="my-icon" viewBox="0 0 30 30">
	<!-- icon content / shapes here -->
</symbol>

<use xlink:href="#my-icon" x="100" y="100" />
<use xlink:href="#my-icon" x="200" y="100" />

```

Then indeed two extra shadow DOM trees will be created (one for every 'use') to let each 'use' element have its own cloned symbol shapes, as you can see in the screenshot in my link above:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/7/71644a67c8bd7914839f702fd6a27c1eccea31b0.png)

But I don't _think_ that is happening here, because I don't `use` anything: I simply have an `image` referring to some local file path...

**[EDIT]** And I have nowhere _appended_ these SVG elements to my DOM tree, so I thought it should be removed then automatically when I leave my function?