Skip to toolbar

Community & Business Groups

SVG glyphs for OpenType Community Group

Extension of OpenType to allow multicolor, animated SVG glyphs while reusing the OpenType layout facilities.

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.

final reports / licensing info

date name commitments
SVG Glyphs in OpenType Specification Licensing commitments

Chairs, when logged in, may publish draft and final reports. Please see report requirements.

Publish Reports

Chromatic fonts – implementation roundup

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!

Check to see what your browser supports!

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.

OpenType spec adopts SVG in OpenType proposal

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:

The community group final report is now mostly of historical interest.

Call for Final Specification Commitments for SVG Glyphs in OpenType Specification

On 2013-10-09 The SVG glyphs for OpenType Community Group published the following specification:

This is a call for Final Specification Commitments. To provide greater patent protection for this specification, participants in the SVG glyphs for OpenType Community Group are now invited make commitments under the W3C Community Final Specification Agreement by completing the commitment form. Current commitments are listed on the Web. There is no deadline for making commitments.

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.

Workaround: colorfont.js

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.

Use case: coloured emoji

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:

SVG glyphs for emoji

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)

Discussion at SVG WG meeting, Mountain View CA

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.

(Full minutes)