Jenkov.com
Tutorials Books About
Svg

1 SVG Tutorial
2 SVG Examples
3 A Simple SVG Example
4 Displaying SVG in Web Browsers
5 SVG Coordinate System
6 SVG svg element
7 SVG g element
8 SVG rect element
9 SVG circle element
10 SVG ellipse element
11 SVG line element
12 SVG polyline element
13 SVG polygon element
14 SVG path element
15 SVG marker element
16 SVG text element
17 SVG tspan element
18 SVG tref element
19 SVG textpath element
20 SVG switch element
21 SVG image element
22 SVG a element
23 SVG defs Elements
24 SVG symbol Element
25 SVG use Element
26 SVG and CSS - Cascading Style Sheets
27 SVG Stroke
28 SVG Fill
29 SVG Viewport and View Box
30 SVG Animation
31 SVG Scripting
32 SVG Transformation
33 SVG Gradients
34 SVG Fill Patterns
35 SVG Clip Path
36 SVG Masks
37 SVG Filters




SVG g element


The SVG <g> element is used to group SVG shapes together. Once grouped you can transform the whole group of shapes as if it was a single shape. This is an advantage compared to a nested <svg> element which cannot be the target of transformation by itself.

You can also style the grouped elements, and reuse them as if they were a single element.

SVG g Example

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

Here is the resulting image:

This example shows 3 shapes grouped together in a <g>-element. As it is listed here, there is no particular benefit in this grouping. But watch what happens when we request the <g>-element transformed. 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"
          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>

And here is the resulting image:

Notice how all shapes within the <g>-element are rotated 45 degrees around the point 50,50.

The Styling of g Elements are Inherited by Its Children

The CSS styles of a <g> element are inherited by its child elements. Here is an example:

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

This example defines a <g> element with three child elements. The <g> element has a style attribute. The two first child elements do not have a style attribute. Therefore the styles defined in the <g> element are inherited by these child elements. The third child element has a style attribute which sets the stroke and fill color, but it still inherits the stroke-width of the <g> element.

Here is the resulting image:

Drawback: G Elements Have no X and Y Attributes

The ability to transform all shapes within a <g>-element is an advantage compared to grouping shapes within a nested <svg>-element. <svg>-elements cannot be transformed by themselves. You will have to nest the <svg>-element within a <g>-element to transform its nested shapes.

The <g>-element has one disadvantage compared to the <svg>-element, though. You cannot move the <g>-element including all nested shapes around, just by changing the <g>-element's x and y attributes. The <g>-element doesn't have x and y attributes. To move the contents of a <g>-element you can only do so using the transform attribute, using the "translate" function, like this: transform="translate(x,y)".

If you need to move all shapes within a <g>-element using x and y attributes you will need to nest the <g>-element inside an <svg>-element. The <svg>-element has x and y attributes. Here is an example:

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

In this example all shapes within the <g>-element are nested inside an <svg>-element. Notice that the <svg> has its x-attribute set to 100. That means that first the shapes within the <g> are transformed, then moved 100 along the x-axis, because the <svg> is positioned at x=100. Here is the resulting image:

You can also switch the nesting, and nest the <svg>-element inside the <g>-element, like this:

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

Then the shapes are first moved 100 along the x-axis because the <svg>-element is positioned at x="100", and then rotated from that location 45 degrees around the point 50, 50. Here is the resulting image:

The two images may look similar, but there is a difference. The difference consists of the order the movement and rotation are carried out. You can also see that on the images, if you look closely. The shapes displayed are not positioned equally. In addition, notice how the first image has the text cut off at the beginning, even if the text is displayed at good bit into the image in the x-direction. This happens because the shapes are first rotated, and in the rotation part of the text sticks out of the image. When moved to the left afterwards, the missing text-part is still missing.



Connect with me: Newsletter - Get all my free tips!