Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML Reusing Graphics with <symbol>

Tony Minseok Kim
seal-mask
.a{fill-rule:evenodd;}techdegree
Tony Minseok Kim
Front End Web Development Techdegree Student 11,682 Points
Posted by Tony Minseok Kim
.a{fill-rule:evenodd;}techdegree
Tony Minseok Kim
Front End Web Development Techdegree Student 11,682 Points

<symbol> vs <defs>

HI all! just out of curiosity...

I'm pretty sure both elements have a similar job that define graphical template objects, so that we can reuse them later.

which one do you guys prefer to use and why?

1 Answer

Liam Clarke
Liam Clarke
19,938 Points

Hi Tony

It depends on the situation for me but for icons i would use symbol.

If I'm using icons i will generally build and optimise the icons, using symbol makes this a 100 times easier, more notably being able to set viewBox on the symbol, whereas defs you cannot do this.

symbol is also the newer, friendlier version of defs so a lot of things that are nice to haves comes along with it too, like accessibility attributes allowing you to write less code.