Visual Guide To SVG Matrix

February 22, 2020

SVG transformation might be really complex and include many operations combined, but you don't necessarily have to put all of them inside the transform attribute separately. There is a matrix function which lets to apply them at once, but... it comes with a cost. You have to take a really deep dive into the docs in order to understand it. And they are (at least to me) not too intuitive.

That's why I created a Visual Guide To SVG Matrix, an app that helps to understand this very useful function better, as all the steps performed by it are presented on the graph. You can move the root figure around the screen and check how the transformation parts are done go on each step.

Feel free to play it, fork the code on GitHub or do other awesome things with it.

Happy hacking!