17.1 Introduction

Reliable delivery of fonts is a requirement for SVG. Designers
need to create SVG content with arbitrary fonts and know that the
same graphical result will appear when the content is viewed by all
end users, even when end users do not have the necessary fonts
installed on their computers. This parallels the print world, where
the designer uses a given font when authoring a drawing for print,
and the graphical content appears exactly the same in the printed
version as it appeared on the designer's authoring system.

Historically, one approach has been to convert all text to paths
representing the glyphs used. This preserves the visual look, but
means that the text is lost; it cannot be dynamically updated and
is not accessible. Another approach is to hope that a font with a
given name is available to all renderers. This assumption does not
work well on the desktop and works very badly in a heterogeneous
mobile environment. SVG solves this problem by allowing the text to
be converted to paths, but storing those paths as an SVG font. The
text is retained and remains dynamically modifiable and
accessible.

17.1.1 Describing fonts available to SVG

SVG utilizes an XML version of the WebFonts facility
defined in the "Cascading Style Sheets (CSS) level 2" specification
[ CSS2 ] to reference
fonts. Described fonts may be in a variety of different formats. By
describing key details of the font such as its family name, weight,
whether it is italic and so on, text can continue to use the font
properties without having to explicitly indicate the font that is
to be used for each span of text.

17.1.2 Defining fonts in SVG

One disadvantage to the WebFont facility
to date is that specifications such as [ CSS2 ] do not require support
of particular font formats. The result is that different
implementations support different Web font formats, thereby making
it difficult for Web site creators to post a single Web site using
WebFonts that work across all user agents.

To provide a common font format for SVG that is guaranteed to be
supported by all conforming SVG viewers ,
SVG also defines a font format, in SVG, which uses the same
geometric mechanism for glyphs as is used by the SVG path element.
This facility is called SVG fonts .
SVG implementations must support the SVG font format, and may also
support other formats. WebFonts may be
contained in the SVG document which uses them, or stored in a
separate document (for example, to allow sharing of the same font
by multiple SVG documents).

Taken together, these two mechanisms ensure
reliable delivery of font data to end users, preserving graphical
richness and enabling accessible access to the textual data. In a
common scenario, SVG authoring applications generate compressed,
subsetted WebFonts for all
text elements used by a given SVG document fragment. SVG fonts can
improve the semantic richness of graphics that represent text. For
example, many company logos consist of the company name drawn
artistically. In some cases, accessibility may be enhanced by expressing the
logo as a series of glyphs in an SVG font and then rendering the
logo as a 'text' element which references this
font.

17.2 Overview of SVG fonts

The purpose of SVG fonts is to allow for delivery of glyph
outlines in display-only environments. SVG fonts that accompany Web
pages must be supported only in browsing and viewing situations.
Graphics editing applications or file translation tools must not
attempt to convert SVG fonts into system fonts.

SVG fonts contain unhinted font outlines. Because of this, on
many implementations there will be limitations regarding the
quality and legibility of text in small font sizes. For increased
quality and legibility in small font sizes, content creators may
want to use an alternate font technology, such as fonts that ship
with operating systems or an alternate WebFont
format.

Because SVG fonts are expressed using SVG elements and
attributes, in some cases the SVG font will take up more space than
if the font were expressed in a different format which was
especially designed for compact expression of font data. For the
fastest delivery of Web pages, content creators may want to use an
alternate font technology as a first choice, with a fallback to an
SVG font for interoperability.

A key value of SVG fonts is guaranteed availability in SVG user
agents. In some situations, it might be appropriate for an SVG font
to be the first choice for rendering some text. In other
situations, the SVG font might be an alternate, back-up font in
case the first choice font (perhaps a hinted system font) is not
available to a given user.

The characteristics and attributes of SVG fonts correspond
closely to the font characteristics and parameters described in the
"Fonts"
chapter of the "Cascading Style Sheets (CSS) level 2" specification
[ CSS2 ]. In this
model, various font metrics, such as advance values and baseline
locations, and the glyph outlines themselves, are expressed in
units that are relative to an abstract square whose height is the
intended distance between lines of type in the same type size. This
square is called the em square and it
is the design grid on which the glyph outlines are defined. The
value of the units-per-em'units-per-em' attribute on the
'font' element specifies how many units
the em square is divided into. Common values for other font types
are, for example, 250 (Intellifont), 1000 (Type 1) and 2048
(TrueType, TrueType GX and Open-Type). Unlike standard graphics in
SVG, where the initial coordinate system has the y-axis pointing
downward (see The
initial coordinate system ), the design grid for SVG fonts,
along with the initial coordinate system for the glyphs, has the
y-axis pointing upward for consistency with accepted industry
practice for many popular font formats.

SVG fonts and their associated glyphs do not specify bounding
box information. Because the glyph outlines are expressed as SVG
path elements, the implementation has the option to render the
glyphs either using standard graphics calls or by using
special-purpose font rendering technology, in which case any
necessary maximum bounding box and overhang calculations can be
performed from analysis of the path elements contained within the
glyph outlines.

An SVG font can be either embedded within the same document that
uses the font or saved as part of an external resource.

Here is an example of how you might embed an SVG font inside of
an SVG document.

The default horizontal advance after rendering a glyph in
horizontal orientation. Glyph widths are required to be
non-negative, even if the glyph is typically rendered
right-to-left, as in Hebrew and Arabic scripts. If the attribute is not specified, the effect is as if
aThelacuna value of "0" was
specified.is'0'
.Animatable : no.

Each 'font' element must have
a 'font-face' child element which describes
various characteristics of the font.

17.4 The 'glyph' element

The 'glyph' element defines
the graphics for a given glyph. The coordinate system for the glyph
is defined by the various attributes in the 'font' element.

The graphics that make up the 'glyph' consist of a single path data specification within the
d'd' attribute.

One or more characters
indicating the sequence of characters which corresponds to this
glyph. If a single character is provided, then this glyph
corresponds to the given Unicode character. If multiple characters
are provided, then this glyph corresponds to the given sequence of
Unicode characters. One use of a sequence of characters is
ligatures. For example, if unicode="ffl" , then the given glyph will be
used to render the sequence of characters "f", "f", and "l".

It is often useful to refer to characters using XML character
references expressed in hexadecimal notation or decimal notation.
For example, unicode="ffl" could be
expressed as XML character references in hexadecimal notation as
unicode="&#x66;&#x66;&#x6c;" or in
decimal notation as unicode="&#102;&#102;&#108;"
.

The unicode'unicode' attribute contributes
to the process for deciding which glyph(s) are used to represent
which character(s). See glyph selection rules . If the
unicode'unicode' attribute is not provided for
a given 'glyph' , the glyph cannot be accessed in
SVG Tiny 1.2.Animatable : no.

An optional name for the glyph. Glyph names should be unique
within a font. The glyph names can be used in situations where
Unicode character numbers do not provide sufficient information to
access the correct glyph, such as when there are multiple glyphs
per Unicode character. The glyph names can be referenced in
kerning definitions.Animatable : no.

d = "
path data "

The definition of the outline of a glyph, using the same syntax
as for the d'd' attribute on a 'path' element. See Path data .
See below for a discussion of this attribute.Animatable : no.

arabic-form = " initial |
medial | terminal | isolated "

For Arabic glyphs, indicates which of the four possible forms
this glyph represents.If arabic-form is not specified for a glyph
that requires it, the glyph is taken to be the isolated form and
the initial, medial, and terminal forms will render with
missing-glyph unless separately specified.
Additionally, if initial, medial, or terminal are specified on a
glyph that does not require the arabic-form to be specified, the
arabic-form attribute shall have no effect.Animatable : no.

The attribute value is a comma-separated list of language tags
as defined in IETF Best Current Practice 47 [ BCP 47 ]. For XML content, the glyph can
be used if the xml:lang'xml:lang' attribute exactly matches
one of the languages given in the value of this parameter, or if
the xml:lang'xml:lang' attribute exactly equals a
prefix of one of the languages given in the value of this parameter
such that the first tag character following the prefix is "-". If
the attribute is not specified, then the glyph can be used in all
languages.For example, a glyph suitable for French
(whose lang attribute includes the language tag 'fr') is suitable
for all types of French text (for example, Canadian French,xml:lang="fr-ca"). A
glyph whose lang attribute is specific for Traditional Chinese
(lang includes zh-Hant) is not suitable for Simplified Chinese
(xml:lang="zh-Hanc")orgeneric Chinese (xml:lang="zh").Animatable : no.

The horizontal advance after rendering the glyph in horizontal
orientation. If the attribute is not specified, the effect is as if
the attribute were set to the value of the font's horiz-adv-x attribute.
Glyph widths are required to be non-negative, even if the glyph is
typically rendered right-to-left, as in Hebrew and Arabic
scripts.Animatable : no.

The graphics for the 'glyph'
are specified using the d'd' attribute. The path data within
this attribute must be processed as follows:

Any relative coordinates within the path data specification are
converted into equivalent absolute coordinates

Each of these absolute coordinates is transformed from the font
coordinate system into the text
content element's current coordinate system such that
the origin of the font coordinate system is properly positioned and
rotated to align with the current text position and
orientation for the glyph, and scaled so that the correct 'font-size' is achieved.

The resulting, transformed path specification is rendered as if
it were a 'path' element, using the styling
properties that apply to the characters which correspond to the
given glyph, and ignoring any styling properties specified on the
'font' element or the 'glyph' element.

In general, the d'd' attribute renders in the same
manner as system fonts. For example, a dashed pattern will usually
look the same if applied to a system font or to an SVG font which
defines its glyphs using the d'd' attribute. Many implementations
will be able to render glyphs quickly and will be able to use a
font cache for further performance gains.

Example font01
below contains a font for just three letters - S, V, and G - plus a
missing glyph for all other characters. There is also a kern pair,
to bring the V and the G glyphs closer together. The font,
Anglepoise, was designed by Ray Larabie of Larabie Fonts and is used by
permission.

Example font02
below contains a font for a single character, the Arabic letter
خخ - plus
a space and missing glyph. There are four glyphs for this
character, each corresponding to the same Unicode code point
U+062E. They are distinguished by the values of the arabic-form
attribute. The text string demonstrates each of the four forms.

17.5 The 'missing-glyph' element

The 'missing-glyph' element
defines a graphic to use if there is an attempt to draw a glyph
from a given font and the given glyph has not been defined. The
attributes on the 'missing-glyph'
element have the same meaning as the corresponding attributes on
the 'glyph' element.

17.6 Glyph selection rules

When determining the glyph(s) to draw a given character
sequence, the 'font' element must be searched from its
first 'glyph' element to its last in logical
order to see if the upcoming sequence of Unicode characters to be
rendered matches the sequence of Unicode characters specified in
the unicode'unicode' attribute for the given
'glyph' element. The first successful
match must be used. Thus, if an "ffl" ligature is defined in the
font after the "f" glyph, it will not be used.

17.7 The 'hkern' element

Kern pairs identify pairs of glyphs within a single font whose
inter-glyph spacing is adjusted when the pair of glyphs are
rendered next to each other. In addition to the requirement that
the pair of glyphs are from the same font, SVG font kerning happens
only when the two glyphs correspond to characters which have the
same values for properties 'font-family' , 'font-size' , 'font-style' and 'font-weight' .

An example of a kerning pair are the letters "Va", where the
typographic result might look better if the letters "V" and the "a"
were rendered slightly closer together.

Right-to-left and bidirectional text in SVG is laid out in a
two-step process, which is described in Relationship with
bidirectionality . If SVG fonts are used, before kerning is
applied, characters are re-ordered into left-to-right (or
top-to-bottom, for vertical text) visual rendering order. Kerning
from SVG fonts is then applied on pairs of glyphs which are
rendered contiguously. The first glyph in the kerning pair is the
left (or top) glyph in visual rendering order. The second glyph in
the kerning pair is the right (or bottom) glyph in the pair.

For convenience to font designers and to minimize file sizes, a
single 'hkern' can define a
single kerning adjustment value between one set of glyphs
(sequences and/or ranges of Unicode characters) and another set of
glyphs (e.g., another range of Unicode characters).

The 'hkern'
element defines kerning pairs and adjustment values in the
horizontal advance value when drawing pairs of glyphs which the two
glyphs are contiguous and are both rendered horizontally (i.e.,
side-by-side). The spacing between characters is reduced by the
kerning adjustment. (Negative kerning adjustments increase the
spacing between characters.)

A sequence (comma-separated) of characters and/or ranges of Unicode
characters (see description of ranges of Unicode characters in [
CSS2 ]) which identify
a set of possible first glyphs in the kerning pair. If a given
Unicode character within the set has multiple corresponding
'glyph' elements (i.e., there are
multiple 'glyph' elements with the same unicode'unicode' attribute value, but
different glyph-name'glyph-name' values), then all such
glyphs are included in the set. Comma is the separator character;
thus, to kern a comma, specify the comma as part of a range of
Unicode characters or as a glyph name using the g1'g1' attribute. The total set of
possible first glyphs in the kerning pair is the union of glyphs
specified by the u1'u1' and g1'g1' attributes.Animatable : no.

A sequence of glyph names (i.e., values that match glyph-name'glyph-name' attributes on 'glyph' elements) which identify a set of
possible first glyphs in the kerning pair. All glyphs with the
given glyph name are included in the set. The total set of possible
first glyphs in the kerning pair is the union of glyphs specified
by the u1'u1' and g1'g1' attributes.Animatable : no.

The amount to decrease the spacing between the two glyphs in
the kerning pair. The value is in the font coordinate system.
If the attribute is not specified, the effect
is as if aThelacuna value of "0" was
specified.is'0'
.Animatable : no.

At least one of u1'u1' or
g1'g1' must be provided. At least one of
u2'u2' or g2'g2' must be
provided.

17.8 Describing a font

17.8.1 Overview of font
descriptions

A font description provides the bridge between an author's font
specification and the font data, which is the data needed to format
text and to render the abstract glyphs to which the characters map
- the actual scalable outlines or bitmaps. Fonts are referenced by
properties, such as the 'font-family' property.

Each specified font description is added to the font database so
that it can be used to select the relevant font data. The font
description contains descriptors such as the location of the font
data on the Web, and characterizations of that font data. The font
descriptors are also needed to match the font properties to
particular font data. The level of detail of a font description can
vary from just the name of the font up to a list of glyph
widths.

For more about font descriptions, refer to the font chapter in
the CSS2 specification [ CSS2 Fonts ].

17.8.2 The 'font-face' element

The 'font-face' element is an
XML structure which corresponds directly to the @font-face
facility in CSS2. It can be used to describe the characteristics of
any font, SVG font or otherwise.

When used to describe the characteristics of an SVG font
contained within the same document, it is recommended that the
'font-face' element be a child of
the 'font' element it is describing so that
the 'font' element can be self-contained and
fully-described. In this case, any 'font-face-src' elements within the
'font-face' element are ignored
as it is assumed that the 'font-face' element is describing the
characteristics of its parent 'font' element.

Same syntax and semantics as the
'font-weight' descriptor within an @font-face
rule.
The weight of a face relative to others in the same font family.
Takes on the same values as the 'font-weight' property with
three exceptions:

relative keywords (bolder, lighter) must not be used

a comma-separated list of values may be used, for fonts that
contain multiple weights

an additional keyword, 'all', may be used. 'all' indicates that
the font will match for all possible weights; either because it
contains multiple weights, or because that face only has a single
weight.

The distance from the origin to the top of accent characters,
measured by a distance within the font coordinate system.
If the attribute is not specified, the effect is as if the
attribute were set to the value of the ascent'ascent' attribute. If this attribute
is used, the units-per-em'units-per-em' attribute must also be
specified.Animatable : no.

Same syntax and semantics as the
'ascent' descriptor within an @font-face
rule. The maximum unaccented height of the font within the font
coordinate system.
If the attribute is not specified, the effect is as if the
attribute were set to the difference between the units-per-em'units-per-em' value and the
vert-origin-y'vert-origin-y' value for the
corresponding font.Animatable : no.

Same syntax and semantics as the
'descent' descriptor within an @font-face
rule. The maximum unaccented depth of the font within the font
coordinate system.
If the attribute is not specified, the effect is as if the
attribute were set to the vert-origin-y'vert-origin-y' value for the corresponding
font.Animatable : no.

For horizontally oriented glyph layouts, indicates the
alignment coordinate for glyphs to achieve ideographic baseline
alignment. The value is an offset in the font coordinate system. If
this attribute is provided, the units-per-em'units-per-em' attribute must also be
specified.Animatable : no.

Same syntax and semantics as the
'baseline' descriptor within an @font-face
rule. For horizontally oriented glyph layouts, indicates the
alignment coordinate for glyphs to achieve alphabetic baseline
alignment. The value is an offset in the font coordinate system. If
this attribute is provided, the units-per-em'units-per-em' attribute must also be
specified.Animatable : no.

Same syntax and semantics as the
'mathline' descriptor within an @font-face
rule. For horizontally oriented glyph layouts, indicates the
alignment coordinate for glyphs to achieve mathematical baseline
alignment. The value is an offset in the font coordinate system. If
this attribute is provided, the units-per-em'units-per-em' attribute must also be
specified.Animatable : no.

For horizontally oriented glyph layouts, indicates the
alignment coordinate for glyphs to achieve hanging baseline
alignment. The value is an offset in the font coordinate system. If
this attribute is provided, the units-per-em'units-per-em' attribute must also be
specified.Animatable : no.

The ideal thickness of an underline, expressed as a length
within the font coordinate system. If this attribute is provided,
the units-per-em'units-per-em' attribute must also be
specified.Animatable : no.

The ideal thickness of a strike-through, expressed as a length
within the font coordinate system. If this attribute is provided,
the units-per-em'units-per-em' attribute must also be
specified.Animatable : no.

The ideal thickness of an overline, expressed as a length
within the font coordinate system. If this attribute is provided,
the units-per-em'units-per-em' attribute must also be
specified.Animatable : no.

17.8.3 The 'font-face-src' element

The 'font-face-src' element,
together with the 'font-face-uri' elements described
further down correspond to the 'src'
descriptor within an @font-face rule. (Refer to the descriptions of
the [ @font-face
rule ] and [ 'src'
descriptor ] in the CSS2 specification.)

A 'font-face-src' element
contains a 'font-face-uri' element. The 'font-face-src' element is used for
referencing fonts defined elsewhere.

17.8.4 The 'font-face-uri' element

The 'font-face-uri' element is
used within a 'font-face-src' element to reference a
font defined inside or outside of the current SVG document.

When a 'font-face-uri' is
referencing an SVG font ,
then that reference must be to an SVG 'font' element, therefore requiring the
use of a fragment identifier (see [ IRI ]). The referenced
'font' element can be local (i.e., within
the same document as the 'font-face-uri' element) or remote (i.e.,
within a different document).