The symbol element is similar to the defs and

g elements we used in the previous video.

A symbol or groups elements together like the g tag and you can use it to define

a reasonable template you can reference somewhere else, like the defs tag.

You use a symbol element for graphics that you want to use multiple times in the same

document like icons, for example.

In this video, we'll store our heart icon inside a symbol then reference

it not only within the svg, but also anywhere in the HTML document.

So back inside index.html, I'll remove the def tags in my svg and

replace the opening and closing g tags with symbol tags.

I'll also remove the class="heart "attribute from the opening symbol tag.

I'll give my file a save and back in the browser.

When we're refreshed nothing has changed.

We still see the red and green heart graphics created by the two use elements.

However, the symbol element has a significant advantage over the g and

defs elements.

You see symbol accept a viewBox attribute, so

I can cut the viewBox attribute out of the opening svg the tag and

paste it inside the opening symboltag.

So now, the symbol can scale in fit nicely inside wherever it is being copied and

rendered.

Now, you can copy or

instantiate a symbol via the use element anywhere in your HTML document.

So inside the main div here,

I'll add a set of svg tags right below the red comment.

And let's set the height and width of this svg to 150.

Then I'll select and cut the first use element out of the main svg and

paste it inside the new svg and you can also remove

the transform attribute from this use element.

Next, I'll create one more for the green heart.

So I'll just go ahead and copy the svg we just wrote,

paste it right below the green comment.

And this time, I'll set the width and height to 130 and

I'll select and cut the use element up top and

paste it inside the new green svg.

Let's also remove the transform attribute.

So now we have two separate instances of the heart symbol and

notice how the size and scale of the graphics adjust to the width, and

height dimensions defined in the SVG.

The viewBox on symbol is defining the area in which the hearts are being drawn and

I'll even create another copy the heard icon.

I'll make this one blue.

So select and copy the green one, paste it below the blue comment and

let's make this one a little smaller.

I'll set it to 110 by 110 and

I'll change the fill attribute to "#2e97af".

It's important to keep in mind that like defs,

the symbol element isn't rendered in the browser until you reference it with use,

but the browser still renders the SVG element containing the symbol.

So the big gap you see above the three icons is the SVG element itself,

which by default, the browser sets to 300 by 150 pixels.

So to hide it, it's recommended that you set a display none on the svg element.

So in the svg tag, I'll add a style attribute.

And right inside, we'll say, "display:none;".

And now, the SVG is no longer visible.

So now you may be thinking, is it possible to target and

style these instances with CSS?

Sure, it's possible.

I'll show you how.

First, let's give each use element a class.

So, we'll give the top one a class attribute and set it to "heart-red".

I'll go ahead and copy, and paste the rest.

So, the second one will be "heart-green" and the third "heart-blue".

And now, we can also remove each fill attribute in the used tags

Next in style.css, let's write fill styles for the three classes.

So first, we'll target .heart-red and

we'll set the fill to #C44.

Right below, let's target .heart-green, And

set the fill to #41af5d.

And finally, we'll target .heart-blue and

set the field to #2e97af.

Once you give your files a save over in the browser,

we still have our three colorful icons.

So as you know, our symbol is made up of two path elements.

So, what if we want to give our icons

a little more depth using two fill colors like this?

As you can see, one path has a light fill and the other a darker fill.

So, how can we target the individual shapes and paths in a symbol with CSS?

Well, here's where things get really interesting.

When we copied and reused the symbol content with the use element,

that content was cloned into what's called the Shadow DOM.

The Shadow DOM is similar to the regular DOM,

except that it's a sub tree of DOM nodes which you can't target and

apply styles to as you would with normal DOM nodes.

You can learn more about the Shadow DOM in the teacher's notes of this video.

That being said,

we can't target each element in the symbol directly from our style sheet.

For example, a selector like this would have no effect on the path.

So, how do we apply two fill colors to an icon?

Well, there is a clever technique we can use that takes advantage of CSS

inheritance in the cascade.

It's one of my favorite CSS tips.

So over in the style sheet,

we'll define a lighter shade of each color using the color property.

So first in the .heart-red rule,

we'll add a color property and

set it to #d35f5f.

And in the .heart-green color,

we'll set the value to #5ece7f.

And finally, in the heart blue,

we'll set the color value to #38acd0.

In CSS, there is a little known keyword value for

color properties called current color.

What's special about current color is that it copies or

inherits the color value given to an element or a parent element.

CSS properties for borders, back shadows and backgrounds, except the color value.

So when you target an element with CSS, you can use the value current color

in any of those properties to copy the color value set for that element or

to parent and the same applies to SVG stroke and fill properties.

So, back in our symbol element.

If we give the second path, a fill attribute and

set the value to current color.

Each instance of the symbol inherits the color value we defined in the CSS for it.

So as a result, we now have different colored paths in each graphic.

Excellent.

Be sure to check the teacher's notes for resources on how to reference and

display symbols located in external SVG files.