SVG Groups Video Lecture Transcript
This transcript was automatically generated by Zoom, so there may be discrepancies between the video and the text.

17:01:01 Hi! Everybody! Welcome back in this video. We're going to continue learning about Svg by talking about Svg groups.
17:01:09 So an Sbg group is a G element. This allows you to group other Svg elements into a single group.
17:01:18 So it's slightly different than in a class or an Id.
17:01:23 This isn't a distinct element that within it is going to contain other spg elements.
17:01:30 So you might have a group of circles, a group of rectangles, etc.
17:01:35 The thing that's a nice about this is all the attributes set within a single group element are inherited by all the elements within the group. Hey?
17:01:43 And you might be thinking, Well, that's how exactly how a class works as well.
17:01:48 If I were to set the style elements of a class, it would work for all of the elements with that class.
17:01:54 But this allows you to set Svg. Attributes for a single collection of Svg.
17:02:03 Elements where, as a Client doesn't necessarily allow that it's also I'm going to end up being incredibly useful when we create graphics with D 3 js, because when you add a group, you're choosing the order in which subsequent elements, are added and we'll talk about
17:02:18 that more when we dive into D 3 dot. Js, so let's go ahead and see our example. And Svg groups.
17:02:28 And open this with visual studio.
17:02:32 So here in Svg groups I have an Svg.
17:02:38 And then I have a G. Where I have a. The following attributes set, my stroke is going to be darker green, so the outline will be dark green, the width will be 2.
17:02:51 And then I will have a dash array of 10 comma.
17:02:54 5, and the fill of the shapes will be white.
17:02:57 Now, both of, though I add a circle and a rectangle, and notice that both of those are going to automatically inherit all of these group settings.
17:03:09 So let's go ahead and open that up in our browser.
17:03:13 So we can see here that both the circle and the rectangle have a dark green outline.
17:03:21 And a white interior, and that outline has a dash pattern.
17:03:27 Okay. And then once we can zoom in, you can see that it's dark green on the circle as well what's nice about this is by putting it within the group.
17:03:37 These elements inherent. All of these settings that I only have to call once, and both of them would be technically drawn in the same order.
17:03:46 So, for instance, that circle in the rectangle would set on the same sort of order, whereas if I were to then go and add another rectangle so let's say x equals 4 10.
17:04:00 Y equals 50, and then.
17:04:08 Height equals 50. So let's let actually let her.
17:04:13 Why I want it to be 2 tenth, and then width equals 40.
17:04:23 We see that this rectangle is on top, but if I draw the G afterwards.
17:04:37 Now it's on on the bottom, so that might have seemed weird like, why did I take the time to go through all that?
17:04:45 Hopefully. It will become clear when we talk more about this kind of thing with D.
17:04:49 3 js. But in Svg things are added to the actual Svg element as they're added in the code.
17:04:57 So G is allow you to take things that are maybe added in a different order in the code.
17:05:03 As long as they're all within the same. G, they'll be drawn at the same level on, so that's it for Svg groups.
17:05:11 We've now been introduced to those, it will take a few more lectures before we come back to them, but we will come back to them and see how they're useful in D.