# Line to image in perspective

**URL:** <https://forum.inductiveautomation.com/t/line-to-image-in-perspective/113531>\
**Category:** General Discussion\
**Tags:** perspective\
**Created:** [January 24, 2026, 7:34pm UTC](https://forum.inductiveautomation.com/t/line-to-image-in-perspective/113531 "2026-01-24T19:34:20Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Flying55](https://avatars.discourse-cdn.com/v4/letter/f/b19c9b/32.png) [@Flying55](https://forum.inductiveautomation.com/u/Flying55)\
**Post date:** [January 24, 2026, 7:34pm UTC](https://forum.inductiveautomation.com/t/line-to-image-in-perspective/113531/1 "2026-01-24T19:34:20Z")

</div>

I’m building an application in perspective, for simplicty I have chosen to use a coordinate view.  
In that view there will be an image in the center, its a drawing of the machine used.  
On the sides i want to show data regarding the sensors that are in the image.

I want lines from the boxes of information to the different parts to the cards with information.

But how do i make the lines easy? Maybe I’m missing something

---

<div class="post-metadata">

**Author:** ![Matrix\_Engineering](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/matrix_engineering/32/19781_2.png) [@Matrix\_Engineering](https://forum.inductiveautomation.com/u/Matrix_Engineering)\
**Post date:** [January 24, 2026, 8:19pm UTC](https://forum.inductiveautomation.com/t/line-to-image-in-perspective/113531/2 "2026-01-24T20:19:42Z")

</div>

Version? 8.3 has drawing tools. In 8.1, create an SVG in inkScape etc and import it

---

<div class="post-metadata">

**Author:** ![Flying55](https://avatars.discourse-cdn.com/v4/letter/f/b19c9b/32.png) [@Flying55](https://forum.inductiveautomation.com/u/Flying55)\
**Post date:** [January 24, 2026, 10:32pm UTC](https://forum.inductiveautomation.com/t/line-to-image-in-perspective/113531/3 "2026-01-24T22:32:58Z")

</div>

8.3 so i tested the drawing tool and while it works it is isn’t completely practical for the job. I cant see the line on an overlay while i make it. But I guess it has to be good enough.

---

<div class="post-metadata">

**Author:** ![Matrix\_Engineering](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/matrix_engineering/32/19781_2.png) [@Matrix\_Engineering](https://forum.inductiveautomation.com/u/Matrix_Engineering)\
**Post date:** [January 24, 2026, 11:01pm UTC](https://forum.inductiveautomation.com/t/line-to-image-in-perspective/113531/4 "2026-01-24T23:01:07Z")

</div>

An alternate to using SVGs in 8.1 was to use the “pipe tool”. You could give that a go in 8.3

---

<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:** [January 24, 2026, 11:31pm UTC](https://forum.inductiveautomation.com/t/line-to-image-in-perspective/113531/5 "2026-01-24T23:31:53Z")

</div>

Your graphics are an image, why not add the lines on the image?

---

<div class="post-metadata">

**Author:** ![Flying55](https://avatars.discourse-cdn.com/v4/letter/f/b19c9b/32.png) [@Flying55](https://forum.inductiveautomation.com/u/Flying55)\
**Post date:** [January 24, 2026, 11:53pm UTC](https://forum.inductiveautomation.com/t/line-to-image-in-perspective/113531/6 "2026-01-24T23:53:28Z")

</div>

I’m not 100% sure yet about the position of the cards that surrounds it, but that is an option that i probably i most likely will use and add the lines last thing.

I thought there would be an easy way to add lines but if there isn’t I’ll use that. or maybe using the drawing tool with a layer that covers all, but it doesn’t seem to be made for this since i cant see the background while i edit.

---

<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:** [January 25, 2026, 12:11am UTC](https://forum.inductiveautomation.com/t/line-to-image-in-perspective/113531/7 "2026-01-25T00:11:51Z")

</div>

Draw your entire system as an SVG, draw the lines to roughly where they will go in the final system.  
Using the xml tools in Inkscape, make sure you have set the `id` for each line to a meaningful value.  
Import (Embed not image manager) into the perspective view.  
Arrange the cards around the image.  
In the SVG elements, search for the `id` elements and when you see them, modify the start or end value entries as needed to move it to line up with the cards.  
Job done. Make sure your'e using aspect ratio on the coordinate container.

---

<div class="post-metadata">

**Author:** ![michael.flagler](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/michael.flagler/32/26272_2.png) [@michael.flagler](https://forum.inductiveautomation.com/u/michael.flagler)\
**Post date:** [January 25, 2026, 4:27pm UTC](https://forum.inductiveautomation.com/t/line-to-image-in-perspective/113531/8 "2026-01-25T16:27:26Z")

</div>

If you're in 8.3, use the drawing tool to make a diagonal line with the pen tool (guessing this is what you're after), then make sure the style, width, etc are all set as you want them in the design configuration of the line. Next, go to the settings tab and click the icon in the upper right that says resize viewbox to content with 0 padding (if doing a horizontal or vertical line you'll want some padding). Change Preserve Aspect Ratio to none, then save/apply that drawing. Once back on your coordinate container, on the element 0 (should only be this single element), add a property named vectorEffect and set it to non-scaling-stroke.

Now you should be able to resize this line (it will always be at an angle) however you want, and it will stay the same thickness, but your corners will always be your endpoints of the line. You'll need to make one for sloping up and down, and straight lines will be easy but similar (hold control when clicking the start/end points).

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/5/259db22842412a87eae029e614e91146215d7fb1.png)

---

<div class="post-metadata">

**Author:** ![Flying55](https://avatars.discourse-cdn.com/v4/letter/f/b19c9b/32.png) [@Flying55](https://forum.inductiveautomation.com/u/Flying55)\
**Post date:** [January 26, 2026, 12:51pm UTC](https://forum.inductiveautomation.com/t/line-to-image-in-perspective/113531/9 "2026-01-26T12:51:01Z")

</div>

@michael.flagler

Sounds like a great solution, I can’t change Preserve Aspect Ratio though,

first i made the line, in settings the Preserve Aspect Ratio is grayed out.

then the resize with padding 0, that works.

Now the Preserve Aspect Ratio dropdown is active, but i cant choose anything else than xMidYMid that is already selected.

---

<div class="post-metadata">

**Author:** ![michael.flagler](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/michael.flagler/32/26272_2.png) [@michael.flagler](https://forum.inductiveautomation.com/u/michael.flagler)\
**Post date:** [January 26, 2026, 9:15pm UTC](https://forum.inductiveautomation.com/t/line-to-image-in-perspective/113531/10 "2026-01-26T21:15:03Z")

</div>

If you can't change it in the drawing editor, then once you get back to designer there's the pereserveAspectRatio towards the top of the properties you should be able to change from there (see in my screenshot also). That should not be grayed out for you.

---

<div class="post-metadata">

**Author:** ![Flying55](https://avatars.discourse-cdn.com/v4/letter/f/b19c9b/32.png) [@Flying55](https://forum.inductiveautomation.com/u/Flying55)\
**Post date:** [January 27, 2026, 6:29pm UTC](https://forum.inductiveautomation.com/t/line-to-image-in-perspective/113531/11 "2026-01-27T18:29:23Z")

</div>

Thanks, that works great. Saves a lot of time.
