--- 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>