# Perspective SVG import handling

**URL:** <https://forum.inductiveautomation.com/t/perspective-svg-import-handling/64291>\
**Category:** Ignition Early Access\
**Tags:** perspective\
**Created:** [September 20, 2022, 4:03pm UTC](https://forum.inductiveautomation.com/t/perspective-svg-import-handling/64291 "2022-09-20T16:03:57Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [September 20, 2022, 4:03pm UTC](https://forum.inductiveautomation.com/t/perspective-svg-import-handling/64291/1 "2022-09-20T16:03:57Z")

</div>

We’re currently working on improving how SVGs are imported/embedded/rendered in Perspective and we’re looking for some insight into SVG files which have not historically worked for users.

To be clear, SVGs are incredibly complicated and there’s no way we can make all SVGs magically work - but we’re going to try our hardest to make sure we’re not preventing SVGS from working for no valid reason. To this end, we’d like to solicit these forums for SVG files you might have attempted to use previously but which rendered incorrectly in some way, or which previously warned you about invalid tags. Please supply (upload) your SVG in this thread _with a picture of what the SVG is supposed to look like_, or you can message me directly if you’d prefer not to publicly share the resource and accompanying picture. This thread will eventually be removed as testing is completed.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 21, 2022, 7:14am UTC](https://forum.inductiveautomation.com/t/perspective-svg-import-handling/64291/2 "2022-09-21T07:14:57Z")

</div>

Dont forget to add events that reference the name/id of the svg element(group) clicked 😛  
@nader.chinichian

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [September 22, 2022, 4:54pm UTC](https://forum.inductiveautomation.com/t/perspective-svg-import-handling/64291/3 "2022-09-22T16:54:31Z")

</div>

Could you clarify what you’re looking for, @victordcq ?

---

<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:** [September 22, 2022, 5:39pm UTC](https://forum.inductiveautomation.com/t/perspective-svg-import-handling/64291/4 "2022-09-22T17:39:47Z")

</div>

Basically if a user clicks on a portion of an SVG to handle the event somehow. For example, if the SVG is 10 circles, clicking on each circle would open a specific popup, or typical popup with specifc parameters.

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [September 22, 2022, 5:42pm UTC](https://forum.inductiveautomation.com/t/perspective-svg-import-handling/64291/5 "2022-09-22T17:42:55Z")

</div>

That is NOT something we’re looking to address with this effort. What you’re describing could potentially be addressed as part of the greater Drawing Editor effort. This effort is strictly restricted to better import handling of svgs, display of those svgs, and converting _some_ components to their constituent svg pieces.

---

<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:** [September 22, 2022, 6:02pm UTC](https://forum.inductiveautomation.com/t/perspective-svg-import-handling/64291/6 "2022-09-22T18:02:06Z")

</div>

Understand. Perhaps @victordcq was referring to something else.

Since you brought it up...

> [@cmallonee](#):
>
> What you're describing could potentially be addressed as part of the greater Drawing Editor effort.

Can you elaborate?

@victordcq has created a module to catch events. I typically just stack a component, or embed individual SVGs, but that can impact performance.

Are there any plans to catch events?

---

<div class="post-metadata">

**Author:** ![tupanaster](https://avatars.discourse-cdn.com/v4/letter/t/5daacb/32.png) [@tupanaster](https://forum.inductiveautomation.com/u/tupanaster)\
**Post date:** [September 22, 2022, 6:33pm UTC](https://forum.inductiveautomation.com/t/perspective-svg-import-handling/64291/7 "2022-09-22T18:33:57Z")

</div>

I’m glad to see there is a lot of effort on making SVGs work better in Ignition. I really don’t expect it to be a replacement of Inkscape but to just show them correctly.

I also know that there will be or there is some effort into adding SVG drawing tools. Some basic drawing would be nice but I insist that a full drawing tool will be better handled in other programs designed for it

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [September 22, 2022, 7:46pm UTC](https://forum.inductiveautomation.com/t/perspective-svg-import-handling/64291/8 "2022-09-22T19:46:37Z")

</div>

Better support for gradients is about the only thing I can really think of.

Last I checked, importing them sometimes works and sometimes doesn’t. I’ll have to see if I can work up an example tomorrow.

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [September 22, 2022, 9:46pm UTC](https://forum.inductiveautomation.com/t/perspective-svg-import-handling/64291/9 "2022-09-22T21:46:45Z")

</div>

@lrose , if you can find some examples which don’t currently work well, please send them along so that I can verify they’re working with the updated approach. I’ve already verified gradients through some svgs attached to active Support tickets:

 ![Screen Shot 2022-09-22 at 2.45.37 PM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/8/1827e48f0f74a44e527827f499997180c2f0c55c.jpeg)

---

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [September 22, 2022, 10:54pm UTC](https://forum.inductiveautomation.com/t/perspective-svg-import-handling/64291/10 "2022-09-22T22:54:58Z")

</div>

The only experience I have with SVGs was creating a pretty complex process visualization graphic and importing that into a Perspective view. What would be nice is if there was an automatic process of creating bindings to certain properties of the SVG. In my case, I wanted to bind the `fill` and `stroke` properties of a ton of shapes (to indicate state) and every time I made changes in Inkscape and reimported the SVG, I’d need to go through and recreate the bindings, which got very tedious (and made me greatly minimize the number of edits I made). I’m not sure how automating this would work, maybe parsing for a certain string of characters, kind of like how style classes have `.psc-` prepended to them.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 23, 2022, 6:45am UTC](https://forum.inductiveautomation.com/t/perspective-svg-import-handling/64291/11 "2022-09-23T06:45:52Z")

</div>

> [@jlandwerlen](#):
>
> Basically if a user clicks on a portion of an SVG to handle the event somehow. For example, if the SVG is 10 circles, clicking on each circle would open a specific popup, or typical popup with specifc parameters.

Yeah that is what i ment. But i indeed have a module made for this myself, it's kinda clucky xD

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 23, 2022, 6:51am UTC](https://forum.inductiveautomation.com/t/perspective-svg-import-handling/64291/12 "2022-09-23T06:51:05Z")

</div>

I got some svg feature i tried to use here before that didnt work... filters

> [@Perspective graphic outline color darker than fill](https://forum.inductiveautomation.com/t/perspective-graphic-outline-color-darker-than-fill/59905/22):
>
> yeah the stroke color does not know about the fill color. Also the svg stroke is different than the html border you could create something with an opacity which would overlay on the fill. but that will require you to edit the svg as svg’s filters work different than just adding some css. in this post the soloution, you could make the red invisible and the blue a transaparent grey, which would result in a darker “inside” border. but this requires you to make some changes to the svg. you need t…

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/8/2812dc1d6925f3269082adec0d9c1a47759702a6.png)

```auto
<svg xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
  <defs>
    <filter id='inset' x='-50%' y='-50%' width='200%' height='200%'>
      <!--outside-stroke-->
      <feFlood flood-color="red" result="outside-color"/>
      <feMorphology in="SourceAlpha" operator="dilate" radius="2"/>
      <feComposite in="outside-color" operator="in" result="outside-stroke"/>
      <!--inside-stroke-->
      <feFlood flood-color="blue" result="inside-color"/>
      <feComposite in2="SourceAlpha" operator="in" result="inside-stroke"/>
      <!--fill-area-->
      <feMorphology in="SourceAlpha" operator="erode" radius="2"/>
      <feComposite in="SourceGraphic" operator="in" result="fill-area"/>
      <!--merge graphics-->
      <feMerge>
        <feMergeNode in="outside-stroke"/>
        <feMergeNode in="inside-stroke"/>
        <feMergeNode in="fill-area"/>
      </feMerge>
    </filter>
  </defs>
  <g transform="scale(2)">
    <path class="st0" d="M144.7,126.2l-2.8,8.8l-3.9-2.3l-2-7.7l1.7-4.3l5.5-4.4L144.7,126.2z M93.5,24.2l6,6.3l4.4-1l7.5,6l1.9,1.1
  l2.5-0.3l4,3.4l12.3,2.4l-4.3,8.9l-1.1,9.1l-2.4,2.2l-3.9-1.2l0.3,3.2l-6.3,7l-0.1,5.6l4.1-1.9l2.9,5.4L121,84l2.5,4.6l-3,3.7
  l2.2,9.3l4.6,1.5l-1,5.1l-7.8,6.6l-16.9-3.2l-12.5,3.8l-1,7l-9.9,1.5l-9.6-5.3l-3.1,2.5l-15.8-5.3l-3.4-4.6l4.4-7.1l1.6-24.1
  l-8.8-13l-6.3-6.4l-13.1-4.9l-0.9-9.4l11.1-2.8L48.9,47l-2.7-14.8l8.1,5.7l20-10.3l2.6-11l7.5-2.8l1.3,4.8l4,0.2L93.5,24.2z"
fill="#00ffff" filter="url(#inset)"/>
  </g>
</svg>

```

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [September 23, 2022, 2:46pm UTC](https://forum.inductiveautomation.com/t/perspective-svg-import-handling/64291/13 "2022-09-23T14:46:52Z")

</div>

Thank you everyone! I checked these examples against the development work and we’ll need a couple of more tweaks to get these working. We’ll see what we can do!

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [September 26, 2022, 3:34pm UTC](https://forum.inductiveautomation.com/t/perspective-svg-import-handling/64291/14 "2022-09-26T15:34:46Z")

</div>

![Screen Shot 2022-09-26 at 8.33.44 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/a/7ac67f4cb51803670fabdf3630a1ac1a34079986.png)  
We were able accommodate the provided svg after some minor tweaks.

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [September 26, 2022, 4:50pm UTC](https://forum.inductiveautomation.com/t/perspective-svg-import-handling/64291/15 "2022-09-26T16:50:33Z")

</div>

Last call on problematic svgs! Anything we can’t get working here will have to wait until the Drawing Editor is completed.

---

<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:** [September 26, 2022, 5:54pm UTC](https://forum.inductiveautomation.com/t/perspective-svg-import-handling/64291/16 "2022-09-26T17:54:58Z")

</div>

This is exciting. Do you have an ETA on when these changes are likely to make it to a live build?

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [September 26, 2022, 6:02pm UTC](https://forum.inductiveautomation.com/t/perspective-svg-import-handling/64291/17 "2022-09-26T18:02:07Z")

</div>

These changes will hopefully enter a nightly build sometime this week.

---

<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:** [September 26, 2022, 6:03pm UTC](https://forum.inductiveautomation.com/t/perspective-svg-import-handling/64291/18 "2022-09-26T18:03:02Z")

</div>

Fantastic!

Thank you.

---

<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:** [September 26, 2022, 7:48pm UTC](https://forum.inductiveautomation.com/t/perspective-svg-import-handling/64291/19 "2022-09-26T19:48:32Z")

</div>

I’m not sure if this is considered related but visibility properties are not recognized on embedded SVGs so you can’t embed an SVG and adjust visibility on segments of the SVG using scripts + custom properties added to the SVG after you embed them.

Imagine a scenario where you have an overhead valve that can support up to 4 directions for ports. It would be good to be able to create a single SVG and manipulate the visibility of ports in Ignition.

I do this already with SVGs referenced from the image library where I have built a structure containing every possible valve orientation as individual images (not ideal) and then manipulate which SVG is loaded using custom properties on the perspective image control (N, S, E and W). At design time I can manipulate the check boxes (custom properties) to change the indirect pathing to load the correct image from the image library. This allows me to build a valve cluster by copy/pasting my image control for each valve in a valve cluster and tweaking the check boxes to adjust the port orientation.

The main time I use this overhead valve symbol is with valve clusters for CIP systems. Here’s a screenshot to kind of give you an idea of what I’m talking about. I’ve also included an SVG with each port “group” labeled. That’s the part I would animate visibility on based on the custom properties.  
 ![Overhead Valve](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/c/cc78b942b06fa908b869c30268c6a62167033838.svg)  
 ![Overhead Valve](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/c/acf5e8ea23c2128ae05ee8994c43ed6f593fe287.png)

I’m not going to hold my breath on this but I figure it doesn’t hurt to ask 🙂

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [September 26, 2022, 7:52pm UTC](https://forum.inductiveautomation.com/t/perspective-svg-import-handling/64291/20 "2022-09-26T19:52:03Z")

</div>

We’ll need to look into that later because that’s a function of how svgs operate or are rendered, not how they’re imported/embedded.

[Next page](https://forum.inductiveautomation.com/t/perspective-svg-import-handling/64291.md?page=2)