SVG Group Elements

SVG Group Element:The SVG Group Element is used to group SVG elements together.It is a container that contains all child SVG elements defined inside of it. It is defined by <g> and </g>. It can be nested inside of other SVG Group Elements.


<g>
    <g>
        <g>
           ....
        </g>
    </g>
</g>


There are two major uses of SVG group elements.

1.Grouping
2.Transforming

Grouping SVG Elements Together: 

To group a set of SVG elements that share the same attribute.

 <svg width="200" height="200">
      <g>
         <circle cx="20" cy="20" r="20" fill="green" />
         <circle cx="70" cy="70" r="20" fill="purple" />
       </g>
        <g>
          <rect x="110" y="110" height="30" width="30" fill="blue" />
           <rect x="160" y="160" height="30" width="30" fill="red" />
        </g>
 </svg>

With the SVG Group element, we can organize all of the circles together and all of the rectangles together.This makes our SVG visualization more organized (which is a win) as well as easier to read.

Which is one of the goals of using the SVG Group Element - to group a set of SVG elements that share the same attribute. In this example - grouping all the circles together and all the rectangles together.


Transforming SVG Elements Together:
             To define a new coordinate system for a set of SVG elements by applying a transformation to each coordinate specified in this set of SVG elements.

SVG Transform Attribute:
              The SVG Transform Attribute applies a list of transformations to an element and it's children.The transformation from right to left.They are applied right to left because they are treated as nested transforms.


<svg width="200" height="200">
   // This:
      <g transform="translate(...) scale(...) rotate(...) translate(...) rotate(...)">
           ...
       </g>

  // Being Equivalent to this:
   <g transform="translate(...)">
      <g transform="scale(...)">
        <g transform="rotate(...)">
          <g transform="translate(...)">
            <g transform="rotate(...)">
               ...
             </g>
          </g>
        </g>
      </g>
    </g>
</svg>

There are six types of transformations available. I am using below transformations in my programming mostly.

transformation:
 translate(<x> [<y>])
explanation:
This transform specifies a translation by x and y. If y is not provided, it is assumed to be zero.

transformation:
scale(<x> [<y>])
explanation:
This transform specifies a scale operation by x and y. If y is not provided, it is assumed to be equal to x.