SVG inverse transformation

SVG's most powerful transformation type is the matrix transformation. It also results in the renderer's best possible performance.

We can apply it to all graphics and container elements via

     <element transform="matrix(a,b,c,d,e,f)" />

where a,b,c,d,e,f are some numeric values.

Mathematically we use commonly the matrix notation with homogeneous coordinates.

T a c e b d f 0 0 1

Here is a simple SVG example consisting of a polyline - the origin - and a text element.

SVG

  <g:svg viewBox="-10 -50 810 210">
    <g:polyline stroke-width="2" stroke="darkgray" fill="none" points="30,0 0,0 0,30" />
    <g:text>SVG</g:text>
  </g:svg>

We transform this text element by a scale factor of 2, a rotation of 30 deg and a translation of (500,50) in exactly that order. This results in the following transformation matrix.

T 1.732 -1 500 1 1.732 50 0 0 1

We apply this matrix to our text element. Please remember, that we have a lefthanded coordinate system with the y-axis down and positive rotation clockwise.

SVG

  <g:svg viewBox="-10 -50 810 210">
    <g:polyline stroke-width="2" stroke="darkgray" fill="none" points="30,0 0,0 0,30" />
    <g:text transform="matrix(1.732,1,-1,1.732,500,50)">SVG</g:text>
  </g:svg>

Now - for some reason - we want to compensate the effect of the transformation above by applying a second transformation. Here comes the inverse matrix into play.

T 1 ad-bc d -c -de+cf -b a be-df 0 0 1

A simple proof, if we really have the inverse matrix here, is to multiply it to original matrix. We know, that the matrix order matters, when we multiply them. But in this special case it doesn't matter. Fact is, that we must yield the identiy matrix I.

T T I 1 0 0 0 1 0 0 0 1

As the proof holds true, we feed the inverse matrix with our numeric values from above.

T 0.433 0.25 -229 -0.25 0.433 103.35 0 0 1

Now comes the visual proof with SVG.

SVG

  <g:svg viewBox="-10 -50 810 210">
    <g:polyline stroke-width="2" stroke="darkgray" fill="none" points="30,0 0,0 0,30" />
    <g:text transform="matrix(0.433,-0.25,0.25,0.433,-229,103.35) matrix(1.732,1,-1,1.732,500,50)">SVG</g:text>
  </g:svg>

It works in theory and praxis. You may ask, when we should use this. One common usage is to compensate the transformation of a group for one or more elements in this group. Also for scripting and SMIL animation the knowledge of the inverse matrix might be helpful.