Which svg features can twemoji use?

[12Me21]

Twemoji's svg files have historically used a very restricted featureset. (only simple filled <path>s, <circle>s, and <ellipse>s)

However, there aren't any official guidelines on this.
As a result, a few recently added/edited designs have used unexpected features, which is causing problems with software that doesn't support these. (e.g. my pipeline to build a twemoji font has broken several times, due to new designs using difficult features for the first time)

For example:

• the Hair Pick 🪮 emoji uses strokeed paths, which are not used in any other emoji (Here is an example of this being corrected in the past: 808ed63)

• Shaking Face 🫨, Maracas 🪇, and Wireless 🛜 use clip-path (and the <defs> and <clipPath> tags) which have never been used previously

---

Anyway, I've collected statistics on which tags and attributes are used in twemoji, and (with very few exceptions) they are:

<svg> tag:

• Must be <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">

<path> tag:

• d

<circle> tag:

• cx, cy, r

<ellipse> tag:

• cx, cy, rx, ry
• transform - (optional) should only contain rotate(angle cx cy)

<g> tag:

• (only used for grouping tags of the same color)

All tags:

• fill - (optional) color #rrggbb or #rgb
• opacity - (optional)