Reusing Graphics with <symbol>

The symbol element is similar to the defs and 0:00 g elements we used in the previous video. 0:03 A symbol or groups elements together like the g tag and you can use it to define 0:06 a reasonable template you can reference somewhere else, like the defs tag. 0:10 You use a symbol element for graphics that you want to use multiple times in the same 0:14 document like icons, for example. 0:18 In this video, we'll store our heart icon inside a symbol then reference 0:21 it not only within the svg, but also anywhere in the HTML document. 0:26 So back inside index.html, I'll remove the def tags in my svg and 0:30 replace the opening and closing g tags with symbol tags. 0:36 I'll also remove the class="heart "attribute from the opening symbol tag. 0:48 I'll give my file a save and back in the browser. 0:55 When we're refreshed nothing has changed. 0:59 We still see the red and green heart graphics created by the two use elements. 1:02 However, the symbol element has a significant advantage over the g and 1:08 defs elements. 1:12 You see symbol accept a viewBox attribute, so 1:14 I can cut the viewBox attribute out of the opening svg the tag and 1:18 paste it inside the opening symboltag. 1:25 So now, the symbol can scale in fit nicely inside wherever it is being copied and 1:29 rendered. 1:34 Now, you can copy or 1:34 instantiate a symbol via the use element anywhere in your HTML document. 1:36 So inside the main div here, 1:42 I'll add a set of svg tags right below the red comment. 1:44 And let's set the height and width of this svg to 150. 1:56 Then I'll select and cut the first use element out of the main svg and 2:08 paste it inside the new svg and you can also remove 2:14 the transform attribute from this use element. 2:18 Next, I'll create one more for the green heart. 2:27 So I'll just go ahead and copy the svg we just wrote, 2:29 paste it right below the green comment. 2:33 And this time, I'll set the width and height to 130 and 2:36 I'll select and cut the use element up top and 2:43 paste it inside the new green svg. 2:48 Let's also remove the transform attribute. 2:56 So now we have two separate instances of the heart symbol and 2:59 notice how the size and scale of the graphics adjust to the width, and 3:03 height dimensions defined in the SVG. 3:08 The viewBox on symbol is defining the area in which the hearts are being drawn and 3:14 I'll even create another copy the heard icon. 3:20 I'll make this one blue. 3:24 So select and copy the green one, paste it below the blue comment and 3:26 let's make this one a little smaller. 3:31 I'll set it to 110 by 110 and 3:33 I'll change the fill attribute to "#2e97af". 3:37 It's important to keep in mind that like defs, 3:49 the symbol element isn't rendered in the browser until you reference it with use, 3:53 but the browser still renders the SVG element containing the symbol. 3:58 So the big gap you see above the three icons is the SVG element itself, 4:03 which by default, the browser sets to 300 by 150 pixels. 4:07 So to hide it, it's recommended that you set a display none on the svg element. 4:12 So in the svg tag, I'll add a style attribute. 4:20 And right inside, we'll say, "display:none;". 4:23 And now, the SVG is no longer visible. 4:33 So now you may be thinking, is it possible to target and 4:36 style these instances with CSS? 4:40 Sure, it's possible. 4:42 I'll show you how. 4:43 First, let's give each use element a class. 4:44 So, we'll give the top one a class attribute and set it to "heart-red". 4:48 I'll go ahead and copy, and paste the rest. 4:55 So, the second one will be "heart-green" and the third "heart-blue". 4:59 And now, we can also remove each fill attribute in the used tags 5:10 Next in style.css, let's write fill styles for the three classes. 5:21 So first, we'll target .heart-red and 5:26 we'll set the fill to #C44. 5:33 Right below, let's target .heart-green, And 5:38 set the fill to #41af5d. 5:44 And finally, we'll target .heart-blue and 5:53 set the field to #2e97af. 6:00 Once you give your files a save over in the browser, 6:04 we still have our three colorful icons. 6:08 So as you know, our symbol is made up of two path elements. 6:11 So, what if we want to give our icons 6:16 a little more depth using two fill colors like this? 6:19 As you can see, one path has a light fill and the other a darker fill. 6:23 So, how can we target the individual shapes and paths in a symbol with CSS? 6:28 Well, here's where things get really interesting. 6:34 When we copied and reused the symbol content with the use element, 6:37 that content was cloned into what's called the Shadow DOM. 6:42 The Shadow DOM is similar to the regular DOM, 6:47 except that it's a sub tree of DOM nodes which you can't target and 6:50 apply styles to as you would with normal DOM nodes. 6:54 You can learn more about the Shadow DOM in the teacher's notes of this video. 6:57 That being said, 7:01 we can't target each element in the symbol directly from our style sheet. 7:02 For example, a selector like this would have no effect on the path. 7:07 So, how do we apply two fill colors to an icon? 7:18 Well, there is a clever technique we can use that takes advantage of CSS 7:22 inheritance in the cascade. 7:26 It's one of my favorite CSS tips. 7:28 So over in the style sheet, 7:31 we'll define a lighter shade of each color using the color property. 7:33 So first in the .heart-red rule, 7:38 we'll add a color property and 7:43 set it to #d35f5f. 7:48 And in the .heart-green color, 7:52 we'll set the value to #5ece7f. 7:57 And finally, in the heart blue, 8:02 we'll set the color value to #38acd0. 8:07 In CSS, there is a little known keyword value for 8:12 color properties called current color. 8:15 What's special about current color is that it copies or 8:18 inherits the color value given to an element or a parent element. 8:22 CSS properties for borders, back shadows and backgrounds, except the color value. 8:26 So when you target an element with CSS, you can use the value current color 8:31 in any of those properties to copy the color value set for that element or 8:36 to parent and the same applies to SVG stroke and fill properties. 8:41 So, back in our symbol element. 8:47 If we give the second path, a fill attribute and 8:49 set the value to current color. 8:54 Each instance of the symbol inherits the color value we defined in the CSS for it. 8:59 So as a result, we now have different colored paths in each graphic. 9:06 Excellent. 9:11 Be sure to check the teacher's notes for resources on how to reference and 9:13 display symbols located in external SVG files. 9:16