The <g> element groups all of its decendants in one group, which makes it is easy to add styles, transformation, interactivity, and even animations to the entire group of objects (
Soueidan, 2014
).
Transformation applied to the <g> element are also performed on its child elements, and its attributes are inherited by its children, including core, styling, conditional, and presentation attributes (
taran910, 2022
).
With <g> element the grouped elements can be reused as if they were a single element, that is an advantage compared to a nested <svg> element which cannot be the target of transformation itself (
Jenkov, 2014
).
It can also group multiple elements to be referenced later with the <use> element (
MDN, 2023
) and can apply the same style to a set of elements (
LeBeau, 2013
).