Proper scaling

[ShadowLp174]

Scaling is broken af as there are no specfic points to scale the points around.

A possible approach is to calculate the center of every shape and move and scale all children accordingly to this.

This would be incredibly complicated though and might result in lag.

Another approach is the css transform: scale(1.2) rule, which effects have to be explored though

Interesting approach: using the viewbox attribute to set the aspect ratio of the image and enable scaling. Usage in combination with preserveAspectRatio="xMinYMin meet" or maybe better: preserveAspectRatio="xMinYMin slice". Downside: scaling also scales the available space for the engine

https://css-tricks.com/scale-svg/

[ShadowLp174]

Research has revealed that scaling using viewBox and preserveAspectRatio works the best and the easiest. The calculating approach might be implemented for easy components later