svg <g> element

introduction Link to heading

• 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).