Organize SVG with <use>, but beware of transforms

Organizing SVG files with use and symbol elements offers many advantages, see for instance Sara Soueidan’s article. I did encounter some quirks though, especially with Safari, when using transforms in animations.

Quick solution

Let Greensock handle transformOrigin for you and don’t use the x and y attribute on <use>. Set a transform instead.

Read on if you want to know how I arrived at this conclusion.

What’s the test case?

The test case is derived from a little game I was creating when I encountered these issues.

The above SVG image, exported from Illustrator (4.37 kB) contains four similar crowns. Three encircled at the bottom (representing coins) and one on the head of the figure at the top. It would be nice to use the same code for each crown, instead of repeating the full graphic in the SVG file.

That’s what use and symbol are meant for. This would not only minimize the file size, it would also be more maintainable, and more semantic. Here’s a more structured SVG (only 1,87 kB):

<svg version="1.1"
    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 430">
    <defs>
        <symbol id="crown" viewBox="0 0 100 100" width="100" height="100" style="stroke-width: .8;">
            <rect x="34.7" y="65.4" width="30.2" height="7.8"/>
            <rect x="34.7" y="73.2" width="30.2" height="2.7"/>
            <circle cx="40.1" cy="69.2" r="1.5"/>
            <circle cx="50" cy="69.2" r="1.5"/>
            <circle cx="59.9" cy="69.2" r="1.5"/>
            <polygon points="34.7,65.4 64.9,65.4 73.9,37.2 58.9,48.7 49.9,29.1 40.8,48.7 26.1,37.2 "/>
            <circle cx="26.1" cy="37.2" r="4.9"/>
            <circle cx="49.9" cy="29.1" r="4.9"/>
            <circle cx="73.9" cy="37.2" r="4.9"/>
        </symbol>
        <symbol id="coin" style="stroke: inherit; fill: inherit;" viewBox="0 0 100 100">
            <circle cx="49.1" cy="50.5" r="40.8"/>
            <use href="#crown"/>
        </symbol>
    </defs>
    <g id="Coins" transform="translate(40, 300)" style="fill:none;stroke:#0080A4;">
        <use href="#coin" width="100" height="100"/>
        <use href="#coin" x="92" width="100" height="100"/>
        <use href="#coin" x="184" width="100" height="100" id="special_coin"/>
    </g>
    <g id="Crown_Pipo" style="fill:#0080A3;stroke:#89CAB5;stroke-width:2;">
        <circle cx="190.08" cy="176.96" r="100.96"/>

        <ellipse transform="matrix(0.1602 -0.9871 0.9871 0.1602 -18.7071 330.942)" cx="185.13" cy="176.46" rx="43.88" ry="43.88"/>
        <circle cx="175.08" cy="169.23" r="8.58"/>
        <polygon points="146.89,186.92 156.74,201.43 70.44,238.69 	"/>
        <path d="M269.71,238.69l-23.86-35.34l-88.71,37.14c0,0,2.49,15.2,11.81,35.22"/>
        <path d="M162.58,214.1c0,0,22.31,6.21,29.21-22.72"/>

        <use href="#crown" transform-origin="50px 50px" transform="translate(160, 38) scale(2.4) rotate(16)"/>
    </g>
</svg>

The last coin was given an id special_coin, in order to transform (or animate) that coin with Greensock:

gsap.to('#special_coin', {
    transformOrigin: "50% 50%",
	scale: 1,
    rotate: 45,
    duration: .4
});

One of the things that makes Greensock indispensible is it handles transform-origin for you. Doing it yourself is hard. I managed to do it in the last use (in Crown_Pipo), but only by fiddling the translation.

Quirks

All is well, until you check how things look on iPhone.

The first image shows how it is intended, in FireFox. The other Safari on iPhone. Three things have gone wrong. 1. The crown has disappeared from the head of the fellow with the nose. 2. The most right coin has transformed out of the picture and 3. The color of the coins don’t seem right. You may check the test page yourself.

Shadow DOM

Apart from that, if you inspect the code in Firefox with dev tools you’ll see that the shadow DOM doesn’t align with the real DOM, which is confusing.

The fix

The solution is to omit the x attribute on the use element and replace it with a transform instead. Actually it’s not so strange browsers get confused, since the x and y attributes are a shorthand for a transform (a translation). The order of transforms matters and may differ from browser to browser?

Here’s my final SVG, in which I also omitted the <defs> tag, because symbols don’t need that:

<svg version="1.1"
    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 430">
    <symbol id="crown" width="100" height="100" style="stroke-width: .8;">
        <rect x="34.7" y="65.4" width="30.2" height="7.8"/>
        <rect x="34.7" y="73.2" width="30.2" height="2.7"/>
        <circle cx="40.1" cy="69.2" r="1.5"/>
        <circle cx="50" cy="69.2" r="1.5"/>
        <circle cx="59.9" cy="69.2" r="1.5"/>
        <polygon points="34.7,65.4 64.9,65.4 73.9,37.2 58.9,48.7 49.9,29.1 40.8,48.7 26.1,37.2 "/>
        <circle cx="26.1" cy="37.2" r="4.9"/>
        <circle cx="49.9" cy="29.1" r="4.9"/>
        <circle cx="73.9" cy="37.2" r="4.9"/>
    </symbol>
    <symbol id="coin" style="stroke: inherit; fill: inherit;">
        <circle cx="49.1" cy="50.5" r="40.8"/>
        <use href="#crown"/>
    </symbol>
    <g id="Coins" transform="translate(40, 300)" style="fill:none;stroke:#0080A4;">
        <use href="#coin"/>
        <use href="#coin" x="92"/>
        <use href="#coin" id="special_coin" transform="translate(184, 0)"/>
    </g>
    <g id="Crown_Pipo" style="fill:#0080A3;stroke:#89CAB5;stroke-width:2;">
        <circle cx="190.08" cy="176.96" r="100.96"/>
        <ellipse transform="matrix(0.1602 -0.9871 0.9871 0.1602 -18.7071 330.942)" cx="185.13" cy="176.46" rx="43.88" ry="43.88"/>
        <circle cx="175.08" cy="169.23" r="8.58"/>
        <polygon points="146.89,186.92 156.74,201.43 70.44,238.69 	"/>
        <path d="M269.71,238.69l-23.86-35.34l-88.71,37.14c0,0,2.49,15.2,11.81,35.22"/>
        <path d="M162.58,214.1c0,0,22.31,6.21,29.21-22.72"/>

        <use href="#crown" id="king"/>
    </g>
</svg>

I also handed the crown on the figure’s head over to Greensock:

gsap.set('#king', {
    transformOrigin: "50% 50%",
    scale: 2.4,
    rotate: 16,
    translateX: 160,
    translateY: 38
})

Do the test

You may check the final test case for your device yourself.