Does it parse my transform string?

No. This first version generates a fixed matrix visualization.

Does it change an input SVG?

No. It generates a standalone explanatory SVG.

It gives a concrete visual reference for how matrix translate, skew, and scale affect SVG geometry.

SVGKit

← Browse all toolsSVG Matrix Visualizer

Edit

SVG Matrix Visualizer

Generate an SVG diagram comparing original and transformed geometry.

SVG Matrix Visualizer

Generate an SVG diagram comparing original and transformed geometry.

bytes: 795
characters: 795
format: SVG

Preview

<svg xmlns="http://www.w3.org/2000/svg" width="420" height="260" viewBox="0 0 420 260" role="img" aria-label="Transform matrix visualizer"><rect width="420" height="260" rx="24" fill="#f8fafc"/><path d="M50 210H370M70 230V30" stroke="#cbd5e1" stroke-width="2"/><g opacity="0.35"><rect x="110" y="80" width="120" height="80" rx="10" fill="#94a3b8"/></g><g transform="matrix(1 0.25 -0.15 1 42 18)"><rect x="110" y="80" width="120" height="80" rx="10" fill="#14b8a6"/><path d="M124 144h92" stroke="#0f766e" stroke-width="8" stroke-linecap="round"/></g><text x="32" y="40" font-family="Arial, sans-serif" font-size="20" font-weight="700" fill="#0f172a">Transform matrix</text><text x="32" y="64" font-family="Arial, sans-serif" font-size="14" fill="#475569">matrix(1 0.25 -0.15 1 42 18)</text></svg>

Page context

Where SVG Matrix Visualizer fits

SVG Matrix Visualizer generates an SVG diagram comparing original and transformed geometry.

Matrix preview

The generated SVG shows an original rectangle and a matrix-transformed rectangle with the matrix value printed in the artwork.

Boundary

It visualizes a fixed example matrix. A full matrix calculator with user controls can build on this page later.