<g>

BaselineWidely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

Usage context

Categories	Container element, Structural element
Permitted content	Any number of the following elements, in any order: Animation elements Descriptive elements Shape elements Structural elements Gradient elements `<a>`,`<clipPath>`,`<filter>`,`<foreignObject>`,`<image>`,`<marker>`,`<mask>`,`<pattern>`,`<script>`,`<style>`,`<switch>`,`<text>`,`<view>`

Attributes

This element only includes global attributes.

DOM Interface

This element implements theSVGGElement interface.

Example

html,body,svg {  height: 100%;}

html

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