<g>
Baseline
Widely 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 most of its presentation 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.
Most of the presentation attributes applied to the element are inherited by its children.
However, geometric attributes are only valid as presentation attributes on their designated elements — they have no effect on a <g> element and are not passed to its children.
These non-inherited attributes include:
cx,cy,r:<circle>,<ellipse>rx,ry:<ellipse>,<rect>d:<path>x,y,width,height:<foreignObject>,<image>,<rect>,<svg>,<symbol>,<use>
Non-presentation attributes, even those that are valid on <g> (such as id or class), are also not inherited.
DOM Interface
This element implements the SVGGElement interface.
Example
<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>
Specifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # GElement |