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
Learn tips on how to utilize the <g>, <defs> and <use> elements to group, reference and reuse parts of your SVG.
SVG not only includes elements for
0:00
a drawing graphics like circles paths and
polygons,
0:02
it also provides useful elements for
organizing a structure in your SVG files.
0:05
In this video you'll learn tips on how
to utilize the <g> <defs> <symbol> and
0:09
<use> elements to group, reference and
reuse parts of the SVGs.
0:14
Knowing how to use these elements
correctly will keep the code in your
0:19
SVGs cleaner and
easier to read and maintain.
0:22
First up the g or group element, serves
as a grouping container in your SVG file.
0:26
It groups together sets of related
elements like the div tag in HTML.
0:32
For example the SVG in this file draws a
circular badge with a star in the center.
0:37
And notice how the paths and
0:44
circle elements that draw just the star
are grouped together with a g tag.
0:46
Grouping elements together
this way really comes in handy
0:51
when you want to animate two or
more SVG elements as one group.
0:54
For instance the group and
this as SVG has a class of star.
0:59
So any transformation or
1:04
animation applied to this g
element affects the entire group.
1:05
Over in the browser
notice the rotation and
1:10
scaling applied to just
the center star group.
1:13
You can also think of
an SVG group as a layer in
1:18
In a graphics editor like Illustrator.
1:21
So when you want to logically group
shapes together, you'll often put them on
1:23
the same layer or select and group them
using Illustrators grouping feature.
1:27
Many vector tools will even export
grouped objects to SVG using g tags.
1:32
In the project files for this video,
there's an SVG file named heart.svg
1:37
which contains an SVG that draws
a simple heart, with two paths.
1:43
So let's select and
copy this SVG and paste it inside
1:48
the body of index.html,
right below the heart graphic comment.
1:53
I'll give my file a save and currently
the SVG paths have no fill color so
2:01
they display a black fill by default.
2:07
But what's great about the g element
is that when you apply a style to it,
2:10
that style is inherited by all
the child elements in the group.
2:14
For example, I'll wrap the two paths with
a set of opening and closing g tags.
2:19
And I'll give the g tag the class heart.
2:33
Over in the project's CSS, I can target
heart and apply a red fill color.
2:40
And now back in the browser,
2:53
you can see that both paths
take on the red fill color.
2:55
Cool.
But what
2:58
if you want to display more of these heart
icons with different colors and sizes?
3:01
Well, instead of copying and
pasting this SVG and
3:06
changing the styles for each, you can turn
this heart graphic into a sort of template
3:11
you can reuse anywhere on the page.
3:16
And the way you do that is with defs or
symbol.
3:18
So the defs element, stores content and
3:23
defines element that you
want to reuse later.
3:26
You see elements inside a defs tag do not
get rendered by the browser until you
3:30
reference them in your document.
3:34
For instance, let's go back to our SVG,
and wrap our heart group with defs tag.
3:37
Over in the browser once we refresh,
3:56
notice how the heart
graphic no longer displays.
3:58
So now to display the graphic we need
to reference it with the use element.
4:01
So right below the defs tag,
I'll add a quick comment that says,
4:07
hey this is where we're using this, and
then I'll include a self-closing use tag.
4:11
Now the use element duplicates SVG
elements and displays them somewhere else.
4:18
You can duplicate and
reuse a single element or
4:24
a group of elements inside g or defs tags.
4:28
And the way you reference
the element you want to display
4:32
is with the xlink hfef attribute.
4:35
So first I'll give the g
tag an ID of heart.
4:37
And then a reference that ID in the use
tag with the attribute xlink:hfef= and
4:46
inside the quotes I'll specify #heart.
4:57
So the use element looks for the piece of
the SVG with an ID of heart and clones it.
5:03
Once we give our file a save and
refresh the browser.
5:12
Cool we see the heart graphic in
the browser and notice how the fill color
5:18
defined in the CSS cascades into
the contents of the use element.
5:22
But now we can also set
the fill via the use tag.
5:30
So for example,
I'll go back to my style sheet.
5:33
In fact, I'll get rid of
this heart rule altogether.
5:36
Then go over to the use tag and
say fill = #c44.
5:39
Our heart icon is still red but
5:45
now the fill is being
defined here in the use tag.
5:48
Now the use element excepts other SVG
attributes like xy coordinates height and
5:56
width even transform attributes.
6:01
So for instance I can scale down its
size with a transform attribute.
6:03
And I'll set the scale to point four.
6:10
So now the icon's a little smaller.
6:18
Now to reuse the heart graphic,
I'll duplicate it by copying and
6:20
pasting an use element, right below it.
6:26
And this time, I'll make the fill
color green with the value #41af5d,
6:30
and I'll set the scale to 0.3.
6:38
I'll even add a translation of 160.
6:41
And there you have it,
a reusable template for icons, cool.
6:53
So up next I'll teach you
another handy way to group and
6:57
define reusable elements with symbols.
7:00
You need to sign up for Treehouse in order to download course files.
Sign up