SVG - Transform: Scale X and Y

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.

SvgScaleXandY.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="200" height="200">
	<!-- A small translation 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>
      <g transform="scale(1.5, 1.25)">
      	<!-- The scaled 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 translation 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="100" x2="0" y2="125" style="stroke: #FF0000; stroke-width:2px;
        marker-end: url(#markerArrow); opacity: .5;" />
      <line x1="100" y1="100" x2="150" y2="125" style="stroke: #FF0000; stroke-width:2px;
        marker-end: url(#markerArrow); opacity: .5;" />
      <line x1="100" y1="0" x2="150" y2="0" style="stroke: #FF0000; stroke-width:2px;
        marker-end: url(#markerArrow); opacity: .5;" />
      <text x="0" y="150" fill="#00AA00">transform="scale(1.5, 1.25)"</text>
    </g>
  </svg>
</body>
</html>

Core HTML

SVG - Transform: Scale X and Y

SvgScaleXandY.html

Output