This is a pen created for another topic, but the principles are the same.
There is an svg
element at the top with a defs
section where I define a circle, and give its layer (g
) an ID. It is only a simple circle, but could have been a more complex SVG image.
Then in the actual content, wherever I want to put that same svg object, I just link to its ID with:-
<use xlink:href="#icon-circle"></use>
…which cuts a lot of clutter and repetition from the page.