The <defs> element is used to store graphical
objects that will be used at a later time. Objects created inside a <defs>
element are not rendered directly. To display them you have to reference them
(with a
<use> element for example).
Graphical objects can be referenced from anywhere, however,
defining these
objects inside of a <defs> element promotes understandability of
the SVG content and is beneficial to the overall accessibility of the document.
ref: developer.mozilla
The <use> element takes nodes
from within the SVG document, and duplicates them somewhere else.
Only the attributes
x, y, width, height
and href
on the use element will override those set on the referenced
element. However, any other attributes not set on the referenced
element will be applied to the use element.
ref: developer.mozilla
