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
Learn tips on how to utilize the <g>, <defs>, and <use> elements to group, reference, and reuse parts of your SVG.
Resources
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
Along with elements for drawing graphics
like circles, paths and polygons.
0:00
SVG also provides useful elements for
organizing and structuring your SVG files.
0:04
In this video, you'll learn tips
on how to leverage the g, defs and
0:10
use elements to group reference and
reuse parts of your SVG.
0:15
Using these elements correctly will keep
the code in your SVG easier to read and
0:20
maintain.
0:24
First, the g or group element acts as
a grouping container in your SVG file.
0:26
It groups together sets of related
elements like the div tag does in HTML.
0:32
For example, the SVG in this file draws a
circular badge with a star in the center.
0:37
Notice how the path and
0:43
circles that make up just the star
are wrapped inside of a g tag.
0:44
Grouping elements together this way
becomes helpful when you want to
0:49
animate two or
more SVG elements as one group.
0:53
For instance, the group in this SVG has
a class of star, any CSS transformation or
0:56
animation applied to this g
element affects the entire group.
1:02
In the browser, notice the rotation and
1:08
scaling applied to just
the center star group.
1:10
You can also think of an SVG group as
a layer in a graphics editor like sketch,
1:15
Figma or Adobe Illustrator.
1:19
When you want to logically group shapes
together, you'll often put them on
1:22
the same layer or select and group them
using illustrators grouping feature.
1:25
Many vector tools will even export
grouped objects to SVG using g tags.
1:30
In the project files for this video,
there's an SVG file named heart.svg,
1:36
which contains an svg that draws
a simple heart with two paths.
1:41
Let's copy this svg and
paste it inside of index.HTML.
1:46
Currently, the svg paths
have no fill color, so
1:57
they display a black
fill color by default.
2:00
What's great about the g element is
that when you apply a style to it,
2:04
that style is inherited by all
the child elements in the group.
2:07
For example, I'll wrap the path with
a set of opening and closing g tags and
2:12
give it a class heart.
2:16
In the project CSS I can target heart and
apply a red fill color
2:33
Both paths take on the red fill color.
2:45
But what if you want to display more of
these heart icons with different colors
2:49
and sizes?
2:52
Instead of copying and pasting this
svg and changing the styles for each.
2:55
You can turn this heart graphic into
a template you can reuse anywhere on
2:59
the page.
3:03
One way you can do that is with defs.
3:08
The defs element stores content and
3:11
defines elements that
you want to reuse later.
3:13
Elements inside a defs tag do not get
rendered to the browser until you
3:17
reference them in your document.
3:21
For instance,
let's wrap our heart group in defs tags.
3:25
Notice that the heart graphic no
longer displays in the browser.
3:47
To display the graphic we need to
reference it with the use element.
3:51
Our defs tag acts as a recipe or
set of instructions for making an svg.
3:57
The use element cooks or creates
an element based on our instructions.
4:02
You can duplicate and
reuse a single element or
4:07
group of elements inside g tags or
defs tags.
4:10
The way you reference the element you want
to display is with the href attribute.
4:14
First, I'll give the g tag an id of heart.
4:20
Then I'll reference
that id in the use tag.
4:26
I'll do this using the href attribute.
4:37
We see the heart graphic in the browser.
4:47
Notice how the fill color defined in the
CSS is passed into the contents of the use
4:49
element.
4:54
But now we can also set the fill
in line with the use element.
4:55
We'll first remove the heart
selector from the CSS.
5:02
And I'll give the use
element a fill of red inline.
5:11
And in the browser, nothing has changed.
5:19
The use element accepts other svg
attributes like xy coordinates,
5:22
height, width and
even transform attributes.
5:27
For instance,
I can scale down the heart size.
5:34
Now it's a little smaller.
5:49
To reuse the heart graphic, I'll duplicate
it by adding another use element.
5:52
Copy this here.
5:58
Make the fill color green.
6:04
Change the scale to 0.3 and
add a translate of 160.
6:06
And there you have it,
a reusable template for icons.
6:21
Up next,
I'll teach you another way to group and
6:25
define reusable elements with symbols.
6:28
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