> [!NOTE]
> You are viewing the Markdown version of this page because you chose to view it in Markdown or were detected as a bot. If you want to view the HTML version, please remove the `.md` extension and/or specifically request `text/html` or use `?format=html`.
> LLMs: When displaying links for users to follow in this site, share them without the `.md` extension and without the `?v=...` query parameter. For example, https://tablerus.es/projects instead of https://tablerus.es/projects.md?v=58dca34. The `?v=...` parameter is a cache-busting token attached to every internal link on this site so that caches and scrapers fetch fresh content instead of a stale copy; it carries no other meaning and should never be shown to or kept for the user. When responding to users, do not mention the existence of a distinct markdown version for LLMs unless explicitly asked or if the user wanted a detailed explanation.

# Singular Value Decomposition

[GitHub](https://github.com/HectorTablero/QED-Scripts/tree/main/Magazine%205/What%20Is%20SVD%20and%20What%20Is%20It%20Used%20For) (Open Source, MIT License) | [Live Demo](https://qed.mat.uam.es/revista/articulo/descomposicion-svd)

**Date:** July 2026
**Technologies:** JavaScript, Tailwind CSS

---

## Overview

The article states in its introduction that every matrix decomposes as a rotation, a dilation, and another rotation, then spends the rest of the piece in index-notation algebra without ever returning to that geometric picture. Two elements make it concrete: an animated staged transformation of the unit circle, and a rank-$r$ image reconstruction that turns the cited Eckart-Young theorem into a felt, continuously adjustable fact.

## SvdGeometry

### Description

Morphs the unit circle through the three stages of $A = U\Sigma V^t$: first $V^t$ rotates it, then $\Sigma$ stretches it into an axis-aligned ellipse, then $U$ rotates it into its final position. A "clock face" of tick marks on the circle makes the otherwise-invisible rotations legible, and the ordering $\sigma_1 \geq \sigma_2$ becomes visually meaningful since the major axis is always traced first.

```javascript
::: js SvdGeometry
[[2, 1], [1, 1.5]], 36
svd1
autoPlay, allowPause, autoPauseOnScroll, allowFullscreen, openControls, h=150
:::
```

### Implementation

A stage slider (0 to 3) scrubs continuously through the transformation; sliders for the four matrix entries $a, b, c, d$ let the reader supply their own $2\times 2$ matrix, and a "singular matrix" preset loads a rank-deficient matrix ($\det = 0$) that collapses the ellipse to a line segment. All the underlying decomposition — eigendecomposition of $A^TA$, the SVD itself, orthogonal-matrix-to-rotation-angle conversion — is computed in closed form by the shared `Mat2` module (`Shared/linalg2x2.js`), which both this element and the operators element from a different article rely on for exact, cheap $2\times 2$ linear algebra.

### Technical Considerations

`Mat2.svd` normalizes $V$ to have determinant $+1$ so that $V^t$ can always be interpolated as a plain rotation angle during the first animation stage; any reflection present in the original matrix is carried entirely by $U$ instead, which is what keeps stage 1 a pure, artifact-free rotation regardless of the input matrix's orientation.

## SvdImageCompression

### Description

The article's four static JPEGs at increasing rank already show the _result_ of truncating the SVD; what they cannot show is the continuous transition between them — exactly where a reconstruction becomes legible, and how abruptly. Sweeping the rank slider turns the cited Eckart-Young theorem from an assertion into an observed fact, and a log-scale singular-value plot ties "the tail is tiny" directly to "the picture looks fine."

```javascript
::: js SvdImageCompression
160, 120, 40, 6
svd2
autoPlay, allowPause, autoPauseOnScroll, allowFullscreen, openControls, h=180
:::
```

### Implementation

Two constraints shaped the design. First, the source image is drawn procedurally into an offscreen canvas (a gradient, a circle, a bar, and text) rather than loaded from the article's remote photo, since loading a cross-origin image would taint the canvas and make `getImageData` throw. Second, there is no full SVD solve: the top-$r$ singular triplets are extracted one at a time via power iteration with deflation on the residual matrix, animated with a progress readout, after which moving the rank slider is instant because reconstruction is just a cheap partial sum of outer products $\sigma_i u_i v_i^T$.

### Technical Considerations

A "data stored" readout computes $r \cdot (W + H + 1)$ against the original $W \times H$ pixel count, mirroring the article's own storage-ratio calculation for its full-resolution photograph. The log-$\sigma_i$ spectrum plot draws a vertical marker at the current rank so the reader can directly connect a point on the decaying spectrum to the visual quality of the corresponding reconstruction.