Tuesday, 20 August 2013

SVG-In-OpenType Progress Update

TypeCon is coming up and there's going to be a discussion there about competing proposals for advanced glyph rendering, especially coloured glyphs. That was an incentive for me to knuckle down over the last couple of days and fix some issues in our implementation of the Mozilla-Adobe proposal that adds an "SVG" OpenType table to render glyphs in SVG format.

I had to update our implementation from our original prototype to use the format defined by the merged Adobe-Mozilla proposal. Then I had to track down a bug in the calculation of glyph extents for SVG glyphs --- this turned out to be a generic bug affecting any font with egregious glyph extents, so I'm glad we've caught it. The last and most interesting part of the Gecko work was to enable animation in SVG glyphs. This is tricky because we need to map from a font whose glyphs have changed back to all documents and text that using that font, so we can ensure the text is properly repainted, and we've never needed this mapping before. gfxFont.cpp is gnarly but the code worked out OK.

Creating fonts with SVG glyphs has required hacky scripts so far, and I was getting tired of that, so before I did the Gecko changes I wrote a small Web app to help: SVG OpenType Workshop. You can open an existing OTF/TTF font file (sorry, no WOFF support yet), create/edit an SVG table document, see the results on (editable) sample text live as you type (generating a new font file at every keystroke), and save the generated font. I found it very useful, and it shows that you can have live font editing in Web apps without an SVG font DOM or other dedicated browser APIs. To render the fonts, the application requires browser support for the SVG-OT draft mentioned above, so for now only experimental Firefox builds will work.

Check out this screencast of animated glyphs in action.


  1. The screencast made me think of recent news `Mozilla kills the tag` :)

  2. Why OTF and not WOFF?

    1. All this stuff works in WOFF, because it's easy to convert between OTF and WOFF. My app doesn't handle WOFF directly because I haven't had time to write that conversion code yet.

  3. Hi!

    Really great tool! I'm trying to use it for a Masters project I'm working on and I was just wondering how do you know the glyph ID? I'm also getting a problem where the SVG Glyph sits directly below the Opentype Glyph?

    If you could drop me an email to talk about this that would be fantastic! hello[@]thombaker.co