SVG - Transform: Matrix

The acronym SVG stands for Scalable Vector Graphics and refers to graphics that are generated by a geometric specification rather than by pixels, like an image (called rasterized graphics as opposed to the vectorized graphics described here).

Transformations in SVG allow shapes to be transformed as a whole unit. This example transforms a set of four points that are given as a polygon. The transformation of each point is shown via the arrows.

SvgMatrix.html

<!DOCTYPE html>
<html>
<head>
    <title>XoaX.net's HTML</title>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="250">
	<!-- A smalltranslation to move out of the corner for visibility -->
    <g transform="translate(10,10)">
    <!-- The original square -->
      <polygon points="0,0 0,100 100,100 100,0" fill="none" stroke="#CCCCCC" stroke-width="2"/>
      <g fill="#CCCCCC" >
        <circle cx="0" cy="0" r="4"/>
        <circle cx="0" cy="100" r="4"/>
        <circle cx="100" cy="100" r="4"/>
        <circle cx="100" cy="0" r="4"/>
      </g>
      <!--matrix(a b c d e f) becomes-->
      <!--[a c e]-->
      <!--[b d f]-->
      <!--[0 0 1]-->
      <!--So, M*[x, y, 1] = [ax+cy+e, bx+dy+f, 1] (vectors are the transpose of what is shown)-->
      <!--This transformation is a rotation of 30 degrees and a translation by (40, 100)-->
      <g transform="matrix(.866 -.5 .5 .866 40 100)">
      	<!-- The transformed square -->
        <polygon points="0,0 0,100 100,100 100,0" fill="none" stroke="#00AA00" stroke-width="2"/>
        <g fill="#00AA00" >
          <circle cx="0" cy="0" r="4"/>
          <circle cx="0" cy="100" r="4"/>
          <circle cx="100" cy="100" r="4"/>
          <circle cx="100" cy="0" r="4"/>
        </g>
      </g>
      <!-- Arrows the indicate the transformation of each vertex -->
      <!-- markerUnits="strokeWidth" scales the marker according to the stroke width -->
      <!-- markerUnits="strokeWidth" is the default behavior if nothing is specified -->
      <marker id="markerArrow" markerWidth="7" markerHeight="7" refX="6" refY="3" orient="auto"
        markerUnits="strokeWidth">
	    <path d="M0,0 L0,6 L6,3 L0,0" style="fill: #FF0000;" />
	  </marker>
      <line x1="0" y1="0" x2="40" y2="100" style="stroke: #FF0000; stroke-width:2px;
        marker-end: url(#markerArrow); opacity: .5;" />
      <line x1="0" y1="100" x2="90.0" y2="186.6" style="stroke: #FF0000; stroke-width:2px;
        marker-end: url(#markerArrow); opacity: .5;" />
      <line x1="100" y1="100" x2="176.6" y2="136.6" style="stroke: #FF0000; stroke-width:2px;
        marker-end: url(#markerArrow); opacity: .5;" />
      <line x1="100" y1="0" x2="126.6" y2="50" style="stroke: #FF0000; stroke-width:2px;
        marker-end: url(#markerArrow); opacity: .5;" />
      <text x="0" y="210" fill="#00AA00">transform="matrix(.866 -.5 .5 .866 40 100)"</text>
    </g>
  </svg>
</body>
</html>

Core HTML

SVG - Transform: Matrix

SvgMatrix.html

Output