If you want to reuse the same graphic throughout your project, you’ll need to define it somewhere. It’s common practice to do this at the top, but this can be anywhere. Such definitions are not displayed immediately, but only whenever you request them somewhere within the SVG element.
Definitions versus Symbols
A group of definitions is put within the
<defs> element. Such an element has no attributes or special functions at all, except for the fact that what’s inside is not displayed. Inside of it can be anything, even CSS styling rules.
<symbol id=”name”> element does the same, but is only allowed to contain shapes.
The difference is mostly for practical and semantical reasons. Within a
<defs> element you can place multiple definitions with their own names you can reference. Within a
<symbol> element you can only define that particular symbol, and the element itself has one id/name you can use as reference. For example, you can place as many
<symbol> elements as you want within a
<defs> element, but not the other way around. Symbols can be referenced specifically and used throughout the graphic, while definitions are just wrapper or grouping elements for such symbols. We’ll see later in the course that there are several other (important) SVG object types that must be placed inside a
<svg> <defs> <!-- Define our own symbol here --> <symbol id="blueCircle"> <circle cx="5" cy="5" r="5" fill="blue"/> </symbol> </defs> <!-- Notice how nothing is displayed, because everything's inside a <defs> element --> </svg>
Actually Using Them
To use them, not surprisingly, we write this tag:
<use xlink:href=”#name” x=”xPos” y=”yPos” />
This instantiates the symbol with id name at position (xPos, yPos).
<svg> <defs> <symbol id="blueCircle"> <circle cx="5" cy="5" r="5" fill="blue"/> </symbol> </defs> <!-- Now something's displayed, because we're calling our symbol --> <use xlink:href="#blueCircle" x="10" y="10" /> </svg>
Because symbols are contained, standalone graphics, you could view them as their own SVG environment. We can instantiate them multiple times throughout the graphic, but what determines their size? Well, two things.
Firstly, we can set regular
height attributes on the
<use> element. This does nothing in terms of scaling the symbol, but only sets a maximum width and height
Secondly, the symbols determine it themselves, the same way the global size of the SVG element is determined: using
preserveAspectRatio attributes. These attributes can be used to set how the symbol should scale to fit the dimensions of the
<use> element that called it.
The example below should scale the circle to the full width of the svg element, but doesn't want to work on this particular page for some reason. Try this one out for yourself, I'd say.
<svg> <defs> <!-- We place the full circle within the viewbox, allowing it to scale to full size when we use it --> <symbol id="blueCircle" viewbox="0 0 10 10"> <circle cx="5" cy="5" r="5" fill="blue"/> </symbol> </defs> <use xlink:href="#blueCircle" x="10" y="10" /> </svg>