Grouping and Referencing SVG

SVG not only includes elements for 0:00 a drawing graphics like circles paths and polygons, 0:02 it also provides useful elements for organizing a structure in your SVG files. 0:05 In this video you'll learn tips on how to utilize the <g> <defs> <symbol> and 0:09 <use> elements to group, reference and reuse parts of the SVGs. 0:14 Knowing how to use these elements correctly will keep the code in your 0:19 SVGs cleaner and easier to read and maintain. 0:22 First up the g or group element, serves as a grouping container in your SVG file. 0:26 It groups together sets of related elements like the div tag in HTML. 0:32 For example the SVG in this file draws a circular badge with a star in the center. 0:37 And notice how the paths and 0:44 circle elements that draw just the star are grouped together with a g tag. 0:46 Grouping elements together this way really comes in handy 0:51 when you want to animate two or more SVG elements as one group. 0:54 For instance the group and this as SVG has a class of star. 0:59 So any transformation or 1:04 animation applied to this g element affects the entire group. 1:05 Over in the browser notice the rotation and 1:10 scaling applied to just the center star group. 1:13 You can also think of an SVG group as a layer in 1:18 In a graphics editor like Illustrator. 1:21 So when you want to logically group shapes together, you'll often put them on 1:23 the same layer or select and group them using Illustrators grouping feature. 1:27 Many vector tools will even export grouped objects to SVG using g tags. 1:32 In the project files for this video, there's an SVG file named heart.svg 1:37 which contains an SVG that draws a simple heart, with two paths. 1:43 So let's select and copy this SVG and paste it inside 1:48 the body of index.html, right below the heart graphic comment. 1:53 I'll give my file a save and currently the SVG paths have no fill color so 2:01 they display a black fill by default. 2:07 But what's great about the g element is that when you apply a style to it, 2:10 that style is inherited by all the child elements in the group. 2:14 For example, I'll wrap the two paths with a set of opening and closing g tags. 2:19 And I'll give the g tag the class heart. 2:33 Over in the project's CSS, I can target heart and apply a red fill color. 2:40 And now back in the browser, 2:53 you can see that both paths take on the red fill color. 2:55 Cool. But what 2:58 if you want to display more of these heart icons with different colors and sizes? 3:01 Well, instead of copying and pasting this SVG and 3:06 changing the styles for each, you can turn this heart graphic into a sort of template 3:11 you can reuse anywhere on the page. 3:16 And the way you do that is with defs or symbol. 3:18 So the defs element, stores content and 3:23 defines element that you want to reuse later. 3:26 You see elements inside a defs tag do not get rendered by the browser until you 3:30 reference them in your document. 3:34 For instance, let's go back to our SVG, and wrap our heart group with defs tag. 3:37 Over in the browser once we refresh, 3:56 notice how the heart graphic no longer displays. 3:58 So now to display the graphic we need to reference it with the use element. 4:01 So right below the defs tag, I'll add a quick comment that says, 4:07 hey this is where we're using this, and then I'll include a self-closing use tag. 4:11 Now the use element duplicates SVG elements and displays them somewhere else. 4:18 You can duplicate and reuse a single element or 4:24 a group of elements inside g or defs tags. 4:28 And the way you reference the element you want to display 4:32 is with the xlink hfef attribute. 4:35 So first I'll give the g tag an ID of heart. 4:37 And then a reference that ID in the use tag with the attribute xlink:hfef= and 4:46 inside the quotes I'll specify #heart. 4:57 So the use element looks for the piece of the SVG with an ID of heart and clones it. 5:03 Once we give our file a save and refresh the browser. 5:12 Cool we see the heart graphic in the browser and notice how the fill color 5:18 defined in the CSS cascades into the contents of the use element. 5:22 But now we can also set the fill via the use tag. 5:30 So for example, I'll go back to my style sheet. 5:33 In fact, I'll get rid of this heart rule altogether. 5:36 Then go over to the use tag and say fill = #c44. 5:39 Our heart icon is still red but 5:45 now the fill is being defined here in the use tag. 5:48 Now the use element excepts other SVG attributes like xy coordinates height and 5:56 width even transform attributes. 6:01 So for instance I can scale down its size with a transform attribute. 6:03 And I'll set the scale to point four. 6:10 So now the icon's a little smaller. 6:18 Now to reuse the heart graphic, I'll duplicate it by copying and 6:20 pasting an use element, right below it. 6:26 And this time, I'll make the fill color green with the value #41af5d, 6:30 and I'll set the scale to 0.3. 6:38 I'll even add a translation of 160. 6:41 And there you have it, a reusable template for icons, cool. 6:53 So up next I'll teach you another handy way to group and 6:57 define reusable elements with symbols. 7:00