files/en-us/web/svg/reference/element/g/index.md
The <g> SVG element is a container used to group other SVG elements.
Transformations applied to the <g> element are performed on its child elements, and its attributes are inherited by its children. It can also group multiple elements to be referenced later with the {{SVGElement("use")}} element.
{{svginfo}}
This element only includes global attributes.
This element implements the {{domxref("SVGGElement")}} interface.
html,
body,
svg {
height: 100%;
}
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<!-- Using g to inherit presentation attributes -->
<g fill="white" stroke="green" stroke-width="5">
<circle cx="40" cy="40" r="25" />
<circle cx="60" cy="60" r="25" />
</g>
</svg>
{{EmbedLiveSample('Example', 100, '100%')}}
{{Specifications}}
{{Compat}}