Reusing graphical objects from symbols
Earlier in this chapter, I mentioned that I had picked and downloaded some icons from IcoMoon (https://icomoon.io). They were icons depicting touch gestures: swipe, pinch, drag, and more. Suppose, in a website you are building, you need to make use of them multiple times. Remember I mentioned that there was a version of those icons as SVG symbol definitions? That’s what we will make use of now.
In example_10-03, we insert the various symbol definitions inside the defs element of an SVG in the page. You’ll notice that, on the svg element, an inline style is used, display:none, and the height and width attributes have both been set to 0 (those styles could be set in CSS if you prefer). This is so that this SVG takes up no space. We are only using this SVG to house symbols of the graphical objects we want to use elsewhere. So, our markup starts like this:
<body>
<svg display="none" width="0"...
