Shipping in Chromium 98 (currently in beta) is support for COLRv1 Color Gradient Vector Fonts. This is a pretty exciting addition, I must say!
COLRv1 enables powerful 2D graphics glyph definitions (gradients, transforms), supports variations, and reuses existing glyph contour definitions.
Previous color font formats embed bitmap files into the OpenType font containers. They do not scale with high quality and have a large binary size. OpenType SVG embeds vectors and scales better but requires complex parsers and rasterisers and does not interact with OpenType variations.
Instead of embedding bitmaps for emoji or entire SVGs, COLRv1 contains shapes vector glyphs that can be layered on top of each other. This allows shape reuse and results in smaller-sized fonts.
🗓 Back in 2013, Windows 8.1 was the first to use a COLR Vector Font to render emoji. In this illustration, you can see several layers that make up the emoji on the right:
The Noto Color Emoji Font is already available as a COLRv1 variant, and is used in this demo that shows an emoji picker:
~
Do note that COLRv1 fonts support more than just emoji. It also supports that are purely vector based:
Here’s a reference rendering of that last demo:
~