How to transform a group of objects using the "g" element?

The "g" element is a container that allows you to group multiple graphical objects together as a single object. This allows you to transform the group as a whole, instead individual objects.

Here is an HTML document, transformation-group.html, that has a SVG image with transformation on a group of graphical objects:

<html><body>
<svg xmlns="http://www.w3.org/2000/svg" 
 style="background-color: #dddddd"
 width="350" height="200" viewBox="-50 -50 350 100">
 <line x1="-50" y1="0" x2="50" y2="0" stroke="black" stroke-dasharray="4"/>
 <line x1="0" y1="-50" x2="0" y2="50" stroke="black" stroke-dasharray="4"/>

 <g transform="rotate(-10)">
   <text x="0" y="0" font-family="Arial" font-size="36" fill="grey"
    transform="skewX(-75) scale(1,0.2)">FYIcenter.com</text>
   <text x="0" y="0" font-family="Arial" font-size="36">FYIcenter.com</text>
 </g>
</svg>
</body></html>

When you open the above HTML file, transformation-group.html, in a Web browser, you see 2 text strings rotated by -10 degree:

⇒ List of Transformation Functions

⇐ "transform" Attribute for Transformations

⇑ Transformation of Object Coordinates

⇑⇑ SVG (Scalable Vector Graphics)