This SVG example illustrates how to transformations are ordered based on how they are defined. The first three transformations demonstrate how to define the same transformation, which a translation followed by a rotation, via three different specifications. These three transformations are applied to three rectangles that are black, green and, yellow with varying roundedness on the corners so that they can all be seen. The fourth rectangle is semi-transparent blue and has the same transformations applied with the order reversed. The red dot is located at the origin for illustration.

TransformationOrder.svg

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 2 2">
  <!-- These first three ractangles undergo the same transformation: Translation and then rotation -->
  <!-- Square-cornered gray rectangle: translated by the x and y coordinates and then rotated 30 degrees  -->
  <rect transform="rotate(30)" x="-.5" y="-.25" width="1" height=".5"  fill="black" />
  <!-- Slighty rounded-cornered green rectangle: translated and then rotated 30 degrees  -->
  <rect transform="rotate(30) translate(-.5, -.25)" x="0" y="0" rx=".1" width="1" height=".5" fill="lime" />
  <!-- Fully rounded-cornered yellow rectangle: translated and then rotated 30 degrees  -->
  <g transform="rotate(30)">
    <g transform="translate(-.5, -.25)">
      <rect x="0" y="0" rx=".25" width="1" height=".5"  fill="yellow" />
    </g>
  </g>
  <!-- This last rectangle has the transformations reversed -->
  <!-- Square-cornered blue rectangle: rotated 30 degrees and then translated -->
  <rect transform="translate(-.5, -.25) rotate(30)" x="0" y="0" width="1" height=".5"  fill="blue" opacity=".5" />
  <circle cx="0" cy="0" r=".02" fill="red" />
</svg>

Output