On dispose d'un carré comme ci-dessous, centré sur l'origine :

On aimerait ensuite obtenir une figure telle que la suivante :

Sur cette figure, le carré vert est obtenu comme translaté du carré rouge par le vecteur \( \overrightarrow{u}(50,60) \). On fait ensuite subir une rotation de ce carré vert autour du point \( \Omega( 50; 60 ) \).

Pour traduire cela, on utilisera le code ci-dessous.
Le point à remarquer est que le centre de rotation indiqué dans le code du carré bleu n'est pas le point \( \Omega \) mais le point de coordonnées (0,0). Une façon de comprendre ceci est d'appliquer les transformations indiquées de droite à gauche : on fait d'abord subir une rotation du carré rouge autour de l'origine, puis on translate le résultat.

On peut également traduire plus directement le descriptif initial comme suit. Le centre est cette fois celui indiqué initialement, on a écrit les deux transformations de droite à gauche.

On peut aussi ici décomposer de la façon suivante :

• Le carré rouge est identifié avec un attribut id.
• Le carré vert est défini comme translaté du carré rouge et lui-même identifié.
• Le carré bleu est alors défini à partir du carré vert, sans référence directe au carré rouge.

En fait, les transformations en svg agissent sur le repère plutôt que sur les objets représentés. Savoir cela permet parfois de mieux saisir le comportement obtenu.

Ainsi si l'on reprend le premier code utilisé ci-dessus pour le carré bleu :

1. Le repère initial R subit une translation de vecteur \( \overrightarrow{u}(50; 60) \).
2. On travaille donc à partir de là dans un repère R' dont l'origine (0;0)_R' a pour coordonnées (50;60)_R dans le repère initial.

ce qui explique que la rotation qui suit se fasse autour du point (0;0) : il s'agit des coordonnées dans R'.