SVG <g> Element

The SVG <g> element is a container used to group other SVG elements.

Transformations applied to the <g> element are also performed on its child elements, and its attributes are inherited by its children.

Syntax:

<g attributes="" >
 <elements>
</g>

Attributes:

• core Attributes: These attributes are core attributes like id, etc.
• styling Attributes: These attributes define styling, exp, class, style.
• conditional Attributes: These attributes are condition-based, exp systemLanguage.
• presentation Attributes: Attributes used to give presentation effects, exp color,clip-rule, etc.

Example 1: Making green consecutive circles inheriting attributes from the <g> element.

Output:

👁 Image
 

Example 2: Making rectangles with the same inherited properties. 

Output:

👁 Image

Browsers Supported: The following browsers are supported by this SVG element:

• Chrome 1 and above
• Edge 12 and above
• Firefox 1.5 and above
• Safari 3.1 and above
• Internet Explorer 9 and above
• Opera 8 and above