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.
<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>
| 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>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>
|
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # GElement |
| Desktop | Mobile | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | |
g |
1 | 12 | 1.5 | 8 | 3.1 | 18 | 4 | 14 | 2 | 1.0 | 3 |
systemLanguage |
1 | 12 | 12 | 8 | 3.1 | 18 | 14 | 14 | 2 | 1.0 | 3 |
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g