Heads up! To view this whole video, sign in with your Courses 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.
Resources
Styling for symbols
.heart-red {
fill: #c44;
color: #d35f5f;
}
.heart-green {
fill: #41af5d;
color: #5ece7f;
}
.heart-blue {
fill: #2e97af;
color: #38acd0;
}
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
The symbol element is
similar to the defs and
0:00
g elements we used in the previous video.
0:03
A symbol element groups elements together,
like the g tag.
0:06
And you can use it to define a reusable
template you can reference somewhere else,
0:10
like the defs tag.
0:15
You use the symbol element for
graphics that you want to use multiple
0:16
times in the same document,
like icons for example.
0:21
With symbol, you can set the view
box when defining your graphic so
0:25
you don't have to repeat code
each time you use the symbol.
0:29
Symbols don't display
as you define them and
0:32
this can mean writing less
code than when using defs.
0:35
In this video, we'll store our
heart icon inside a symbol.
0:39
Then reference it not only within the svg,
but also anywhere else in the document.
0:42
Back inside index.html,
I'll remove the defs tags in my svg and
0:48
replace the opening and
closing g tags with symbol tags.
0:52
I'll also remove the heart class from
symbol since we won't need that.
1:08
In the browser nothing has changed.
1:14
We still see the red and green heart
graphics created by the two use elements.
1:17
However, the symbol element has
a significant advantage over the g and
1:22
defs elements.
1:27
Symbol accepts a view box attribute.
1:28
I can cut the view box from
the opening svg tag and
1:32
paste it in the symbol tag.
1:37
Now the symbol can scale and fit nicely
inside wherever it's being copied and
1:40
rendered.
1:45
You can copy or
1:46
instantiate a symbol with the use
element anywhere in your html document.
1:47
Inside the main div, under the red
comment, I'll add a new svg tag.
1:53
Let's set a height and
width of 150 pixels.
2:02
Now, we'll cut the first use
element out of the main svg and
2:15
paste it in the new svg.
2:20
You can also remove
the transform attribute.
2:22
I'll create one more for the Green heart.
2:36
Let's delete the other use.
2:50
Set the height and width to 130.
2:55
Now we have two separate
instances of the heart symbol.
3:02
Notice how the size and scale of
the graphics adjust to the width and
3:07
height dimensions defined in the svg.
3:11
I'll create another copy and
make this one blue.
3:13
Let's open up our dev tools.
3:32
It's important to keep
in mind that like defs,
3:34
the symbol element isn't rendered in the
browser until you reference it with use.
3:37
But the browser still renders the svg
element containing the symbol.
3:43
The big gap you see above the three
icons is the svg element itself.
3:49
Which by default,
the browser sets to 300 by 150 pixels.
3:53
To hide it, it's recommended that you
set a display of none on the svg element.
4:00
It's no longer visible.
4:16
Now you may be thinking,
is it still possible to target and
4:19
style these instances with external CSS?
4:23
Sure.
4:26
It's possible.
4:26
I'll show you how,
First let's give each use element a class.
4:27
We can also delete the fill attribute
from each of these elements.
4:57
Then in the css, let's write the fill
styles for the three classes.
5:07
We still have our three colorful icons.
5:43
As you know, our symbol is
made up of two path elements.
5:46
What if we want to give our icons a little
more depth using two fill colors?
5:51
How can we target the individual
shapes and paths in a symbol with css?
5:56
For example, a selector like this
would have no effect on the path.
6:02
So, how do we apply two
fill colors to an icon?
6:08
Well, there's a clever technique that
we can use that takes advantage of css
6:13
inheritance and the cascade.
6:18
It's one of my favorite CSS tips.
6:20
Over in the stylesheet,
we'll define a lighter shade for
6:23
each color using the color property.
6:26
In CSS,
there's a little known keyword value for
7:13
color properties called currentColor.
7:16
What's special about currentColor
is that it copies, or
7:18
inherits the color value given
to an element or parent element.
7:21
CSS properties for borders, box shadows
and backgrounds, accept the color value.
7:27
So when you target an element with CSS,
you can use the current color in any of
7:33
those properties to copy the color value
set for that element or its parent.
7:37
The same applies to svg,
stroke and field properties.
7:42
In the symbol, if we give the second path,
a fill attribute and
7:49
set that value to currentColor.
7:52
And refresh in the browser.
8:03
Each instance of a symbol inherits
the color value we define for it in CSS.
8:06
As a result, we now have different
color paths in each graphic.
8:12
Excellent.
8:16
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up