SVG not only includes elements for

a drawing graphics like circles paths and polygons,

it also provides useful elements for organizing a structure in your SVG files.

In this video you'll learn tips on how to utilize the and

elements to group, reference and reuse parts of the SVGs.

Knowing how to use these elements correctly will keep the code in your

SVGs cleaner and easier to read and maintain.

First up the g or group element, serves as a grouping container in your SVG file.

It groups together sets of related elements like the div tag in HTML.

For example the SVG in this file draws a circular badge with a star in the center.

And notice how the paths and

circle elements that draw just the star are grouped together with a g tag.

Grouping elements together this way really comes in handy

when you want to animate two or more SVG elements as one group.

For instance the group and this as SVG has a class of star.

So any transformation or

animation applied to this g element affects the entire group.

Over in the browser notice the rotation and

scaling applied to just the center star group.

You can also think of an SVG group as a layer in

In a graphics editor like Illustrator.

So when you want to logically group shapes together, you'll often put them on

the same layer or select and group them using Illustrators grouping feature.

Many vector tools will even export grouped objects to SVG using g tags.

In the project files for this video, there's an SVG file named heart.svg

which contains an SVG that draws a simple heart, with two paths.

So let's select and copy this SVG and paste it inside

the body of index.html, right below the heart graphic comment.

I'll give my file a save and currently the SVG paths have no fill color so

they display a black fill by default.

But what's great about the g element is that when you apply a style to it,

that style is inherited by all the child elements in the group.

For example, I'll wrap the two paths with a set of opening and closing g tags.

And I'll give the g tag the class heart.

Over in the project's CSS, I can target heart and apply a red fill color.

And now back in the browser,

you can see that both paths take on the red fill color.

Cool. But what

if you want to display more of these heart icons with different colors and sizes?

Well, instead of copying and pasting this SVG and

changing the styles for each, you can turn this heart graphic into a sort of template

you can reuse anywhere on the page.

And the way you do that is with defs or symbol.

So the defs element, stores content and

defines element that you want to reuse later.

You see elements inside a defs tag do not get rendered by the browser until you

reference them in your document.

For instance, let's go back to our SVG, and wrap our heart group with defs tag.

Over in the browser once we refresh,

notice how the heart graphic no longer displays.

So now to display the graphic we need to reference it with the use element.

So right below the defs tag, I'll add a quick comment that says,

hey this is where we're using this, and then I'll include a self-closing use tag.

Now the use element duplicates SVG elements and displays them somewhere else.

You can duplicate and reuse a single element or

a group of elements inside g or defs tags.

And the way you reference the element you want to display

is with the xlink hfef attribute.

So first I'll give the g tag an ID of heart.

And then a reference that ID in the use tag with the attribute xlink:hfef= and

inside the quotes I'll specify #heart.

So the use element looks for the piece of the SVG with an ID of heart and clones it.

Once we give our file a save and refresh the browser.

Cool we see the heart graphic in the browser and notice how the fill color

defined in the CSS cascades into the contents of the use element.

But now we can also set the fill via the use tag.

So for example, I'll go back to my style sheet.

In fact, I'll get rid of this heart rule altogether.

Then go over to the use tag and say fill = #c44.

Our heart icon is still red but

now the fill is being defined here in the use tag.

Now the use element excepts other SVG attributes like xy coordinates height and

width even transform attributes.

So for instance I can scale down its size with a transform attribute.

And I'll set the scale to point four.

So now the icon's a little smaller.

Now to reuse the heart graphic, I'll duplicate it by copying and

pasting an use element, right below it.

And this time, I'll make the fill color green with the value #41af5d,

and I'll set the scale to 0.3.

I'll even add a translation of 160.

And there you have it, a reusable template for icons, cool.

So up next I'll teach you another handy way to group and

define reusable elements with symbols.