SVG <g> Element (original) (raw)

Last Updated : 16 Jun, 2022

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

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

Syntax:

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 element.

html `

`

Output:

Example 2: Making rectangles with the same inherited properties.

html `

    <g fill="white" stroke="url(#gfgStr)" stroke-width="15">
        <rect width="400" height="200" />
        <rect width="200" height="200" />
        <rect width="200" height="100" />
    </g>
</svg>

`

Output:

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