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.
<!DOCTYPE html><html> <body> <svg width="1200" height="1200"> <g fill="white" stroke="green" stroke-width="10"> <circle cx="40" cy="40" r="25" /> <circle cx="80" cy="40" r="25" /> <circle cx="120" cy="40" r="25" /> <circle cx="160" cy="40" r="25" /> </g> </svg></body> </html> |
Output:
Example 2: Making rectangles with the same inherited properties.
<!DOCTYPE html><html> <body> <svg width="1200" height="1200"> <defs> <linearGradient id="gfgStr"> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="blue" /> </linearGradient> </defs> <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></body> </html> |
Output:
Browsers Supported: The following browsers are supported by this SVG element:
- Chrome
- Edge
- Firefox
- Safari
- Internet Explorer
- Opera
