# SVG not displaying Correctly in IE

**URL:** https://discourse.nodered.org/t/svg-not-displaying-correctly-in-ie/2369
**Category:** Dashboard
**Created:** [17 August 2018 16:42 UTC](https://discourse.nodered.org/t/svg-not-displaying-correctly-in-ie/2369 "2018-08-17T16:42:19Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![JamesMcBride](https://avatars.discourse-cdn.com/v4/letter/j/71c47a/32.png) [@JamesMcBride](https://discourse.nodered.org/u/JamesMcBride)
#### Post date: [17 August 2018 16:42 UTC](https://discourse.nodered.org/t/svg-not-displaying-correctly-in-ie/2369/1 "2018-08-17T16:42:19Z")

</div>

Hi, I'm probably doing something stupid here, but I'm after some guidance.

I have a dynamic svg image, which represents some perimeter beams, updated via mqtt.

The code for the template node is as below:

```
<svg version="1.1" id="Layer_1" width="380" height="300" xmlns="http://www.w3.org/2000/svg">
<line x1="100" y1="100" x2="250" y2="100" style="stroke:rgb({{msg.payload.Beam1}});stroke-width:5" />
<text x="150" y="90" class="small">Beam 1</text>
<line x1="250" y1="100" x2="250" y2="250" style="stroke:rgb({{msg.payload.Beam2}});stroke-width:5" />
<text x="260" y="150" class="small" style="writing-mode: tb; glyph-orientation-vertical: 0;">Beam 2</text>
<line x1="250" y1="250" x2="100" y2="250" style="stroke:rgb({{msg.payload.Beam3}});stroke-width:5" />
<text x="150" y="265" class="small">Beam 3</text>
<circle cx="110" cy="240" r="5" />
<line x1="100" y1="250" x2="100" y2="100" style="stroke:rgb({{msg.payload.Beam4}});stroke-width:5" />
<text x="90" y="150" class="small" style="writing-mode: tb; glyph-orientation-vertical: 0;">Beam 4</text>

  <line x1="0" y1="700" x2="100" y2="700" style="stroke:rgb({{msg.payload.Beam5}});stroke-width:5" />
<line x1="0" y1="700" x2="15" y2="685" style="stroke:rgb({{msg.payload.Beam5}});stroke-width:5" />
<line x1="0" y1="700" x2="15" y2="715" style="stroke:rgb({{msg.payload.Beam5}});stroke-width:5" />
<text x="25" y="720" class="small">Beam 5</text>
  
 <circle cx="10" cy="10" r="5" style="stroke:rgb({{msg.payload.PIR1}});stroke-width:5" />
 <text x="18" y="10" class="small">PIR 1</text>
 <circle cx="70" cy="10" r="5" style="stroke:rgb({{msg.payload.PIR2}});stroke-width:5" />
 <text x="78" y="10" class="small">PIR 2</text>
 <circle cx="150" cy="10" r="5" style="stroke:rgb({{msg.payload.PIR3}});stroke-width:5" />
 <text x="158" y="10" class="small">PIR 3</text>
 <circle cx="220" cy="10" r="5" style="stroke:rgb({{msg.payload.PIR4}});stroke-width:5" />
 <text x="228" y="10" class="small">PIR 4</text>
 
 <style>
    .small { font: 13px sans-serif; }

</style>

</svg> 

```

Running this on chrome, it renders correctly, however on IE, the dynamic parts of this are missing:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/e/ec32940b114964f9be764d3a506b9bd414269e65.png)

When I inspect that part of the image from IE, it shows the variable name

But when inspecting that part in chrome, it shows the value of the variable

Any advice would be greatly appreciated. Sorry, there are some images missing, I'll add them below

---

<div class="post-metadata">

### Author: ![JamesMcBride](https://avatars.discourse-cdn.com/v4/letter/j/71c47a/32.png) [@JamesMcBride](https://discourse.nodered.org/u/JamesMcBride)
#### Post date: [17 August 2018 17:07 UTC](https://discourse.nodered.org/t/svg-not-displaying-correctly-in-ie/2369/2 "2018-08-17T17:07:41Z")

</div>

> [@JamesMcBride](#):
>
> When I inspect that part of the image from IE, it shows the variable name

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

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [17 August 2018 21:15 UTC](https://discourse.nodered.org/t/svg-not-displaying-correctly-in-ie/2369/3 "2018-08-17T21:15:40Z")

</div>

Googling for svg IE does throw up a number of issues, though whether one of those is the problem I don't know.

---

<div class="post-metadata">

### Author: ![JamesMcBride](https://avatars.discourse-cdn.com/v4/letter/j/71c47a/32.png) [@JamesMcBride](https://discourse.nodered.org/u/JamesMcBride)
#### Post date: [17 August 2018 22:52 UTC](https://discourse.nodered.org/t/svg-not-displaying-correctly-in-ie/2369/4 "2018-08-17T22:52:59Z")

</div>

Running this on chrome, it renders correctly - how it should look:

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

---

<div class="post-metadata">

### Author: ![JamesMcBride](https://avatars.discourse-cdn.com/v4/letter/j/71c47a/32.png) [@JamesMcBride](https://discourse.nodered.org/u/JamesMcBride)
#### Post date: [17 August 2018 22:53 UTC](https://discourse.nodered.org/t/svg-not-displaying-correctly-in-ie/2369/5 "2018-08-17T22:53:35Z")

</div>

Thanks Colin, I have tried a few of the suggestions relating to compatibility but to no avail.

---

<div class="post-metadata">

### Author: ![ncherry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ncherry/32/27_2.png) [@ncherry](https://discourse.nodered.org/u/ncherry)
#### Post date: [18 August 2018 01:13 UTC](https://discourse.nodered.org/t/svg-not-displaying-correctly-in-ie/2369/6 "2018-08-18T01:13:17Z")

</div>

James, it is my understanding that IE has no support for SVG and the the plugin is kind of broken. I think the IE replacement is supposed to have better support but I've given up on MS and just gone with FF and Chrome. I don't do web dev so I can get away with that. 😉

---

<div class="post-metadata">

### Author: ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)
#### Post date: [18 August 2018 13:43 UTC](https://discourse.nodered.org/t/svg-not-displaying-correctly-in-ie/2369/7 "2018-08-18T13:43:13Z")

</div>

If your browser's dev console is seeing the mustache syntax `{{msg.payload.Beam1}}` then the template is not being evaluated properly. Are you using the core `template` node, or the dashboard's `ui_template` node?

I find that sometimes I have to use the regular `template` node to generate a proper html/js/css/svg page -- then wire the output to a `ui_template` node with the default content:

```auto
<div ng-bind-html="msg.payload"></div>

```

Whether that works with SVG content, I can't say for sure, but it might be worth a try...

---

<div class="post-metadata">

### Author: ![JamesMcBride](https://avatars.discourse-cdn.com/v4/letter/j/71c47a/32.png) [@JamesMcBride](https://discourse.nodered.org/u/JamesMcBride)
#### Post date: [19 August 2018 22:22 UTC](https://discourse.nodered.org/t/svg-not-displaying-correctly-in-ie/2369/8 "2018-08-19T22:22:07Z")

</div>

Hi, I am using the ui\_template node - will try the template node instead

Thanks