---
title: SVGMatrix
slug: Web/API/SVGMatrix
translation_of: Web/API/SVGMatrix
---
<div>{{APIRef("SVG")}}{{deprecated_header}}</div>

<p>Many of SVG's graphics operations utilize 2x3 matrices of the form:</p>

<pre class="brush:plain">[a c e]
[b d f]</pre>

<p>which, when expanded into a 3x3 matrix for the purposes of matrix arithmetic, become:</p>

<pre class="brush:plain">[a c e]
[b d f]
[0 0 1]
</pre>

<p>An <strong><code>SVGMatrix</code></strong> object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.</p>

<div class="warning">
<p><strong>Warning:</strong> SVG 2 replaced the <code>SVGMatrix</code> interface by the more general {{domxref("DOMMatrix")}} and {{domxref("DOMMatrixReadOnly")}} interfaces.</p>
</div>

<h2 id="Properties">Properties</h2>

<dl>
 <dt>{{domxref("SVGMatrix.a")}}</dt>
 <dd>A float representing the <em>a</em> component of the matrix.</dd>
 <dt>{{domxref("SVGMatrix.b")}}</dt>
 <dd>A float representing the <em>b</em> component of the matrix.</dd>
 <dt>{{domxref("SVGMatrix.c")}}</dt>
 <dd>A float representing the <em>c</em> component of the matrix.</dd>
 <dt>{{domxref("SVGMatrix.d")}}</dt>
 <dd>A float representing the <em>d</em> component of the matrix.</dd>
 <dt>{{domxref("SVGMatrix.e")}}</dt>
 <dd>A float representing the <em>e</em> component of the matrix.</dd>
 <dt>{{domxref("SVGMatrix.f")}}</dt>
 <dd>A float representing the <em>f</em> component of the matrix.</dd>
</dl>

<h2 id="Methods">Methods</h2>

<dl>
 <dt>{{domxref("SVGMatrix.multiply()")}}</dt>
 <dd>Performs matrix multiplication. This matrix is post-multiplied by another matrix, returning the resulting new matrix as <code>SVGMatrix</code>.</dd>
 <dt>{{domxref("SVGMatrix.inverse()")}}</dt>
 <dd>Returns the inverse matrix as <code>SVGMatrix</code>.</dd>
 <dt>{{domxref("SVGMatrix.translate()")}}</dt>
 <dd>Post-multiplies a translation transformation on the current matrix and returns the resulting matrix as <code>SVGMatrix</code>.</dd>
 <dt>{{domxref("SVGMatrix.scale()")}}</dt>
 <dd>Post-multiplies a uniform scale transformation on the current matrix and returns the resulting matrix as <code>SVGMatrix</code>.</dd>
 <dt>{{domxref("SVGMatrix.scaleNonUniform()")}}</dt>
 <dd>Post-multiplies a non-uniform scale transformation on the current matrix and returns the resulting matrix as <code>SVGMatrix</code>.</dd>
 <dt>{{domxref("SVGMatrix.rotate()")}}</dt>
 <dd>Post-multiplies a rotation transformation on the current matrix and returns the resulting matrix as <code>SVGMatrix</code>.</dd>
 <dt>{{domxref("SVGMatrix.rotateFromVector()")}}</dt>
 <dd>Post-multiplies a rotation transformation on the current matrix and returns the resulting matrix as <code>SVGMatrix</code>. The rotation angle is determined by taking (+/-) atan(y/x). The direction of the vector (x, y) determines whether the positive or negative angle value is used.</dd>
 <dt>{{domxref("SVGMatrix.flipX()")}}</dt>
 <dd>Post-multiplies the transformation [-1 0 0 1 0 0] and returns the resulting matrix as <code>SVGMatrix</code>.</dd>
 <dt>{{domxref("SVGMatrix.flipY()")}}</dt>
 <dd>Post-multiplies the transformation [1 0 0 -1 0 0] and returns the resulting matrix as <code>SVGMatrix</code>.</dd>
 <dt>{{domxref("SVGMatrix.skewX()")}}</dt>
 <dd>Post-multiplies a skewX transformation on the current matrix and returns the resulting matrix as <code>SVGMatrix</code>.</dd>
 <dt>{{domxref("SVGMatrix.skewY()")}}</dt>
 <dd>Post-multiplies a skewY transformation on the current matrix and returns the resulting matrix as <code>SVGMatrix</code>.</dd>
</dl>

<h2 id="Exceptions">Exceptions</h2>

<p>A {{domxref("DOMException")}} with the code <code>NO_MODIFICATION_ALLOWED_ERR</code> is raised when attempting updating a read-only attribute or when the object itself is read-only.</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName("SVG1.1", "coords.html#InterfaceSVGMatrix", "SVGMatrix")}}</td>
   <td>{{Spec2("SVG1.1")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>



<p>{{Compat("api.SVGMatrix")}}</p>