Matrix Approximation using SVD
Interactive demonstration of the Singular Value Decomposition (SVD) matrix approximation method from Mathematics for Machine Learning (Deisenroth, Faisal & Ong), Section 4.6. A color image is separated into R, G, B channels; each channel is treated as a matrix and independently decomposed into rank-1 components. The sum of the first k components reconstructs each channel, and the three are combined to form the color approximation. The sample image is Frederic Edwin Church's The Heart of the Andes (1859), a public-domain painting from the Metropolitan Museum of Art.
Original Image
Reconstructed (k = 50)
Rank-1 Components — Individual σᵢ·uᵢ·vᵢᵀ (Figure 4.11)
Each panel shows a single rank-1 matrix from the SVD expansion. The first few capture the dominant structure; later components add progressively finer detail.
Singular Values σᵢ (Figure 4.12)
The singular values for each R/G/B channel decrease rapidly, which is why a small number of components captures most of the image information. The three channels have similar but not identical spectra.
Mathematical Background
Any real matrix A can be decomposed as A = UΣVᵀ, where U and V are orthogonal matrices and Σ is a diagonal matrix of singular values σ₁ ≥ σ₂ ≥ ... ≥ σᵣ ≥ 0. The matrix can be written as a sum of rank-1 matrices:
The rank-k approximation Aₖ keeps only the first k terms: Aₖ = Σᵢ₌₁ᵏ σᵢ uᵢ vᵢᵀ. By the Eckart–Young theorem, this is the best rank-k approximation of A in both the spectral and Frobenius norms.
For a color image, the process is applied independently to each of the R, G, and B channels. Each channel yields its own set of singular values and singular vectors, and the three reconstructed channels are combined to form the color approximation. Because the three channels have similar but not identical singular value spectra, the rank-k truncation may affect color fidelity before it affects overall image structure.
Each term σᵢ uᵢ vᵢᵀ is itself a grayscale image (a rank-1 matrix). The early terms capture the overall brightness and large-scale structure, while the later terms add fine details and edges. Because σᵢ decreases rapidly, a small k can produce a recognizable image with far fewer values than the original matrix.
Reference: Deisenroth, M.P., Faisal, A.A., Ong, C.S. Mathematics for Machine Learning, Section 4.6 "Matrix Approximation", Figures 4.11–4.12. Cambridge University Press, 2020. Freely available at mml-book.github.io.
Image: Frederic Edwin Church, The Heart of the Andes (1859). Oil on canvas, 168 × 303 cm. Metropolitan Museum of Art, New York. Public domain. Wikipedia.