How do Transforms work in SVG?

Publish in Javascript el 21/05/2025 13:21

Types of Transformations in SVG: A Complete Technical Guide

The transform attribute in SVG (Scalable Vector Graphics) allows you to apply geometric transformations to graphic elements such as rectangles, circles, lines, groups (<g>), text, and more. These transformations are essential when you want to manipulate the position, size, orientation, or shape of elements without directly altering their coordinate or dimensional attributes.

In this technical article, we’ll explore the different types of transformations available in SVG, their syntax, effects, and how to combine them effectively.

What is transform in SVG?

The transform attribute modifies the local coordinate system of an SVG element. It does not alter the DOM or the element’s base attributes, but rather changes how it is visually rendered on screen.

General Syntax

Transformation Types

SVG supports six basic types of transformations:

translate(tx, ty)

Shifts the coordinate system along the X axis (tx) and the Y axis (ty).

If only one parameter is passed (translate(50)), ty is assumed to be 0.

Equivalent to: moving the object without changing its shape or size.

Play Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo Transform Translate in SVG</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 0 20px; text-align: center; }
    h1{margin:0;}
    svg { border: 1px solid #ccc; margin-top: 12px; width: 400px; height: 200px; }
    .slider-container { margin: 8px auto; max-width: 400px; }
    .slider-group { margin-bottom: 15px; text-align: left; }
    label { display: block; margin-bottom: 5px; font-weight: bold; }
    input[type="range"] { width: 100%; }
    .values {margin-top: 10px; font-family: monospace; }
    p{ background: black; color: white; padding: 6px; margin: 0;}
  </style>
</head>
<body>

  <h1>Transform Translate</h1>

  <div class="slider-container">
    <div class="slider-group">
      <label for="xRange">X (translate-x): <span id="xValue">0</span></label>
      <input type="range" id="xRange" min="-200" max="200" value="0">
    </div>

    <div class="slider-group">
      <label for="yRange">Y (translate-y): <span id="yValue">0</span></label>
      <input type="range" id="yRange" min="-100" max="100" value="0">
    </div>
  </div>

  <div class="values">
    <p><strong>transform =  “translate(<span id="outputX">0</span>, <span id="outputY">0</span>)”</strong></p>
  </div>

  <svg viewBox="0 0 400 200">
    <text id="movingText" x="100" y="100" font-size="32" fill="blue" transform="translate(0, 0)">
      Hello SVG!
    </text>
  </svg>

  <script>
    var xxRange = document.getElementById("xRange");
    var yyRange = document.getElementById("yRange");
    var movingText = document.getElementById("movingText");

    var xValueSpan = document.getElementById("xValue");
    var yValueSpan = document.getElementById("yValue");
    var outputX = document.getElementById("outputX");
    var outputY = document.getElementById("outputY");

    function updateTransform() {
      var x = parseFloat(xxRange.value);
      var y = parseFloat(yyRange.value);

      // Update displayed values
      xValueSpan.textContent = x;
      yValueSpan.textContent = y;
      outputX.textContent = x;
      outputY.textContent = y;

      // Apply translate transformation
      movingText.setAttribute("transform", `translate(${x}, ${y})`);
    }

    // Listen to slider changes
    xxRange.addEventListener("input", updateTransform);
    yyRange.addEventListener("input", updateTransform);

    updateTransform();
  </script>

</body>
</html>

scale(sx, sy)

Scales the object on the X and Y axes. If sy is not specified, sy = sx is assumed.

sx > 1: widens
sy > 1: stretches
sx < 1: shrinks in X
sy < 1: shrinks in Y
sx = -1 reflects the element
sy = -1: reflects the element

Play Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo Transform Scale in SVG</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 0 20px;
      text-align: center;
    }
    h1{margin:0;}
    svg {
      border: 1px solid #ccc;
      margin-top: 20px;
      width: 400px;
      height: 200px;
    }

    .slider-container {
      margin: 20px auto;
      max-width: 400px;
    }

    .slider-group {
      margin-bottom: 8px;
      text-align: left;
    }

    label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }

    input[type="range"] {
      width: 100%;
    }

    .values {
      margin-top: 10px;
      font-family: monospace;
    }
    p{ background: black; color: white; padding: 6px; margin: 0;}
  </style>
</head>
<body>

  <h1>Transform Scale</h1>

  <div class="slider-container">
    <div class="slider-group">
      <label for="sxRange">Scale X (sx): <span id="sxValue">1.0</span></label>
      <input type="range" id="sxRange" min="0.1" max="3" step="0.1" value="1">
    </div>

    <div class="slider-group">
      <label for="syRange">Scale Y (sy): <span id="syValue">1.0</span></label>
      <input type="range" id="syRange" min="0.1" max="3" step="0.1" value="1">
    </div>
  </div>

  <div class="values">
    <p><strong>transform = ’scale(<span id="outputSX">1</span>, <span id="outputSY">1</span>)</strong>’</p>
  </div>

  <svg viewBox="0 0 400 200">
    <rect id="scaledRect"
          x="100" y="60"
          width="60" height="40"
          fill="blue"
          transform="translate(130, 80) scale(1) translate(-130, -80)" />
  </svg>

  <script>
    var sxRange = document.getElementById("sxRange");
    var syRange = document.getElementById("syRange");
    var movingRect = document.getElementById("scaledRect");

    var sxValueSpan = document.getElementById("sxValue");
    var syValueSpan = document.getElementById("syValue");
    var outputSX = document.getElementById("outputSX");
    var outputSY = document.getElementById("outputSY");
    
    // Center of the rectangle
    var cx = 130;
    var cy = 80;

    function updateTransform() {
      const sx = parseFloat(sxRange.value);
      const sy = parseFloat(syRange.value);

      // Update displayed values
      sxValueSpan.textContent = sx.toFixed(1);
      syValueSpan.textContent = sy.toFixed(1);
      outputSX.textContent = sx.toFixed(1);
      outputSY.textContent = sy.toFixed(1);

      // Apply scale transformation
      scaledRect.setAttribute("transform", `translate(${cx}, ${cy}) scale(${sx}, ${sy}) translate(${-cx}, ${-cy})`);
    }

    // Listen to slider changes
    sxRange.addEventListener("input", updateTransform);
    syRange.addEventListener("input", updateTransform);

    // Inicializar
    updateTransform();
  </script>

</body>
</html>

rotate(angle [, cx, cy])

Rotates the element clockwise. A pivot point (cx, cy) can be specified.

Without center: rotates relative to the origin (0, 0)
With center: rotates relative to that point

Play Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo Transform Rotate en SVG</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 0 20px; text-align: center; }
    h1{margin:0;}
    svg { border: 1px solid #ccc; margin-top: 20px; width: 400px; height: 200px; }
    .slider-container { margin: 20px auto; max-width: 400px; }
    .slider-group { margin-bottom: 15px; text-align: left; }
    label { display: block; margin-bottom: 5px; font-weight: bold; }
    input[type="range"] { width: 100%; }
    .values { margin-top: 10px; font-family: monospace; }
    p{ background: black; color: white; padding: 6px; margin: 0;}
  </style>
</head>
<body>

  <h1>Transform Rotate</h1>

  <div class="slider-container">
    <div class="slider-group">
      <label for="angleRange">Ángulo de rotación (grados): <span id="angleValue">0</span></label>
      <input type="range" id="angleRange" min="0" max="360" value="0">
    </div>
  </div>

  <div class="values">
    <p><strong>transform = ’rotate(<span id="outputAngle">0</span>, 130, 80)’</strong></p>
  </div>

  <svg viewBox="0 0 400 200">
    <rect id="rotatedRect"
          x="100" y="60"
          width="60" height="40"
          fill="green"
          transform="rotate(0, 130, 80)" />
  </svg>

  <script>
    const angleRange = document.getElementById("angleRange");
    const rotatedRect = document.getElementById("rotatedRect");

    const angleValueSpan = document.getElementById("angleValue");
    const outputAngle = document.getElementById("outputAngle");

    // Center of the rectangle
    const cx = 130; // x + width / 2
    const cy = 80;  // y + height / 2

    function updateTransform() {
      const angle = parseFloat(angleRange.value);

      // Update displayed values
      angleValueSpan.textContent = angle;
      outputAngle.textContent = angle;

      // Apply rotation from the center
      rotatedRect.setAttribute("transform", `rotate(${angle}, ${cx}, ${cy})`);
    }

    // Listen to changes on the slider
    angleRange.addEventListener("input", updateTransform);

    updateTransform();
  </script>

</body>
</html>

skewX(angle)

Tilts the object horizontally along the X axis. It affects the X coordinates according to its Y position.

skewY(angle)

Tilts the object vertically along the Y axis. It affects the Y coordinates according to its X position.

Play Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo Skew sin desplazamiento</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 0 20px; text-align: center; }
    h1{margin:0;}
    svg { border: 1px solid #ccc; margin-top: 20px; width: 400px; height: 200px; }
    .slider-container { margin: 20px auto; max-width: 400px; }
    .slider-group { margin-bottom: 15px; text-align: left; }
    label { display: block; margin-bottom: 5px; font-weight: bold; }
    input[type="range"] { width: 100%; }
    .values { margin-top: 10px; font-family: monospace; }
    p{ background: black; color: white; padding: 6px; margin: 0;}
  </style>
</head>
<body>

  <h1>Transform Skew</h1>

  <div class="slider-container">
    <div class="slider-group">
      <label for="xSkewRange">Skew Angle X (degrees): <span id="xSkewValue">0</span></label>
      <input type="range" id="xSkewRange" min="-89" max="89" value="0">
    </div>

    <div class="slider-group">
      <label for="ySkewRange">Skew Angle Y (degrees): <span id="ySkewValue">0</span></label>
      <input type="range" id="ySkewRange" min="-89" max="89" value="0">
    </div>
  </div>

  <div class="values">
    <p><strong>transform = ’translate(100, 60) skewX(<span id="outputXSkew">0</span>) skewY(<span id="outputYSkew">0</span>) translate(-100, -60)’</strong></p>
  </div>

  <!-- SVG con rectángulo dentro de un grupo -->
  <svg viewBox="0 0 400 200">
    <g id="skewGroup" transform="translate(100, 60) skewX(0) skewY(0) translate(-100, -60)">
      <rect x="100" y="60" width="60" height="40" fill="orange" />
    </g>
  </svg>

  <script>
    const xSkewRange = document.getElementById("xSkewRange");
    const ySkewRange = document.getElementById("ySkewRange");
    const skewGroup = document.getElementById("skewGroup");

    const xSkewValueSpan = document.getElementById("xSkewValue");
    const ySkewValueSpan = document.getElementById("ySkewValue");
    const outputXSkew = document.getElementById("outputXSkew");
    const outputYSkew = document.getElementById("outputYSkew");

    function updateTransform() {
      const xAngle = parseFloat(xSkewRange.value);
      const yAngle = parseFloat(ySkewRange.value);

      xSkewValueSpan.textContent = xAngle;
      ySkewValueSpan.textContent = yAngle;
      outputXSkew.textContent = xAngle;
      outputYSkew.textContent = yAngle;

      // Apply centered transformation to avoid movement
      skewGroup.setAttribute("transform", `translate(100, 60) skewX(${xAngle}) skewY(${yAngle}) translate(-100, -60)`);
    }

    xSkewRange.addEventListener("input", updateTransform);
    ySkewRange.addEventListener("input", updateTransform);

    updateTransform();
  </script>

</body>
</html>

matrix(a, b, c, d, e, f)

General affine transformation defined by a 2x3 matrix.

Represents the following linear transformation:

The coordinates (x, y) are transformed as follows:

This allows any combination of translation, rotation, scaling, and skew to be represented in a single operation.

Play Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo Transform Matrix() en SVG</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      text-align: center;
    }body { font-family: Arial, sans-serif; padding: 0 20px; text-align: center; }
    h1{margin:0;}
    svg { border: 1px solid #ccc; margin-top: 20px; width: 400px; height: 200px; }
    .slider-container { margin: 20px auto; max-width: 600px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
    .slider-group { text-align: left; }
    label { display: block; margin-bottom: 5px; font-weight: bold; }
    input[type="range"] { width: 100%; }
    .values { margin-top: 20px; font-family: monospace; }
    p{ background: black; color: white; padding: 6px; margin: 0;}
  </style>
</head>
<body>

  <h1>Transform Matrix</h1>

  <div class="slider-container">
    <div class="slider-group">
      <label for="aRange">a: <span id="aValue">1</span></label>
      <input type="range" id="aRange" min="-3" max="3" step="0.01" value="1">
    </div>

    <div class="slider-group">
      <label for="bRange">b: <span id="bValue">0</span></label>
      <input type="range" id="bRange" min="-3" max="3" step="0.01" value="0">
    </div>

    <div class="slider-group">
      <label for="cRange">c: <span id="cValue">0</span></label>
      <input type="range" id="cRange" min="-3" max="3" step="0.01" value="0">
    </div>

    <div class="slider-group">
      <label for="dRange">d: <span id="dValue">1</span></label>
      <input type="range" id="dRange" min="-3" max="3" step="0.01" value="1">
    </div>

    <div class="slider-group">
      <label for="eRange">e (x): <span id="eValue">0</span></label>
      <input type="range" id="eRange" min="-100" max="100" step="1" value="0">
    </div>

    <div class="slider-group">
      <label for="fRange">f (y): <span id="fValue">0</span></label>
      <input type="range" id="fRange" min="-100" max="100" step="1" value="0">
    </div>
  </div>

  <div class="values">
    <p><strong>transform = ’matrix(<span id="outputA">1</span>, <span id="outputB">0</span>, <span id="outputC">0</span>, <span id="outputD">1</span>, <span id="outputE">0</span>, <span id="outputF">0</span>)’</strong></p>
  </div>

  <svg viewBox="0 0 400 200">
    <rect id="matrixRect"
          x="100" y="60"
          width="60" height="40"
          fill="purple"
          transform="matrix(1, 0, 0, 1, 0, 0)" />
  </svg>

  <script>
    const a = document.getElementById("aRange");
    const b = document.getElementById("bRange");
    const c = document.getElementById("cRange");
    const d = document.getElementById("dRange");
    const e = document.getElementById("eRange");
    const f = document.getElementById("fRange");

    const matrixRect = document.getElementById("matrixRect");

    const output = {
      a: document.getElementById("outputA"),
      b: document.getElementById("outputB"),
      c: document.getElementById("outputC"),
      d: document.getElementById("outputD"),
      e: document.getElementById("outputE"),
      f: document.getElementById("outputF")
    };

    const values = {
      a: document.getElementById("aValue"),
      b: document.getElementById("bValue"),
      c: document.getElementById("cValue"),
      d: document.getElementById("dValue"),
      e: document.getElementById("eValue"),
      f: document.getElementById("fValue")
    };

    function updateTransform() {
      const A = parseFloat(a.value).toFixed(2);
      const B = parseFloat(b.value).toFixed(2);
      const C = parseFloat(c.value).toFixed(2);
      const D = parseFloat(d.value).toFixed(2);
      const E = parseInt(e.value);
      const F = parseInt(f.value);

      // Actualizar valores mostrados
      output.a.textContent = A;
      output.b.textContent = B;
      output.c.textContent = C;
      output.d.textContent = D;
      output.e.textContent = E;
      output.f.textContent = F;

      values.a.textContent = A;
      values.b.textContent = B;
      values.c.textContent = C;
      values.d.textContent = D;
      values.e.textContent = E;
      values.f.textContent = F;

      // Aplicar la transformación matrix
      matrixRect.setAttribute("transform", `matrix(${A}, ${B}, ${C}, ${D}, ${E}, ${F})`);
    }

    // Escuchar cambios en los sliders
    [a, b, c, d, e, f].forEach(input => {
      input.addEventListener("input", updateTransform);
    });

    // Inicializar
    updateTransform();
  </script>

</body>
</html>

Compositing Transformations

SVG allows you to chain multiple transformations, which are applied from left to right, following the order in which they are written.

This order matters:

Move to the point (50, 50)
Then rotate around the origin (0,0) (already shifted)
Finally, scale in that new system

If you want to rotate around the center of the object, it is important to use rotate(angle, cx, cy).

Best Practice Recommendations

Use transform instead of recalculating attributes (x, y, etc.) if you want to modify the view without altering the underlying data.
Prefer rotate(angle, cx, cy) to avoid having to combine with translate().
Group elements with <g> to apply collective transformations.
Only use matrix() when a complex composite transformation is required or for interoperability with other tools.