[RFC]feat(Avatar): Cross Compatible Image Clipping

[bcalvery]

How to accomplish Cross Platform Compatible Image Clipping
(for Avatar)

Problem description

The desired visual treatment for the Avatar in Teams is to have the background show through the gap between the "presence" icon and the image. Currently in Teams we fake this by passing the background color to the avatar so it can draw a correctly-colored circle behind the presence indicator. If you change the background color of the element behind the avatar you can see this trickery:

(current on left, desired on right)

The current approach is a hack. It works only with solid color behind the avatar. A gradient, image, or video background will reveal the border around the presence indicator. Passing in the background color also introduces excessive css and the possibility of bugs. It is also limited to round presence indicator (badge?). Furthermore, the current person avatar is a circle which is accomplished using border-radius (and a group is a square with rounded corners, also done via border-radius). This breaks down further when you consider the bot avatar is hexagonal, which can't be accomplished with border-radius, and the shape of the presence icon is also limited to a circle (or rounded square).

Solution?

An obvious solution for this is the CSS "clip-path" property. However it is not implemented in IE/Edge.

With CSS clip-path not being an option, I think we could still make a cross-platform solution by rendering the avatar image within an svg as the background of a shape. The shape could even be included as part of the theme. It is even conceivable that we could render the presence icon within the same svg, like this:

<svg …>  
    <path d="{avatar shape/path from theme (influenced by type, size, etc)}"  
          fill="url({magically put person,group,bot image here})"></path>  
    <path d="{presence shape/path from theme (influenced by state, size, etc)}"  
          fill="{color influenced by state}"></path>  
</svg>

With this approach we could hopefully systematically render more complex shapes for the avatar and the presence indicator, with the background showing through, a la:

I'm working in a local branch trying to make a proof of this, but how to render an inline svg and pass in the image in a usable way are at the outer boundaries of my skill. I'd like to know if this seems feasible and I'll take any input on this. Thanks.

[levithomason]

Now that this approach has been tested, we don't see a feasible way to do this. The difficulties were browser support and passing paths around in the theme.