From the course: Learning SVG

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Reuse SVG symbols with <symbol> and <use>

Reuse SVG symbols with <symbol> and <use> - SVG Tutorial

From the course: Learning SVG

Start my 1-month free trial

Reuse SVG symbols with <symbol> and <use>

“

- [Instructor] One of the advantages to using inline SVGs is we can reuse the graphic elements of the SVG as many times as we want in a document without having to copy and paste the entire SVG code. We simply turn the graphic elements of the SVG into symbols, and then reference those symbols anytime we want to use them. Define the SVG once, then use its symbols in different variants in different places as many times as you like. Let's say, for example, I want to display a smaller version of just this symbol in this graphic without the blue border next to the figure, and I want it to be green. To do this, I first have to convert the elements that make up this icon here into a symbol, and then call it in using the use element. In the markup, I've already grouped together the elements that make up the symbol, it's sitting inside this g element with a class icon, so now I can wrap the g element in a symbol element. We'll use the id of the symbol element to reference it later when we want…

Contents