The group tag <g> is used often in SVG, especially in maps. It is used to group elements and then apply a set of attributes to that set. It provides the following benefits:
- It allows you to treat a set of shapes as a single shape for the purpose of scaling and translating.
- It prevents code duplication by allowing you to set attributes at a higher level and have them inherit all the elements included.
- Groups are essential for applying transformations to large sets of SVG nodes in a performant manner. Grouping offsets the parent group rather than modifying each of the attributes in every item of the group.
Let's take the set of shapes used to explain Bézier curves and add all of them to a single group, combining everything we have learned so far, in the following code:
<svg height="500" width="800">
<g transform...
