[00:00] The perspective drawing editor allows you to create and edit SVGs or scalable vector graphics, which are graphics that can scale to any resolution without a loss in quality. In order to access the editor, you first need to add a drawing component to a perspective view. You can do this by clicking on the perspective components tab and then navigating to the display section. Once here, you would then drag the drawing component into the view where you want to have your SVG displayed. You can see the component is represented by this blank rectangle, which is the visible area of the SVG. We haven't created any graphics yet, so the component isn't going to show anything right now. At this point, we would need to access the drawing editor in order to start creating graphics. Before we do so, I'd like to show another way of creating a drawing component, and that's by converting SVGs that are already embedded on your view. For example, I have this motor symbol component on my view, and we can convert this to a drawing component by first right clicking on it and then selecting the convert to drawing option.

[01:06] We can't tell the conversion happened because our component's name was updated to motor drawing shown in the project browser, and do we see new drawing component properties in our property editor? Now that we know how to create drawing components, let's go ahead and access the drawing editor. In this case, I'll go ahead and access the editor for this drawing component named my drawing. We can double click on the drawing component To open the editor, I'll go over the main tools you'll need to know in order to create and edit SVGs. Let's go over the main areas here, which are the view box in Canvas. The view box is this white rectangle, which is a drawing space where we can create graphics. We can think of this as a lens to what we will see in our drawing component. On our perspective view, this vast gray area outside of our view box is known as the canvas, which is an additional drawing space. The drawing areas have these vertical and horizontal rulers that give us a reference to how big things are. We can tell for example that our view box is a 500 by 500 pixel space.

[02:08] We can move around the view box and canvas areas with the horizontal and vertical scroll bars. Now, in order to start creating graphics, we can make use of the toolbox located on the left hand side. The toolbox contains all the drawing tools used to create and modify shapes, lines, and text. We can very easily start creating graphics by selecting the tool that creates the element we want. If we want to create a circle, we can click on the circle tool. When we did this, our cursor was changed to this cross air symbol and that lets us know we can begin drawing. We can start drawing by clicking and dragging our cursor, and as we move around you'll see an ellipse be drawn, which changes in size depending on where your mouse is moving. Once you have the size you want, you can then go ahead and let go of your left click, which will lock in the size of the ellipse. At this point, we can then go ahead and start drawing a new ellipse or a different element. Let's go ahead and create a perfect circle within our view box.

[03:04] By clicking and dragging our mouse while holding the control key, we've been able to create a few elements and you may have noticed that more tools have been made available to us. Towards the top of the screen, we have a command bar, which provides quick access to core actions that help manage the elements. So we could use the command bar to undo the circle we just made by clicking on the undo button and we can bring it back by clicking on redo. On the right hand side of the screen, we can see the design panel which provides properties that are specific to the element that is selected, so for our circles properties, we have things like the position and size of the circle, the circles, opacity, the fill and stroke, and so on. Some of the actions that become available to us in the command bar and most of the properties we see in the design panel will depend on which element is selected. You can't see which element is selected by looking for the element on your screen that has a blue selection box around it, just like our circle element in the view box. Another way to tell which element is selected is by looking at the element section within the design panel.

[04:07] The element section is similar to the project browser within our designer. It lists out all our elements that have been created and it provides a blue highlight for the selected element. Now that we have a better understanding of our layout, let's try to create something a bit more complex. Let's attempt to create the inductive automation logo, which I have pulled up on screen. We can start by creating the gear which surrounds the inner arrow. The circle element that's already within our view box is a good starting place, and since it is selected, let's center it on our view box by giving it the coordinates of X 100, Y 100 and the size of 300 pixels wide and 300 pixels tall. The middle area of our logo should also be a white color, so we can remove our circles, fill by clicking on the fill property and then choosing the none option for no fill. Let's increase the width of the stroke as well to 20 pixels by typing in 20 to the width property. Our gear should also be a navy blue color, so we can click the stroke color property and use our palette to find a color that closely matches.

[05:09] Now that we have the basic shape of the gear, let's go ahead and add the teeth. An easy way to do this would be to use the star tool from our toolbox. Let's create a star element by clicking on the star tool and we'll size it roughly to the same size of the circle. The inductive automation logo has 12 teeth on the gear and we can utilize the stars points property by updating the default amount of points, which is five to the desired amount, which is 12. The points on the star are too sharp, so we can also increase the corner radius property to make these rounded. Let's set this to one. Now that we have our teeth, let's align them to the circle. We'll multi-select the elements by holding the control key as we click them in the element section, making sure we select the perspective arc zero element first towards the top of our design panel, let's make use of both the align center horizontally and then the align vertical buttons to center the elements together.

[06:03] Next, we'll send the star back one layer by first, making sure it's the only elements selected, and then use our command bars. Send backward button. We can use the square handles on our star to make sure the gears teeth are set to roughly the same size and position that we see in the logo. We'll need to match the color of our star to the same color as the circle. Let's copy up the stroke color from our circle or arc element and paste it into the stars fill color if you wanted to, you could have instead created a binding on the stars, fill color to the circle stroke color using a property binding, we have the gear of our logo created. However, we need to cover our logo center with the white color. To do this, let's first select the perspective arc zero element. Let's then duplicate the circle by clicking on the duplicate button right next to our element section. Looking at our element section, we see that a new element was created perspective arc one, which is sitting on the top layer. All we need to do now is apply a fill color of pure white to the duplicate circle.

[07:04] Now that our gear is finished, let's go ahead and create the green arrow of our logo. To do this, let's use the rectangle tool to create a small rectangle on our canvas. We can use this circle handle to round the rectangle corners to better match the arrow in the logo. Finally, let's give the rectangle a lime green fill and remove its stroke. Let's create a duplicate of our rectangle in the same way we did with our circle with the duplicate rectangle selected. Let's choose our selection tool from the toolbox. With this tool, we can click on our rectangle, which allows us to rotate the element using the arrow handles. Let's angle the rectangle to create one side of the arrow head. We'll then duplicate this angled rectangle. We can flip this rectangle using the mirror vertical button. Let's drag this rectangle into position to create the other side of the arrowhead by dragging the blue.in its center.

[08:03] We'll then multi-select both of the angled rectangles and align them vertically. Finally, we'll select the first rectangle and drag it between the others and resize it as needed. Let's go ahead and multi-select all of our rectangle elements, and we'll group them together with the group button in our command bar. We'll follow the same grouping process or all of the elements in our gear as well. Next, we'll be sure to first select our group zero as seen in the element section, which is our group of elements that make up the gear, and then hold the control key to also select the other group. With both groups selected, we can align their centers horizontally and then align them vertically. At this point, we have successfully created an inductive automation logo. Of course, this isn't a perfect one-to-one representation. However, you should be able to tell that when we utilize all of the tools available in the prospective drawing editor, we can very easily create our own SVGs.

[09:04] There is one more section of this editor that we haven't covered, and that's the settings tab. The settings tab provides us with more properties we can configure relevant to the landscape of the editor. Starting from the top, we see the dimensions of our view box. We can click on this resize view box to content button, which will allow us to create a view box with a specified padding, so we could leave this set to 10 and click on. Okay, and you'll see the view boxes dimensions resize as it shapes around all the elements that have been created. The preserve aspect ratio will maintain the position of the elements within the view box as the view box scales, for example, as the view box scales with the x mid Y mid ratio set elements will be preserved in the middle of our view box, and we'll see how that looks in a second. You can change the color of some properties like the view box grids, guides, and the canvas. We can show the grids by clicking on the show grids checkbox.

[10:03] If we enable grid snapping, then elements will snap to the grid lines if they are within the distance property. In this case, the default is 10 pixels, so if we drag around our lips, we'll see it snap to the grid lines. There's also snapping properties or both snapping to guides and to other elements. I'll turn off the grid snapping and enable the snap to objects property. Let's create a guideline by clicking anywhere on either of the rulers. We can then drag the element around and to be able to snap it to the guide or to the elements in our logo, so that covers the basics with the editor itself. If you are satisfied with your SVG, then you can click on apply, which will bring us back to the designer. We can see the elements from our editor's view box are pulled into the drawing component on the right hand side. The drawing component also comes with its own properties. We have the opportunity to resize the view box here and change the preserve aspect ratio.

[11:07] If we drag our view box around, we'll see it's keeping our graphics centered in the view box. Since the x mid Y mid preserve aspect ratio property is set below this property, we have access to the elements and some of their properties under the position category. We can alter the view box on our view in both position and rotation. Finally, we also have the option to create custom properties and access meta properties.