SVG <g> Element

The SVG <g> element is used to group SVG shapes together. After grouping, you can transform the entire shape as if it were a single shape. This is an advantage over the nested <svg> element that cannot be a target for transformation alone. You can also set the style of the grouped elements and reuse them as if they were individual elements.

The element 'g' is used as a container to group objects. Transformations added to the 'g' element are applied to all its child elements. Attributes added to the 'g' element are inherited by all its child elements. In addition, the 'g' element can also be used to define complex objects, which can then be referenced by the <use> element.

SVG <g> element example

This is a simple SVG <g>Example:

<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"
　　　　　　　　　　00;"6600;"/style="stroke: #00
　　　　　　<rect x="10" y="20" height="50" width="75"
　　　　　　　　　　00;"6600; fill: #0066"/style="stroke: #00
　　　　　　<text x="10" y="90" style="stroke: #660000; fill: #6600"
　　　　　　　　oldtoolbag.com Basic Tutorial</text>
　　　　</g>
</svg>

After running, the image effect is:

This example shows how shapes combined with the <g> element3shapes. As listed here, there is no special benefit in this group. But please note what happens when we request to transform the <g> element. Here is the code:

<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"
　　　　　　　　　　00;"6600;"/style="stroke: #00
　　　　　　<rect x="10" y="20" height="50" width="75"
　　　　　　　　　　00;"6600; fill: #0066"/style="stroke: #00
　　　　　　<text x="10" y="90" style="stroke: #660000; fill: #6600"
　　　　　　　　oldtoolbag.com Basic Tutorial</text>
　　　　</g>
</svg>

After running, the image effect is:

Note<g>how all shapes in an element are rotated around a point50,50 Rotation45degrees.

The style of the g element is inherited from its child elements

<g>The CSS style of an element is inherited from its child elements. Here is an example:

<svg width="320" height="150"><g style="stroke: #0000ff; stroke-width:　4px; fill: #ff0000">
　　　　Test to see ‹/›

00; fill: #00ff00;<g>in this example defines a<g> element has three child elements. Theproperties inherited by these child elements. The third child element has aelements have aproperties inherited by these child elements. The third child element has aproperties. The first two child elements do not have<g>property. Therefore, the styles defined in theproperties inherited by these child elements. The third child element has astyle<g>elements have the property to set the line and fill color, but it still inherits thestroke-widthproperties.

After running, the image effect is:

Disadvantage: G element does not have X and Y properties

The ability to transform all shapes inside the <g> element is an advantage compared to grouping shapes inside nested <svg> elements. The <svg> element cannot transform itself. You must nest the <svg> element inside the <g> element to transform its nested shapes.
However, compared to the <svg> element, the <g> element has a disadvantage. You cannot move the <g> element including all nested shapes simply by changing the x and y properties of the <g> element. The <g> element does not have x and y properties. To move the content of the <g> element, you can only use the transform attribute with the "translate" function, for example: transform ="translate(x,y)".
If you need to move all shapes inside the <g> element using the x and y properties, you need to nest the <g> element inside the <svg> element. The <svg> element has x and y properties. Here is an example:

<svg width="320" height="150">
　　　　<g transform="rotate(45　50　50)">
　　　　　　　　<line x1="10" y1="10" x2="85" y2="10"
　　　　　　　　　　　　00;"6600;"/style="stroke: #00
　　　　　　　　<rect x="10" y="20" height="50" width="75"
　　　　　　　　　　　　00;"6600; fill: #0066"/style="stroke: #00
　　　　　　　　<text x="10" y="90" style="stroke: #660000; fill: #6600"
　　　　　　　　　　oldtoolbag.com Basic Tutorial</text>
　　　　</g>
</svg>

><g>0000">　<svg>In this example,<svg>inside the element. Please note that all shapes inside the element are nested in100. This means that the x attribute of the shape inside is set to<g>perform the transformation, and then move along the x-axis100, because<svg>Position x = 100. After running, the image effect is:

You can also switch the nesting, to<svg>elements nested in<g>elements inside, as shown below:

<svg width="320" height="150">
<g transform="rotate(45　50　50)">
<svg x="100">
　　　　<line x1="10" y1="10" x2="85" y2="10" style="stroke: #006600;"></line>
　　　　<rect x="10" y="20" height="50" width="75" style="stroke: #006600; fill: #006600"></rect>
　　　　<text x="10" y="90" style="stroke: #660000; fill: #660000">oldtoolbag.com Basic Tutorial</text>
</svg>
</g>
</svg>

Then, the shape moves along the x-axis first100, because the position of the <svg> element is x="100" and then rotate around the point50,50 Rotation45degrees. The result is as follows:

These two images may look similar, but they are different. The difference lies in the order of executing motion and rotation. If you look closely, you can also see it on the image. The shape is not evenly placed. In addition, please note that even if the first image is displayed in the image in the form of dots in the x direction, it is the same. This happens because the shape is rotated first, and then the text extends out of the image in the rotated part. However, there is still a missing text part when moving to the left after this.