# SVG or Overlapping Views?

**URL:** <https://forum.inductiveautomation.com/t/svg-or-overlapping-views/105897>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [May 6, 2025, 1:39am UTC](https://forum.inductiveautomation.com/t/svg-or-overlapping-views/105897 "2025-05-06T01:39:20Z")\
**Posts on this page:** 15\
**Page:** 2

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [May 7, 2025, 12:49pm UTC](https://forum.inductiveautomation.com/t/svg-or-overlapping-views/105897/21 "2025-05-07T12:49:27Z")

</div>

As the integrator it is acceptable (with tact of course) to show why something is wrong or not best practice. Show them ISA standards/HMI Performance which details the use of color and where it's appropriate.

---

<div class="post-metadata">

**Author:** ![steve.nap](https://avatars.discourse-cdn.com/v4/letter/s/5daacb/32.png) [@steve.nap](https://forum.inductiveautomation.com/u/steve.nap)\
**Post date:** [May 7, 2025, 1:04pm UTC](https://forum.inductiveautomation.com/t/svg-or-overlapping-views/105897/22 "2025-05-07T13:04:15Z")

</div>

I agree. I will do that once I complete the actual task that I started this thread for. Changing the background color is easily done. I have much bigger issues to address at the moment sir.

---

<div class="post-metadata">

**Author:** ![steve.nap](https://avatars.discourse-cdn.com/v4/letter/s/5daacb/32.png) [@steve.nap](https://forum.inductiveautomation.com/u/steve.nap)\
**Post date:** [May 7, 2025, 1:27pm UTC](https://forum.inductiveautomation.com/t/svg-or-overlapping-views/105897/23 "2025-05-07T13:27:06Z")

</div>

You have been of major assistance sir. Could I bother you to post-embed the actual SVG code like you did the first time so I can save it as an SVG? Also, is there a tip jar-donate on this forum? Gladly send you $ for your time and effort.

---

<div class="post-metadata">

**Author:** ![David\_Stone](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/david_stone/32/79749_2.png) [@David\_Stone](https://forum.inductiveautomation.com/u/David_Stone)\
**Post date:** [May 7, 2025, 8:33pm UTC](https://forum.inductiveautomation.com/t/svg-or-overlapping-views/105897/25 "2025-05-07T20:33:55Z")

</div>

I actually don’t have the SVG code, long story short, I wrote the SVG from scratch in Designer.  
If you want to modify it, I challenge you to try modifying it from within designer, we can help if needed, but it will teach you SVG structure.

As far as donating, the best donation here is to come back and answer other people’s posts that you personally know an answer to. There are many different skill levels on here and many different time zones, so it will always be helpful. The best part of the Ignition product is the active community, without it, it will die like many products before it.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [May 7, 2025, 8:49pm UTC](https://forum.inductiveautomation.com/t/svg-or-overlapping-views/105897/26 "2025-05-07T20:49:11Z")

</div>

> [@David\_Stone](#):
>
> The best part of the Ignition product is the active community

The _open_ forum is a huge one here, as well as the forum software chosen (Discourse). Without both of these, the thriving community would be significantly stifled, much like most of the other scada platform forums that lock down their forums or make them ridiculously hard to find. Or their forum software is just ridiculously bad that noone wants to use it (looking at you, big red 2 letters with a R and an A). Imagine the only email subscription option to receive forum updates also includes updates for 30 other completely irrelevant applications as well with no way to exclude them, so the replies you care about just get lost.. And there being no fast access on the website to see who has replied to your posts (in fact I don't think there is a way _at all_)... You just throw the towel in and give up on it

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [May 7, 2025, 8:58pm UTC](https://forum.inductiveautomation.com/t/svg-or-overlapping-views/105897/27 "2025-05-07T20:58:55Z")

</div>

I think I cracked your code Nick! 🙂

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [May 7, 2025, 9:20pm UTC](https://forum.inductiveautomation.com/t/svg-or-overlapping-views/105897/28 "2025-05-07T21:20:50Z")

</div>

Damn, I thought I made it cryptic enough to hide Rick's Automotive 🤷 his forum really needs some work

---

<div class="post-metadata">

**Author:** ![steve.nap](https://avatars.discourse-cdn.com/v4/letter/s/5daacb/32.png) [@steve.nap](https://forum.inductiveautomation.com/u/steve.nap)\
**Post date:** [May 7, 2025, 10:09pm UTC](https://forum.inductiveautomation.com/t/svg-or-overlapping-views/105897/29 "2025-05-07T22:09:06Z")

</div>

Hi David, will do. Once I'm good enough. Yes everyone on here is VERY helpful. Since you literally did all the work for me I wanted to compensate you. I didn't expect all that. Greatly appreciated.

---

<div class="post-metadata">

**Author:** ![steve.nap](https://avatars.discourse-cdn.com/v4/letter/s/5daacb/32.png) [@steve.nap](https://forum.inductiveautomation.com/u/steve.nap)\
**Post date:** [May 7, 2025, 10:38pm UTC](https://forum.inductiveautomation.com/t/svg-or-overlapping-views/105897/30 "2025-05-07T22:38:52Z")

</div>

The reason I asked for the SVG is because I already have the rest of the view built and already have a flex container positioned properly to hold the SVG from another member on this thread so I could easily just drop in the SVG and work on the transform. I'll work with what I have. Thank you sir.

---

<div class="post-metadata">

**Author:** ![David\_Stone](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/david_stone/32/79749_2.png) [@David\_Stone](https://forum.inductiveautomation.com/u/David_Stone)\
**Post date:** [May 7, 2025, 10:42pm UTC](https://forum.inductiveautomation.com/t/svg-or-overlapping-views/105897/31 "2025-05-07T22:42:58Z")

</div>

I uploaded the entire view with svg included, import that and copy out the asset into your view?

---

<div class="post-metadata">

**Author:** ![steve.nap](https://avatars.discourse-cdn.com/v4/letter/s/5daacb/32.png) [@steve.nap](https://forum.inductiveautomation.com/u/steve.nap)\
**Post date:** [May 7, 2025, 10:51pm UTC](https://forum.inductiveautomation.com/t/svg-or-overlapping-views/105897/32 "2025-05-07T22:51:19Z")

</div>

You've done plenty. I'll figure out the rest sir. Thank you.

---

<div class="post-metadata">

**Author:** ![steve.nap](https://avatars.discourse-cdn.com/v4/letter/s/5daacb/32.png) [@steve.nap](https://forum.inductiveautomation.com/u/steve.nap)\
**Post date:** [June 17, 2025, 12:44pm UTC](https://forum.inductiveautomation.com/t/svg-or-overlapping-views/105897/33 "2025-06-17T12:44:59Z")

</div>

Hi, Unfortunately the SVG works in every browser on a Mac and Windows PC, even Safari. It also works well in the Ignition Mobile app on Android but this is what it looks like on the iOS Ignition app.

More research is needed on my end.

If anyone has run into SVG issues on the iOS Ignition app lease let me know.

I'll also research SVGs in iOS apps and any compatibility issues. The white pointer is the problem.

 ![ipad update 05-30-2025](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/7/07dd57c084fadbfc82deda73c35bac5bc4fa51f7.png)

Thanks

---

<div class="post-metadata">

**Author:** ![steve.nap](https://avatars.discourse-cdn.com/v4/letter/s/5daacb/32.png) [@steve.nap](https://forum.inductiveautomation.com/u/steve.nap)\
**Post date:** [June 17, 2025, 12:48pm UTC](https://forum.inductiveautomation.com/t/svg-or-overlapping-views/105897/34 "2025-06-17T12:48:10Z")

</div>

It is correct here on every other browser and the Android app.

 ![Untitled](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/7/f7a1562a367366b0b8776c9a44d4412cac83e9ff.png)

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [June 17, 2025, 2:12pm UTC](https://forum.inductiveautomation.com/t/svg-or-overlapping-views/105897/35 "2025-06-17T14:12:47Z")

</div>

I can see the fix 😉 (ditch the ios)

I'm not sure how to diagnose this without being able to see the browser dev tools... Which you probably can't do on an iphone

---

<div class="post-metadata">

**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\
**Post date:** [June 17, 2025, 2:29pm UTC](https://forum.inductiveautomation.com/t/svg-or-overlapping-views/105897/36 "2025-06-17T14:29:02Z")

</div>

I would use labels and CSS for this too. It's easier to maintain. I favor SVGs for things that are more like drawings. These are just simple elements.

If you do go with SVGs then you need to have everything in the same scaling. A few people suggested that you do it all as a single SVG to accomplish this. I agree.

Another approach is to draw a version that has everything in the same SVG and copy that a few times to delete pieces from each drawing to segregate elements of the overall drawing in the same view scaling across multiple drawings (each drawing with different pieces that together make up the whole drawing). That's good a good way to make more maintainable complex drawings if you're using them in a coordinate container but you need it all in the same SVG if you're using a flex layout (which only applies if you're not using absolute positioning which can make flex behave like coordinate)

EDIT:  
Forgot to mention. You can do your arrow label with an icon. You can do some pretty advanced indicators like that without screwing up scaling.

[Previous page](https://forum.inductiveautomation.com/t/svg-or-overlapping-views/105897.md?page=1)
