[00:00] Using a combination of shapes, lines, and text elements, you can easily create complex SVGs. The drawing editor for the prospective drawing component provides a set of drawing tools that allow us to create and modify these elements. We can find this toolbox on the left hand side of the editor. In this lesson, we'll go over how to create and modify all of the available elements. This block of tools here are used for creating shapes, and we'll begin with the rectangle tool. We can use the tool by first selecting it from the toolbox. Next, we'll hold our left click and drag within the view box to create a rectangle of any size. Letting go of our left click will set the size of the rectangle. The rectangle tool can also be used to create perfect squares by holding the control key as we drag. After creating these rectangle elements, we are able to modify their properties from within the design panel. We have access to a couple of properties that are unique to rectangle elements. Those are the horizontal corner radius RX and the vertical corner radius RY.

[01:06] These properties control the degree of roundness of the rectangle's corners, so while the property is set to zero rectangle elements will have right angle corners. As we increase the value of the property, the corners will become more rounded. We can increase the value of these properties either by dragging these circle handles available on our element or by directly typing in the values within the design panel. Anytime these values are increased, we get access to the make corners straight property, which will reset both corner radius properties back to a zero value. Let's move on to the circle tool located beneath the rectangle tool. With this tool selected, we can create an ellipse by dragging the tool around the view box. We can create perfect circles by holding the control key as we drag the tool. Circle or arc elements have three unique properties. We get access to both a horizontal radius and a vertical radius that we can set to any value between zero and 360 degrees. By default, both values will be set to zero, and when they are set to the same value, our element will represent a complete ellipse or circle.

[02:10] If we set the values to deviate from one another, our element will represent only a portion of the ellipse or circle. For example, we could click and drag the circle handle that controls our radius. In this case, I'm dragging the vertical radius. As we drag the radius around, we'll see its value update. The curve between our two radii points makes up this visible portion of the element. We can toggle which curve is visible with the available large arc and sweep properties. This will swap our value for the horizontal and vertical radius. Let's move on to the polygon tool located beneath the circle tool. Just like our other tools, we can draw a polygon by dragging our tool around the view box, and by default it will create a pentagon. Polygons have a points property located in the design panel. This allows us to set the amount of points on the polygon so we could update this value to give the element a new shape.

[03:02] For example, if we update the property to three, our polygon changes to a triangle. If we update the value to six, we get a hexagon. Right next to our points property, we have another corner radius property that is applied to all the corners on our polygon. The property is set to zero by default, so we won't see any roundness on our corners. I'll type in a few different values into this property and you'll notice that as we approach closer to a value of one, our corners become more rounded. I'll keep this set to zero for now. The last unique property is the base radius property. This property controls the size of our radius from the center of the polygon to the middle of our sides, so for example, we could type in 0.5 into the property, which will reduce the size of our radii by half. Let's go over the last tool in our shape section, which is the star tool. So we'll click on the star tool and drag in our view box to draw star. The star tool shares the same properties that we saw with our polygon element however, we can see that by default the base radius property is already set to 0.5. Of course, we can change these values and add more points to the star or rounding as needed.

[04:07] Now that we've covered the shape tools, I'll delete all the elements on my view box and go over the path tools. Path elements can create complex shapes by combining multiple straight or curved lines. We'll start with the pencil tool, which allows us to freehand draw lines. To use the tool, you would simply click on the pencil tool and then hold your left click down as you move around the view box. While doing this, we'll see a line be drawn as it follows our cursor. Once you let go of your left click, the path will be completed allowing you to create another path element. We also have this configuration from within the command bar that allows us to adjust the smoothness of the pencil tool. If we increase the value of the smoothness from the default of 100, the tool will draw a smoother path as it reduces the amount of jagged edges. I'll zoom in to 250% so we can better see this behavior. Let's set the smoothness value to 300 and draw another path. I'll increase the stroke size of our paths as well, so we can compare them.

[05:06] We can easily tell the path created with the higher smoothness has less jagged edges. I'll set our view back to 100% so we can cover the rest of the tools. As opposed to the pencil tool the pen tool gives us more precision in how we draw our paths. With the tool selected, we can left click anywhere in our view box to create the origin point of the path. Next, you can begin to mouse around the view box setting the size and direction of the line segment. With a single left click we'll create the endpoint of this segment allowing us to draw another segment from here, or we can double click, which completes our path element. You can also complete a path by hitting the enter key on your keyboard. We do have a toggle available in our command bar that determines what kind of segments can be drawn. By default, the bezier curve option is set. So like we just saw, we can create a straight line in any direction while the bezier curve option is selected. We can also create a curve by holding down our left click, and if we mouse around, you'll see the line turn to a blue color.

[06:04] This lets us create a guide in which we can draw a curve. When we let go of our left click, the guideline will be set in its position and if we mouse around, we'll see a curve be created as it follows our cursor. From here, we could again complete the segment with a single left click or complete the path by double clicking. You can also hold the control key as you mouse the segment around allowing our line to snap to any 15 degree angle. The other available option in our command bar is the paraxial line segment. With this option selected, we can create paraxial lines, which are lines set at the paraxial angles. These are angles at every 90 degrees, so if we start a new path, we can see that we are only limited to creating lines up, down, left or right. We can also hold either the control key or the shift key down to overwrite this method, allowing our line to snap to any 15 degree angle. There's one unique property shared by both pencil and pen path elements, and that's this closed property within the design panel.

[07:04] If we enable the property by clicking on the checkbox, we'll see our path create a line from its start point to its endpoint creating a close shape. There's one final tool available for creating elements, and that's the text tool. With the text tool selected, we can click anywhere in our window to place down some text. Text elements have many unique properties that we can find in the design panel. We can represent any text on screen by typing it into the text property. I'll type in the phrase, this is a text element. Below the text property, we have a number of options to style our text. We can update the font family, style and weight using these dropdown menus. So for example, we could give our text a font of aerial, a style of italic and a weight of bold. Below these properties, we are able to set the size of our text element. On the right hand side, you can set the units to size by. By default, the selection is set to pixels, but you could also size by other units. I'll leave this set to pixels for now. We can set the size to 100 pixels so the text is easier to see.

[08:06] Below the size property, we are able to adjust the text spacing with a pixel amount. So we could do something like space out the text letters by 10 pixels and the words by 30 pixels. We could set the entire length of our text with the text length property. Let's set our phrase to go across 2000 pixels. Finally, the length adjust property determines how the text stretches to its length. This can be set to adjust by the spaces in between our characters with the spacing option, or we can adjust by both spaces and characters with the spacing and glyphs option. There's one unique command for placing text elements on paths. In order to use this command, you first need to multi-select a path element and a text element. With the element selected, you'll see the command become available, and when we click on it, our text will be placed on top of the path. We can remove the text from the path using the remove text from path button. Now that we've covered all the tools used for element creation, let's go over the universal properties available to all the elements.

[09:06] I'll delete all the elements on my screen and I'll draw two circles on my view box. The properties we have available to all elements are the opacity, fill, and stroke shown in our design tab. Let's use the fill color to update our selected circles fill. Let's give this circle a green fill. We'll move our color slider to a green color and choose a shade from the box above. You can also use the fill property to set a gradient on the elements fill. Towards the top of our fill menu we can set the type of fill. Currently our circle is set to a solid fill. We also have the option to have no fill at all by clicking on none. The last two options here apply a gradient to the fill, so we can set the circle to have a linear gradient. You can see how the gradient flows in a linear direction on our circle element. With the linear gradient set, we have two available stops on our color range. We can change the color of the selected stop. For example, we can change the first stops color to blue and the second stops color to orange.

[10:07] We can change the position of the stops on our range by dragging them. If we click on our range in an empty space, we'll add a color stop. Finally, we can use the opacity slider at the bottom to change the stops transparency. The other gradient we can set is a radial gradient. When you click on this setting, we'll see the color stops emanating from the circles center. Let's close out of our fill menu and take a look at the opacity property. We can change this property's value with the available slider or by typing in the value directly. You can see that our default value is set to one, which is the maximum value you can have in this property. As we drag the slider to the left, you'll see the circle element become more transparent, the lower our value goes. Since our transparent circle is on the top layer, we could drag it over other elements and still be able to see the elements behind it. Let's move on to the final property, which is stroke. I'll go ahead and create a pencil path element. The stroke property relates to the outline of our element and we have three configurable options in our design panel.

[11:06] We have a color property that uses the same menu we saw before, so let's update our stroke color to a red color. Let's close out of the menu and change the weight of our stroke. By default, our units are set to pixels, so if we type in a value of 20, the weight or depth of our stroke will be set to 20 pixels. There are also more advanced stroke options available when you click on this configure stroke button. We have three available dropdown options that allow us to change the look of our start point, end point and vertices. So for our path element, we could set its start point to a circle, its vertices to arrows and its endpoint as a square. We also have the option to increase the scale or adjust the rotation for these points. So we could increase the size of our start point and adjust our vertices by 45 degrees. I'll go ahead and set these properties back to none. Our dash array property lets us define the spacing in between our dashes, so we could type in a value of 50 to space our dashes, 50 pixels. We can define the starting point of the dash array by providing a value to the dash offset.

[12:12] The join properties help control the appearance of an element's corners. If I close the path property, we can then adjust its mitre join limit, reducing the sharpness of its corners. Finally, the cap style determines what the dashes will look like, so we could represent dashes as rounded or as squared. That concludes all of the element creation tools and the modifiable properties from within the drawing editor. Once you are satisfied with the look of your SVG, or if you just wanna see how this is represented on the component, you would then click on the apply button located in the bottom right corner. While the editor provides many tools for creating SVGs, the components perspective properties, let us further refine them. We'll go back to the ignition designer and review the component. When we select the drawing, we'll see this element array under our props and it lists all of the elements making up our SVG.

[13:05] Expanding any one of the elements, like element zero exposes its properties, allowing us to change those values, add new properties, or bind them directly from here. Looking at element zero's properties, we can tell it's a perspective arc element, which is an element that we created with our circle tool. We can see this element represented in our component as this partial circle we see on the right hand side. The reason we only see a portion of the circle is because the dimensions of our components view box are set to this 300 by 300 pixel area of the much larger view box we saw within the drawing editor. Rather than going back into the editor to move this circle all the way into our components view box, let's update some of its dimension and position properties. Any element that has a type of perspective like we see with element zero includes this special path object that contains the properties we're looking for. Let's make the circle a bit smaller by updating both the height and width properties to 75.

[14:05] Next, we can reposition the circle to the upper left corner of the view box by updating both the X and Y coordinates to a value of 10. Of course, we can also manipulate any of these available properties to change the look of the circle. I'll go ahead and paste in a value to the circle's fill property, updating its color to a bright orange. Like I mentioned before, we can also add additional properties to this element. We can do this by clicking on the add object member button next to element zero. If we hover over properties, we get all of the ones we have available to us. Let's choose the transform property, which we can use to apply various geometric transformations to the element. Next, we can provide the transform the rotate function, which will rotate our element at a specified angle around an XY coordinate. Let's pass in the values 90, 150, 150 again to rotate the circle exactly 90 degrees around the midpoint of our view box.

[15:05] You can see this places the circle in the upper right corner. Now, if the property or SVG attribute that you're looking for isn't included, you can make use of a user-defined value to add those in. So again, we'll click on the add object member button and choose a value this time for the key. Let's type in transform origin, which is an SVG attribute that defines the default origin point for the transform. Next, we'll remove the coordinates we provided the rotate function since that will be handled by the transform origin for the value. Let's give it the center point of our view box by typing in 150 space, 150. Now, if we update the value of the angle we pass into the rotate function, we'll see the circle continue to rotate around the view boxes center point without needing to pass in those coordinates to the rotate function. One last thing I'll mention while we're here is that we can also add new elements to our SVG by clicking on the add array elements button next to our elements array.

[16:06] We can then set the type of element by clicking on this dropdown menu or by typing in the value directly.