It all started late in 2009. The Adobe Type Team pointed to the fact that Unicode was moving towards standardizing emoji (emoticons common among Japanese mobile providers). They asked: How can we get this into fonts?

Preview of an SVG-in-OT version of Trajan.

In the words of the inimitable Taro Yamamoto of Adobe Type, Japan, considering “the rather active and colorful nature of emoji,” we could not use Compact Font Format (CFF) or TrueType outlines. We needed a graphics format capable of richer expressiveness.

At the time, Flash was central to Adobe’s vision for mobile, so we planned to add a multimedia table to OpenType that could represent colored animated glyphs in Flash (SWF) or other media formats. Embedded SWF descriptions would be played within a security sandbox in Flash. We christened the table with the four-character tag ‘MUME’—a contraction for multimedia—and had fun with its pronunciation. Should it be mummy or moo me?

We never decided on that detail, because, since then, instead of moving forward with multiple media options, we converged on a single open standard format in which to define the glyphs: Scalable Vector Graphics (SVG), a part of HTML5. The table tag was simply ‘SVG ’ (note the trailing space). In October 2011, a W3C community group was formed to drive the project. Most of the specification work has taken place within the group, with help from the larger font community, including tool vendors. The work will be formally presented for font standardization in January 2014 at the Moving Picture Experts Group (MPEG) meeting in San Jose, California.

See it in action

Mozilla has been a major player on several fronts. Their Firefox browser implementation of SVG-in-OT in September 2012 was the first such, and the Firefox operating system is the first OS—and mobile OS—to support this format.

Mozilla created a Gecko Emoji SVG-in-OT font using graphics from the Phantom Open Emoji project. Take a look at it with Firefox 26, in which SVG-in-OT support is enabled by default. (Firefox 26 is currently in the Aurora stage of release, and will move to the Beta and Release stages in upcoming weeks. Download FirefoxAurora on any platform. Don’t worry—FirefoxAurora will peacefully co-exist with your release version of Firefox.)

Check out the color gradients on the penguin and blowfish!

Beyond emoji

While emoji may have been the precipitating use case for the technology, we envision that display type—and perhaps even icon fonts—may surpass emoji as compelling uses of SVG-in-OT. For example, the Trajan Pro text shown above was created to appear incised using SVG’s gradient facilities. This shows what can be expressed in an SVG-in-OT font and is rendered here as a PNG file to display better in all browsers.

Color palettes will allow for light-background and dark-background versions, and optional animations could subtly change the colors or angle of a light source. SVG also has a powerful equivalent to hinting. Stay tuned—there’s much more to come on these and other exciting developments in future posts.

Sairus Patel is lead of Adobe’s Core Type Technologies team and works on the OFF and OpenType standards. He’s been a type techie at Adobe for over twenty years.