SVG中g元素被用来将图形进行分组。一旦分组，你可以把它当作一个单一的形状，对整个图形组进行转换。与嵌套的svg元素相比，将元素作为整体转换是它的一个优点。
你还可以将分组元素看成单个元素，对其设置样式，并重复使用。
SVG g示例
这里是一个简单的SVG g例子：
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<line x1="10" y1="10" x2="85" y2="10"
style="stroke: #006600;"/>
<rect x="10" y="20" height="50" width="75"
style="stroke: #006600; fill: #006600"/>
<text x="10" y="90" style="stroke: #660000; fill: #660000">
Text grouped with shapes</text>
</g>
</svg>
下面是结果图片：
Text grouped with shapes
此示例将三个图形组合成一个<g>元素。如在此列出的分组，还没有特别的益处。但是我们对<g>元素转换之后，你再看看，代码如下：
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="rotate(45 50 50)">
<line x1="10" y1="10" x2="85" y2="10"
style="stroke: #006600;"/>
<rect x="10" y="20" height="50" width="75"
style="stroke: #006600; fill: #006600"/>
<text x="10" y="90" style="stroke: #660000; fill: #660000">
Text grouped with shapes</text>
</g>
</svg>
结果图片如下：
Text grouped with shapes
可以发现，<g>元素中的所有图形都围绕点(50,50)旋转了45度。
g元素的样式由它的子元素继承
<g>元素上设置的CSS样式将会被其子元素继承，示例如下：
<g style="stroke: #0000ff; stroke-width: 4px; fill: #ff0000">
<rect x="10" y="10" width="100" height="50" />
<circle cx="150" cy="35" r="25" />
<circle cx="250" cy="35" r="25"
style="stroke: #009900; fill: #00ff00;"/>
</g>
这个例子定义了带有三个子元素的<g>元素。<g>元素有一个style属性。前两个子元素没有style属性。因此，在<g>元素上定义的style属性将会被这两个子元素继承。第三个子元素有设置边框和填充色的style属性，但是它仍然会继承<g>元素的stroke-width属性。
结果图片如下：
缺点：G元素没有X和Y属性
相比于将分组形状嵌套在<svg>元素中，将分组形状嵌套在<g>元素中的优点是能对所有的图形进行转换。<svg>元素不能自己转换，为了转换嵌套的图形，你不得不将<svg>元素嵌套在<g>元素中。
与<svg>元素相比，<g>元素也有一个缺点。你无法通过改变<g>元素的x和y属性来移动包含所有嵌套形状<g>元素。<g>元素没有x和y属性。如果想这么做，你只能使用transform属性来移动<g>元素，并使用“translate”函数，就像这样：transform="translate(x,y)"。
如果你想要使用x和y属性来移动<g>元素中的所有图形，你需要将<g>元素嵌套在<svg>元素中。<svg>元素有x和y属性。示例代码如下：
<svg x="100">
<g transform="rotate(45 50 50)">
<line x1="10" y1="10" x2="85" y2="10"
style="stroke: #006600;"/>
<rect x="10" y="20" height="50" width="75"
style="stroke: #006600; fill: #006600"/>
<text x="10" y="90" style="stroke: #660000; fill: #660000">
Text grouped with shapes</text>
</g>
</svg>
在这个例子中，所有的<g>元素中的形状都被嵌套在<svg>元素中。可以发现，<svg>的x属性被设置为100。这就意味着，首先<g>中的图形将会做旋转转换，然后沿x轴移动100，因为<svg>被定位在x=100处。下面是图例：
Text grouped with shapes
你还可以切换嵌套的方式，将<svg>元素嵌套在<g>元素中，就像下面这样：
<g transform="rotate(45 50 50)">
<svg x="100"
<line x1="10" y1="10" x2="85" y2="10"
style="stroke: #006600;"/>
<rect x="10" y="20" height="50" width="75"
style="stroke: #006600; fill: #006600"/>
<text x="10" y="90" style="stroke: #660000; fill: #660000">
Text grouped with shapes</text>
</svg>
</g>
因为<svg>元素被定位在x=“100”处，所以图形将首先沿x轴移动100，然后在此位置围绕点50,50旋转45度，图例如下：
Text grouped with shapes
两张图片看起来很相似，其实还是有所差别的。差别包括执行移动和旋转的顺序。如果你仔细一点，可以从图片中看出区别。显示的形状定位不一样。此外，可以发现，第一个图片中，文本虽然有点被裁剪，但是在图片上还是能看到大部分文本。发生这种现象的原因是，图形首先被旋转，并在文本的旋转部分伸出了图像。当向后移动到左侧时，缺少的文本部分仍然缺失。