# Drawing Tools in perspective

**URL:** <https://forum.inductiveautomation.com/t/drawing-tools-in-perspective/51407>\
**Category:** Ignition\
**Created:** [September 28, 2021, 2:53pm UTC](https://forum.inductiveautomation.com/t/drawing-tools-in-perspective/51407 "2021-09-28T14:53:05Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Anita.Shinde](https://avatars.discourse-cdn.com/v4/letter/a/c2a13f/32.png) [@Anita.Shinde](https://forum.inductiveautomation.com/u/Anita.Shinde)\
**Post date:** [September 28, 2021, 2:53pm UTC](https://forum.inductiveautomation.com/t/drawing-tools-in-perspective/51407/1 "2021-09-28T14:53:05Z")

</div>

Hi,  
I want to design one view like below.  
Can anyone suggest how can I do this design?

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/0/b03ad879e8a05f54ac3e25c162ca6b361c531044.png)

Thanks…!!!

---

<div class="post-metadata">

**Author:** ![swolnisty](https://avatars.discourse-cdn.com/v4/letter/s/7bcc69/32.png) [@swolnisty](https://forum.inductiveautomation.com/u/swolnisty)\
**Post date:** [September 28, 2021, 3:12pm UTC](https://forum.inductiveautomation.com/t/drawing-tools-in-perspective/51407/2 "2021-09-28T15:12:49Z")

</div>

There are a few options that are regularly discussed on these forums. Take a look at this [thread](https://forum.inductiveautomation.com/t/bug-11342-perspective-cant-draw-any-shapes/20690/8) for some ideas.

---

<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 28, 2021, 4:20pm UTC](https://forum.inductiveautomation.com/t/drawing-tools-in-perspective/51407/3 "2021-09-28T16:20:29Z")

</div>

SVG’s are the way to do it (they aren’t the only way to do it, but they are probably the best way).

You can copy this into a text file, save it as a .svg file and then drag it onto your view, this will give you a blank SVG.

```auto
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
  xmlns:svg="http://www.w3.org/2000/svg"
  xmlns="http://www.w3.org/2000/svg"
  width="50mm"
  height="50mm"
  viewBox="0 0 50 50"
  version="1.1">
</svg>

```

From there it is just a matter of understanding how to work with SVG’s in general and in Ignition.

Here is an excellent resource for SVG’s - [Pocket Guide to Writing SVG](https://svgpocketguide.com/#intro)

This will allow you to understand what all the cryptic information in an SVG is actually doing and you’ll be writing (drawing?) you’re own SVG’s before you know it. Any thing that gets really complex it might be worth downloading an app like Inkscape, but for simple things understanding how to do it will make it pretty quick.

For instance if you want an svg with a line and a circle that can be done very easily. Drop in the blank svg, then add the following structure under the elements property:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/d/6d4ca2c65fef305c75f333c34087cd58ad9dc60d.png)

The result will be this:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/7/e75639e6135e266c6eb531f5d2b906cf0cb1f006.png)

---

<div class="post-metadata">

**Author:** ![andrews](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@andrews](https://forum.inductiveautomation.com/u/andrews)\
**Post date:** [September 28, 2021, 4:28pm UTC](https://forum.inductiveautomation.com/t/drawing-tools-in-perspective/51407/4 "2021-09-28T16:28:23Z")

</div>

You can create SVG graphics in Inkscape for free and import/embed them.

---

<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:** [September 28, 2021, 8:12pm UTC](https://forum.inductiveautomation.com/t/drawing-tools-in-perspective/51407/5 "2021-09-28T20:12:30Z")

</div>

+1 for using Inkscape. Make sure to save as an optimised SVG. I use the settings here:

> [@\[BUG-11342\] Perspective - Can't draw any shapes](https://forum.inductiveautomation.com/t/bug-11342-perspective-cant-draw-any-shapes/20690/22):
>
> Not sure if worth mentioning, that if you do use Inkscape, you should save your SVGs as an Optimised SVG and not as an Inkscape SVG. It pulls all the crap out of the file. I use these settings fwiw: Edit: uncheck the top option, don't remove unused ids [image] [image] [image] Edit: maybe should uncheck the convert css to XML option

---

<div class="post-metadata">

**Author:** ![Anita.Shinde](https://avatars.discourse-cdn.com/v4/letter/a/c2a13f/32.png) [@Anita.Shinde](https://forum.inductiveautomation.com/u/Anita.Shinde)\
**Post date:** [September 29, 2021, 5:38am UTC](https://forum.inductiveautomation.com/t/drawing-tools-in-perspective/51407/6 "2021-09-29T05:38:24Z")

</div>

Thank you guys, I will try this.

---

<div class="post-metadata">

**Author:** ![Kevin.McClusky](https://avatars.discourse-cdn.com/v4/letter/k/47e85d/32.png) [@Kevin.McClusky](https://forum.inductiveautomation.com/u/Kevin.McClusky)\
**Post date:** [September 29, 2021, 5:52am UTC](https://forum.inductiveautomation.com/t/drawing-tools-in-perspective/51407/7 "2021-09-29T05:52:54Z")

</div>

Surprised no one mentioned the new pipe drawing tools in 8.1.10. I created this example in a couple minutes.

The pipes shown in the image are using P&ID style rendering. Numbers are just labels with a background color and border radius. As you’re dragging the pipes, press Shift to make them angled.

(And here’s the link to the user manual pages: [Perspective Pipes - Ignition User Manual 8.1 - Ignition Documentation](https://docs.inductiveautomation.com/display/DOC81/Perspective+Pipes) )

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/0/80c8c400e118f572a868d6bb51fddf62521a70a4.png)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/f/df55bc6cd8c0aa21ab6d2213640201528f49ee1e.png)

---

<div class="post-metadata">

**Author:** ![Anita.Shinde](https://avatars.discourse-cdn.com/v4/letter/a/c2a13f/32.png) [@Anita.Shinde](https://forum.inductiveautomation.com/u/Anita.Shinde)\
**Post date:** [September 29, 2021, 6:05am UTC](https://forum.inductiveautomation.com/t/drawing-tools-in-perspective/51407/8 "2021-09-29T06:05:11Z")

</div>

ok, Thank you.

---

<div class="post-metadata">

**Author:** ![Anita.Shinde](https://avatars.discourse-cdn.com/v4/letter/a/c2a13f/32.png) [@Anita.Shinde](https://forum.inductiveautomation.com/u/Anita.Shinde)\
**Post date:** [September 29, 2021, 7:43am UTC](https://forum.inductiveautomation.com/t/drawing-tools-in-perspective/51407/9 "2021-09-29T07:43:46Z")

</div>

Hi,  
I have installed 8.1.10 version but I cant see any componant like pipe.  
Can you please confirm once, which version you are using?

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

Thanks.

---

<div class="post-metadata">

**Author:** ![Kevin.McClusky](https://avatars.discourse-cdn.com/v4/letter/k/47e85d/32.png) [@Kevin.McClusky](https://forum.inductiveautomation.com/u/Kevin.McClusky)\
**Post date:** [September 29, 2021, 7:58am UTC](https://forum.inductiveautomation.com/t/drawing-tools-in-perspective/51407/10 "2021-09-29T07:58:31Z")

</div>

You won’t find the pipe drawing tools in the component palette. They’re in the top icons.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/0/80c8c400e118f572a868d6bb51fddf62521a70a4.png)

1. Create a Coordinate View, or put a Coordinate Container inside a view and select into it.
2. Click that icon shown above.
3. Click in the view anywhere to start drawing pipes. (Note that if you hold Shift, it’ll let you draw angles, in addition to up, down, left, and right.)

If you need further reference, just follow that link to the user manual. It’ll walk you through, and has some animations to demonstrate along the way.

---

<div class="post-metadata">

**Author:** ![Anita.Shinde](https://avatars.discourse-cdn.com/v4/letter/a/c2a13f/32.png) [@Anita.Shinde](https://forum.inductiveautomation.com/u/Anita.Shinde)\
**Post date:** [September 29, 2021, 8:00am UTC](https://forum.inductiveautomation.com/t/drawing-tools-in-perspective/51407/11 "2021-09-29T08:00:14Z")

</div>

okay. Thanks a lot.

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [September 29, 2021, 9:05am UTC](https://forum.inductiveautomation.com/t/drawing-tools-in-perspective/51407/12 "2021-09-29T09:05:33Z")

</div>

May be it is because there are some performance issue and some feature limitation in pipeline. As I posted earlier in related thread for pipeline, after sometime drawing tools get laggy and it is hard to draw.  
Also there is no CSS style support for pipeline yet.

---

<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:** [September 29, 2021, 9:57am UTC](https://forum.inductiveautomation.com/t/drawing-tools-in-perspective/51407/13 "2021-09-29T09:57:29Z")

</div>

Is that only for your monster screens Nader? Or how many pipes are you talking before it becomes noticeably slower?

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [September 29, 2021, 11:06am UTC](https://forum.inductiveautomation.com/t/drawing-tools-in-perspective/51407/14 "2021-09-29T11:06:57Z")

</div>

My only experience is for monster screen as you described which I believe is very common in actual P&ID and diagrams.  
My screen get laggy when I reach half of pipes that you seen.

I did some projects with 10x more than that before with SVG and get very nice result.

In one on one comparison even with lower numbers of pipes vs elements, the SVG is always winner.

The only Con in external drawing tools is I have to copy and paste the drawing every time I make changes but it is worth the effort.

You can even see this performance problem when you compare perspective pipeline with Vision drawing tools.

I really hope the future perspective drawing don’t use same technology as pipeline use, because drawing tools should have smooth interface otherwise user can’t draw complex shap.

Also I hope we have full style support in pipeline and drawing in perspective which doesn’t have it right now.

---

<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 29, 2021, 11:20am UTC](https://forum.inductiveautomation.com/t/drawing-tools-in-perspective/51407/15 "2021-09-29T11:20:27Z")

</div>

> [@nader.chinichian](#):
>
> May be it is because there are some performance issue and some feature limitation in pipeline

Really, it was because I don't have 8.1.10 yet, so SVG's are the only way for me as of now. But hearing your feed back is less than encouraging.

---

<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 29, 2021, 12:05pm UTC](https://forum.inductiveautomation.com/t/drawing-tools-in-perspective/51407/16 "2021-09-29T12:05:12Z")

</div>

the pipes are made out of svgs tho, so not sure what is so different

---

<div class="post-metadata">

**Author:** ![Kevin.McClusky](https://avatars.discourse-cdn.com/v4/letter/k/47e85d/32.png) [@Kevin.McClusky](https://forum.inductiveautomation.com/u/Kevin.McClusky)\
**Post date:** [September 29, 2021, 8:15pm UTC](https://forum.inductiveautomation.com/t/drawing-tools-in-perspective/51407/17 "2021-09-29T20:15:12Z")

</div>

Nader - Gotcha. I also hope performance improves in later versions for very dense screens. For simple to medium complexity drawing, I’ve found it seems to work well in this initial 8.1.10 release.

For the screenshot above, I wouldn’t expect any performance issues, as it’s relatively simple compared to some of the denser screens. It’s also nice to be able to edit and modify the pipes inside the designer without needing to use external tools. As you said, if you want to do simple colors for animations it works great but if you want advanced CSS styling with gradients and moving animations you don’t have those options available at present. If Anita’s target design is what’s contained in the first screenshot I’d probably use the piping tools rather than SVGs, and if the target design is more complex or visually dense, SVGs might still be the way to go.

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [September 30, 2021, 6:00am UTC](https://forum.inductiveautomation.com/t/drawing-tools-in-perspective/51407/18 "2021-09-30T06:00:00Z")

</div>

> [@lrose](#):
>
> is less than encouraging.

Me too, I think so before, as Kevin said for medium detail it is good, but when the screen has more details moving mouse slows down, selecting objects has delayed, and drawing tools is so laggy.  
You can check it but you need to draw something really big that take one day 😉

---

<div class="post-metadata">

**Author:** ![Anita.Shinde](https://avatars.discourse-cdn.com/v4/letter/a/c2a13f/32.png) [@Anita.Shinde](https://forum.inductiveautomation.com/u/Anita.Shinde)\
**Post date:** [September 30, 2021, 3:47pm UTC](https://forum.inductiveautomation.com/t/drawing-tools-in-perspective/51407/19 "2021-09-30T15:47:01Z")

</div>

In my case Its a simple design, will go with drawing tools in designer.  
Thank you all for your suggestions.

---

<div class="post-metadata">

**Author:** ![Gabriel\_Schwinghamme](https://avatars.discourse-cdn.com/v4/letter/g/8c91f0/32.png) [@Gabriel\_Schwinghamme](https://forum.inductiveautomation.com/u/Gabriel_Schwinghamme)\
**Post date:** [March 30, 2023, 5:29pm UTC](https://forum.inductiveautomation.com/t/drawing-tools-in-perspective/51407/20 "2023-03-30T17:29:13Z")

</div>

I know this is a old forum, but do you know if you can edit imported SVGs to say change color based on tag conditions of multiple tags?

[Next page](https://forum.inductiveautomation.com/t/drawing-tools-in-perspective/51407.md?page=2)
