Question

So I’m a bit baffled with the SVG coordinate system. I’m doing a project that converts SVG objects into polygons (which are then shown in OpenGL). I have all the code that takes rects, circles, paths (with curve approximation), etc and turns them into a set of points for each of the objects. This is all working great so far.

I’m now at the stage where I’m implementing transformations. I have all my matrix functions written and ready to go, but I’m confused by the relationship between translate(x,y) and any 0,0-centric operation (rotation and scaling mainly).

So let’s say we have an object at 0,0. rotate(45, 100, 100) is equivalent to translate(100, 100) rotate(45) translate(-100, -100), but if I move my object to 100,100 and the rotation is still applied at 0,0 doesn’t that mean the center of the rotation actually takes place at -100,-100 relative to the original position of the object?

I guess my question is how does translate affect the object’s coordinate system? It seems that in some cases it’s used to move 0,0 to the specified point without moving the object, and in other cases it’s used to move the object.

Is my understanding of the coordinate system completely flawed?

Answer 1

I think that the SVG specification explains coordinate transformations pretty clearly. Every transformation means multiplying the current coordinates with a 3×3 matrix. The most generic transformation that you can specify in the transform attribute is a custom matrix(...), while all the other kinds of transformations (translate, rotate, scale, skew) are just easy to use shortcuts. In the end, everything ends up as a matrix.

Combining several transformations is simple, it just means that each transformation matrix is multiplied with the others, in order, and keeping track of all the transformations means just remembering the final 3×3 matrix obtained from this multiplication, and computing the final coordinates of an element means just multiplying the 3×1 matrix of the initial coordinates with that 3×3 matrix.

So, my advice is to just work with matrices and forget about manually applying each transformation.