SVG sprites transforms

Since working with SVG transforms can get difficult, especially setting transform origin, I often use GreenSock to avoid transform trouble.

To make a series of icon elements rotate or scale around its center, for example, you could code

gsap.set(icons, {
    transformOrigin: "50% 50%",
});

gsap.to(icons, {scale: 2, rotation: 90});

Here’s a more elaborate example:

See the Pen Set SVG sprites transform origin with GreenSock by potatoDie (@potatoDie) on CodePen.

Still there are occasions when the troubles I thought were conquered nightmarishly reappear. For instance if we use sprites in an external file and Vue.

Are the sprites loaded yet?

Suppose we want to use a sheet of sprites for the graphics in a game. This means we have a separate SVG file with a bunch of graphics, probably as symbols. Here’s a simple example with two chess pieces:

<svg
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   viewBox="0 0 200 200"
   height="200"
   width="200">
  <defs
     id="defs4254">
    <symbol
       id="rook"
       viewBox="0 100 100 100">
      <path
         d="m 10,110 v 20 h 10 v 40 H 10 v 20 H 90 V 170 H 80 V 130 H 90 V 110 H 70 v 10 H 60 V 110 H 40 v 10 H 30 v -10 z" />
    </symbol>
    <symbol
       id="bishop"
       viewBox="100 0 100 100">
      <path
         d="M 150 10 C 130 20 100 40 130 70 L 110 70 L 110 90 L 190 90 L 190 70 L 170 70 C 200 40 170 20 150 10 z M 145 30 L 155 30 L 155 50 L 145 50 L 145 30 z " />
    </symbol>
  </defs>
</svg>

In a Vue component you could import the sprite sheet, pick the symbol you like, refer to it in a use element and let GreenSock handle the transform for you.

Unfortunately this brings back the transform origin quirk. During Vue’s mounted hook the sprite sheet may not be loaded yet and setting the tranform origin doesn’t work, even though the width and height of the use tag may be set.

To solve this either set the transform origin in SVG units. Or wait till the sprite file is loaded and then set transformOrigin to "50% 50%".

Safari problems

It appears Safari doesn’t take the x and y value of the use element in account, when setting the transformOrigin. In the above Codepen you see in Safari that the rooks do not animate on their spot. I fixed it for the bishops, wrapping the use elements in a group with a transform, so the x and y coordinate of the use are zero.