Extension of OpenType to allow multicolor, animated SVG glyphs while reusing the OpenType layout facilities.
Group's public email, repo and wiki activity over time
Note: Community Groups are proposed and run by the community. Although W3C hosts these
conversations, the groups do not necessarily represent the views of the W3C Membership or staff.
The implementation of SVG glyphs for OpenType in Firefox is well known. Recently however with the Windows 10 Anniversary Update, I noticed that Microsoft Edge 14 also now supports them!
Unfortunately, there is currently a scaling bug which makes each SVG glyph twice as big as it should be. But I am sure that will be fixed pretty soon. Compare these SVG glyphs vs. inline SVG, in Firefox and then in Edge 14.
A little digging reveals even better news – this isn’t an Edge-specific update. Instead DirectWrite and Direct2D have been updated to support SVG in OpenType (also the Google CBDT colored PNG glyphs and the Apple sbix colored raster format. (This is in addition to the existing COLR/CPAL support that has been there since Windows 8.1).
Amusingly, this means that Edge 14 has better support for the Google-originated CBDT fonts than Google Chrome itself has, due to a bug in the Chrome OpenType sanitizer which rejects CBDT fonts for not having a glyf table. This means that Chrome will currently only display CBDT fonts that are installed, not ones loaded by @font-face.
The SVG in OpenType final report was adopted by ISO SC29 WG11 as part of Open Font Format (OFF) version 3. The OpenType specification, which has the exact same technical content as the OFF specification, has also been updated to reflect this.
There were some technical changes in the course of standardization, so the OpenType specification should be consulted as the definitive reference:
If you have any questions, please contact the group on their public list: public-svgopentype@w3.org. Learn more about the SVG glyphs for OpenType Community Group.
As a way to experiment with new technologies ahead of their implementation and widespread deployment, shims can show us the future, today. colorfont.js is a shim for HTML pages, which lets you retain semantics and accessibility (no duplicated text strings in the HTML source, just a simple class) while providing multicolored font rendering (adding the extra strings, extra fonts and alignment behind the scenes). Check it out!
Yes, this has the disadvantage that individual component fonts are still required. It has the advantage that the multiple colors are specified using CSS, not baked into the font. An OpenType SVG glyph solution must also be restylable via CSS.
Ana Isabel Carvalho and Ricardo Lafuente will be presenting a colorfont workshop at Libre Graphics meeting in Vienna.
Here is an SVG font for emoji, created by Pagefire. This is an SVG 1.1 Full font. It simply has multiple paths, which include gradient fills, for each glyph. Apart from that it is a standard Unicode font (Unicode added emoji in Unicode 6.0).
In this image, the font is being displayed in Batik 1.7:
Edit: thought it was obvious but just in case: those are scalable, vector glyphs, not a raster image (or worse, a bunch of raster images at 10,11,12,13,14 etc px high)
Sairus Patel (Adobe) met with the SVG WG at their Mountain View f2f meeting, hosted by Microsoft, to discuss SVG glyphs in Opentype.
Topics of discussion included ways to specify glyphs in an OpenType table,animation, shared resources, timelines, security and scripting. The benefits of SVG2 features such as non-scaling stroke and parameterisable colors were also discussed. The possibility of hinting (perhaps using Type1-style hints) was also covered.
