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
SVG also provides useful elements for
organizing and structuring your SVG files.
0:00
In this video, you'll learn tips
on how to leverage the g, defs and
0:01
use elements to group reference and
reuse parts of your SVG.
0:06
Using these elements correctly will keep
the code in your SVG easier to read and
0:11
maintain.
0:15
First, the g or group element acts as
a grouping container in your SVG file.
0:17
It groups together sets of related
elements like the div tag does in HTML.
0:23
For example, the SVG in this file draws a
circular badge with a star in the center.
0: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