SVGFonts

This page is build from suggestion of Jeff Muizelaar on Implement SVG Font bug, Thanks to him.

A technical comparison of WOFF vs. SVG formats

WOFF fonts

what is it ?

WOFF is essentially a wrapper that contains sfnt-based fonts (TrueType, OpenType, or Open Font Format) that have been compressed using a WOFF encoding tool to enable them to be embedded in a web page. The format uses zlib compression (specifically, the compress2 function), typically resulting in a filesize reduction from TTF of over 40%. (source: Wikipédia)

W3C Specification

WOFF file Format 1.0

WOFF Features

• Meant to be used in a flow of text in an HTML document
• Pixel perfect with a correct render engine
• Essentially the same features than Truetype or Opentype fonts, but compressed and with metadata, to be embedded on the web as a "package" file, in a similar way than an image.
• can be used for regular text through @font-face
• can have metadata
• stylised with CSS
• kerning
• hinting
• word spacing
• text decoration
• overflow
• can receive SVG filters through Mozilla CSS-SVG filters hack
• no DOM access to glyphs or subsets
• not meant to be animated
• not meant to be used as a drawing element in a vector context (no alignment, transform, etc.)
• concise spec, so easy to implement

Typical size

With @font-face generator, the DejaVu font converted to WOFF result in a 23,6 Kio file.

SVG fonts

what is it ?

All versions of the SVG 1.1 specification, including the SVGT subset, define a font module, allowing the creation of fonts within an SVG document. The SVG specification allows for CSS to be applied to SVG documents in a similar manner to HTML documents, and the @font-face rule can be applied to text in SVG documents. (source: Wikipédia)

W3C Specification

SVG 1.1 Fonts module SVG Tiny 1.2 Font module

SVG Fonts Features

• Sub-set of the Scalable Vector Graphics specification. Meant to be used in a vector design context with all SVG features and others modules.
• Absolute coordinates, most of the time not pixel perfect.
• can be embeded in a SVG file as a DOM element among others without adding or linking more files (SVG as a "document" format).
• DOM access to glyphs or subsets
• fully editable in a text editor, with human-readable tags
• can be used for regular text through @font-face, but not meant to
• can be stylized with CSS
• can have metadata
• kerning
• word spacing
• text decoration
• can be animated
• can receive gradients
• can be put along a path
• can receive SVG filters
• no hinting
• no overflow (but planed for SVG 2.0)
• specification is very large, so it's difficult to implement, and can introduce security problem (ex : <iframe> in a <glyph> tag) : have to be scoped.

Typical size

With @font-face generator, the DejaVu font converted to SVG result in a 52,5 Kio file (uncompressed). Compressed with Inkscape to produce a .svgz format, it result in a 579 octets file (but it may be out of specification) !

A comparison of the tools available for creating SVG vs WOFF fonts

WOFF creation tools

Most of the time, a WOFF file is obtained through a converter tool

• FontForge (FOSS font editor tool)
• sfnt2woff command line tool
• The python command line woffTools used with TTX/FontTools.
• Font Squirrel on line converter : @font-face generator

SVG Fonts creation tools

SVF Font can be obtained from converters, but they also come from creation tools (textual or graphical).

• any text editor
• FontForge (FOSS font editor tool)
• Inkscape (FOSS SVG authoring tool)
• Font Squirrel on line converter : @font-face generator

An estimation of the added code complexity required

for implementing SVG fonts

Said simply, it seems important.

Maybe we can start with Acid3 compliance. Then SVG Tiny 1.2 Font module, can be a good subset. Ultimately, Mozilla had once claimed to target the full SVG 1.1 Fonts module implementation.

But part of the spec is already implemented.

(--yagraph : I have no real skill for such an estimation, so if you know more, please precise)

An estimation of the additional security risk of implementing SVG fonts

As Borris Zbarsky points out "Once you put an <iframe> in a glyph, all sorts of issues arise". SVG is powerful, so security holes can be proportionally important.

But SVG Fonts do not introduce particularly more dangerous behaviors the the rest of the SVG Spec. After all, we can put an <iframe> in any <path>, and it should not behave more badly than in a <glyph>.

Probably, some features will have to be scoped for security reasons, but iframes in glyph aren't an expected feature of SVG Fonts.

(--yagraph : I have no real skill for such an estimation, so if you know more, please precise)

A suggested subset of SVG to be supported in fonts

SVG Tiny 1.2 Font module can be a good starting subset.

Part of the spec is already implemented.

Most important elements for a good start :

• text-decoration (bug report).
• kerning
• word spacing
• font
• glyphs
• glyph-name
• missing
• d
• unicode
• lang

A list of use-cases for SVG fonts

that are not well supported by existing technologies

• Fancy, animated titles and presentation on the web, keeping semantic, without any @font-face linking (here is a mostly working example, rely on WOFF to compensate lack of SVG Fonts in Firefox, and here is another, but text is converted to path).
• Produce a SVG document with some text in Inkscape, Adobe Illustrator, or any SVG authoring tool, and render it correctly within Firefox.
• Sozi support without killing semantic
• Typism support
• Could be used for any web-based typographic or typing game with SMIL or Javascript (potential example source (good luck to start such a project with no DOM access !))

As Erik Dahlström (Opera) listed here, SVG Fonts :

• Provides simple and manipulable graphics that can help in preserving text as text while maintaining the same visual appearance
• Crossplatform, crossbrowser, with exact metrics and rendering specified by the SVG specification - e.g very useful for designing tests, or for platforms where you can't install fonts as a user
• Easy DOM access to glyph outlines (path data)
• SVG Fonts are fully editable in a text editor
• The path data syntax is more expressive than what e.g WOFF/OTF/TTF fonts allow
• Can be "misused" to do specialized stroking (e.g chain fonts, roads or railroad tracks) - granted, this is also true for other kinds of fonts.