Transformations

The transform attribute can be set to
- translate(x,y)
- scale(sx,sy)
- rotate(angle,cx,cy)
- skewX(angle)
- skewY(angle)
- matrix(a,b,c,d,e,f)

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
         width="200" height="100"
         viewBox="-10 -5 110 55"  >
        
        <defs>
        <g id="example">
            <rect  width="20" height="20" opacity="0.8" stroke="black" />
        </g>
        </defs>

        <!-- Translate then rotate -->
    
    <use xlink:href="#example" fill="red" />
    <g transform="translate(15, 15)" fill="yellow">
        <use xlink:href="#example" />
        <g transform="rotate(30)" fill="green">
            <use xlink:href="#example" />
        </g>
    </g>
    
        <!-- Rotate then translate -->

    <g transform="translate(70)">
    <use xlink:href="#example" fill="red" />
    <g transform="rotate(30)" fill="yellow">
        <use xlink:href="#example" />
        <g transform="translate(15, 15)" fill="green">
            <use xlink:href="#example" />
        </g>
    </g>
    </g>
</svg>