Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed SVG Workflow and Tools !
You have completed SVG Workflow and Tools !
Preview
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
A symbol element groups elements together,
like the g tag.
0:00
And you can use it to define a reusable
template you can reference somewhere else,
0:01
like the defs tag.
0:06
You use the symbol element for
graphics that you want to use multiple
0:07
times in the same document,
like icons for example.
0:12
With symbol, you can set the view
box when defining your graphic so
0:16
you don't have to repeat code
each time you use the symbol.
0:20
Symbols don't display
as you define them and
0:23
this can mean writing less
code than when using defs.
0:26
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