[00:00] As you're designing within the drawing editor, you'll probably make use of many elements in order to create SVGs. In this lesson, we'll discuss the many different layering and alignment tools that can help us better manage the placement of our elements as our SVGs grow in complexity. To do this, we'll draw a stoplight and discuss each of these features as we build the drawing. Let's begin by creating the frame. With the rectangle tool, we'll draw a vertical rectangle to contain our lights. Let's also make it a little more rounded by using the handle that controls the corner radius. With the frame in place let's next create a light using the circle tool. With the tool selected, we'll hold the control key to draw a perfect circle off to the side of our rectangle. Anytime a new element gets created, it gets placed on the top layer of our drawing. This means that our newly created circle will always stay on top of the rectangle no matter where we decide to position it.

[01:08] We'll need at least three circles to finish our stoplight, so let's duplicate the original circle three more times using any one of the duplicate buttons. It's not easy to tell looking at our window that three more circles were created however, if we review the elements section, we can see that four perspective arc elements exist. We have the original circle that we drew with the tool and the three duplicates. Since they are in the same position, all of them are stacked on top of each other. Let's use this as an opportunity to discuss the different layering tools we have available. Before we do that, let's update both the names and the fill colors for each of the circles in our stoplight. This way we can easily tell what each element represents from both within the drawing editor and the property editor in our designer. You can rename an element by double clicking on its name within the element section.

[02:03] Let's go ahead and rename perspective arc zero to red, and we'll give it a red fill color as well. We'll do the same thing for perspective arc one and two, giving them the names and colors of yellow, and then green. We can obviously see that the green circle is sitting on the top layer and it is selected as represented by the highlight in our elements section. The elements section also gives us the layer order of the elements. So if you read this list from the bottom up, we again see that the green circle is sitting on top, and then we have yellow sitting on the layer below it and so on. Now that we know where each element sits, we can use one of four different layering actions to rearrange them. These can be found both within the command bar and next to our elements section. You can also right click on the selected element to display a popup menu with these same actions.

[03:04] The options we have available are send to back, move backwards, move forward, and bring to front both the send to back and bring to front options will send the element either to the very back layer with send to back or the very front layer with bring to front. So if we wanted to display our red circle on the top layer, then we could select it from our element section and choose the bring to front option. If we wanted to set our yellow circle all the way to our back layer where it would sit even behind a rectangle, then we would select it and choose send to back. If we drag the yellow circle around, we'll see how it always remains behind all elements no matter where we position it. Now the bring forward and send backward options works similarly, however, the selected element will only be sent either forward or backward, just one layer. So we could send our red circle back one layer with send backward, and we could place it on the top layer again, with bring forward. You can also rearrange the layers of the elements directly by dragging them around within the elements section.

[04:12] Having all of our elements stacked on top of each other like this and spread out across the view box isn't going to help us, when it comes to drawing our stoplight. We could drag all of our elements into position individually with our selection tool, however, this would take significantly more time and look less structured than if we were to use some of our alignment tools. The alignment tools I'm referring to are located towards the top of the design tab, and they become available when you have more than one element selected. Depending on which element is selected first may determine how they will be aligned. For example, let's multi-select the red, yellow, and green circles in that order. We can see our alignment tools are now active, and I'd like to show off the align as row and align as stack options first. Starting from the first element we selected the row or stack, will be built off of it, so if we choose to align as a row, we'll get a popup menu allowing us to specify the padding between our elements.

[05:13] Let's leave this set to 10 and click on okay. You can see that a row was built from left to right in the order red, yellow, green. For the purposes of our drawing, however, we'll want these in a vertical orientation, and that's where we can make use of the stack option. So we'll choose to align the circles as a stack with the default padding of 10. You may have noticed when choosing either the align as row or align as stack options, there is an additional option for each to perform the align action and normalize. This will attempt to keep the selected elements the same size, so we could do something like including our rectangle in the multi-select and choose to align a stack and normalize. After clicking on this option and setting the padding, we'll see the rectangle get added to the bottom of the stack, and we'll also notice that it has been resized to the same size as the circles.

[06:08] The rectangle was reshaped and moved to the stack because we had selected the group of lights or circles first. If we had selected the rectangle first, then the group of circles would've all been changed to the same size of the rectangle and be placed below it in the stack. I'll go ahead and undo this change for now and make sure only my red, yellow and green circles are selected. Now that our circles are in place, let's go ahead and group these together as well. We'll click on the group button in our command bar and let's give this new group a name of lights. With this group in place, I'd like to show off how the rest of the alignment tools work. To do this, let's first select the lights group as a whole and move it off to the right, and then multi-select our gray circle. We'll just run through each of these in order here. So align left makes it so all our selected elements align with the furthest left selected element and similarly align right shifts all our selected elements to the furthest right selected element.

[07:11] Align Top sets all our selected elements to the highest selected element. You can see how our group of lights shifted slightly to be at the same level of the gray circle and align bottom sets all our selected elements to the lowest selected element. The align center horizontally and the align vertical options will align an element at the same vertical or horizontal position of whatever element we selected first. Using these two options in combination can help you center different elements together. Let's take what we have learned so far to complete our stoplight. I'd like to also set this up so that we have a filter covering our lights. That way when the light is in theory turned off, the colors are faded, but still present as you would see in a real stoplight. First, we'll add the color lights to our original frame.

[08:03] Make sure to size the frame so that it is big enough to hold all of the lights. Next, we'll multi-select our lights group. We'll then use both the Align Center horizontally and the Align vertical buttons to center our lights on the frame. Let's go ahead and build out our filter next. First we'll select the original gray circle. Next, let's create two duplicate copies of the circle. We'll give each one a unique name corresponding to the color of light they are filtering, so for this first one, let's name it red filter. The next one, we'll do yellow and so on. We'll need the filters sitting on the layer directly above our lights group, so let's spread these filters out using the align as stack option. Again, we'll leave this set with a padding of 10, and it should be exactly the same size as our lights. Let's go ahead and group these together as well using the button in our command bar and let's name this group filters. We can layer these on top of the lights group by using the same alignment options we did with the frame.

[09:09] So we'll first select our lights group and then our filters group, and again, we'll select the alignment options for align center horizontally and then align vertical. Make sure the filter group is sitting on the top layer and you should see a completely grayed out stoplight. Finally, let's adjust each of our filter circles so that their opacity value is set to 0.7. As we do this, you'll see each of our lights colors coming through, but they are much more faded than we originally saw them. That is again, because we have a faded gray circle sitting above them. You could of course alter the opacity of the light circles directly to fade them, however, I found that using a gray color layer on top provides more of that glassy look you would find with a real stoplight. To wrap up our drawing, let's head over to the settings tab and click on the resize view box to content button. This will shape the view box down to the size of our elements.

[10:04] Finally, let's click on apply. Our stoplight id looking pretty good. We can access all of its elements and find those filter and light groups we set within the property editor. From here, you could access the opacity of our filters and be able to bind them to a certain value or include them in a script. Say if you wanted to have the stoplight set to stop where our red light is showing, then you could set the red filters opacity to zero. Hopefully this lesson provided some more understanding of better design practices to implement as you're creating SVGs within the drawing editor.