Creating 3 columns

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.

4 Likes