This workshop will be retired on June 15, 2021.
Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
The <symbol> element is similar to <defs> and <g>. You use <symbol> for graphics that you want to use multiple times in the same document.
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
You need to sign up for Treehouse in order to download course files.
Sign up