"Building Websites with PHP" was retired on April 10, 2020. You are now viewing the recommended replacement.
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
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