{"id":946,"date":"2021-04-22T09:01:36","date_gmt":"2021-04-22T09:01:36","guid":{"rendered":"https:\/\/potatodie.nl\/diffuse-write-ups\/?p=946"},"modified":"2021-10-03T08:14:22","modified_gmt":"2021-10-03T08:14:22","slug":"organize-svg-with-use-but-beware-of-transforms","status":"publish","type":"post","link":"https:\/\/potatodie.nl\/diffuse-write-ups\/organize-svg-with-use-but-beware-of-transforms\/","title":{"rendered":"Organize SVG with <use>, but beware of transforms"},"content":{"rendered":"\n

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

Quick solution<\/h3>\n\n\n\n

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

Read on if you want to know how I arrived at this conclusion.<\/p>\n\n\n\n

What’s the test case?<\/h3>\n\n\n\n

The test case is derived from a little game<\/a> I was creating when I encountered these issues.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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. <\/p>\n\n\n\n

That’s what use <\/code>and symbol<\/code> 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):<\/p>\n\n\n

\n
\n
\n HTML <\/div>\n
\n <\/div>\n <\/header>\n