There are some ingredients required for embedding a font in SVG. Let's show an example declaration (the one from the specification), and explain the details.
<font id="Font1" horiz-adv-x="1000">
<font-face
font-family="Super Sans"
font-weight="bold"
font-style="normal"
units-per-em="1000"
cap-height="600"
x-height="400"
ascent="700"
descent="300"
alphabetic="0"
mathematical="350"
ideographic="400"
hanging="500">
<font-face-src>
<font-face-name name="Super Sans Bold" />
</font-face-src>
</font-face>
<missing-glyph><path d="M0,0h200v200h-200z" /></missing-glyph>
<glyph unicode="!" horiz-adv-x="300"></glyph>
<glyph unicode="@"></glyph>
</font>
We start with the <font>
element. This bears an id
attribute, to enable it to be referenced via a URI (see below). The horiz-adv-x
attribute determines how wide a character is on average compared to the path definitions of the single glyphs. The value 1000
sets a reasonable value to work with. There are several accompanying attributes that help further define the basic glyph-box layout.
The <font-face>
element is the SVG equivalent of the CSS @font-face
declaration. It defines basic properties of the final font such as weight, style, etc. In the example above, the first and most important to be defined is font-family
, the value of which can then be referenced in CSS and SVG font-family
properties. The font-weight
and font-style
attributes have the same purpose as the equivalent descriptors in CSS. All following attributes are rendering instructions for the font layout engine; for example, how much of the glyphs' overall heights are ascenders.
Its child, the <font-face-src>
element, corresponds to CSS' src
descriptor in @font-face
declarations. You can point to external sources for font declarations by means of its children <font-face-name>
and <font-face-uri>
. The above example states that if the renderer has a local font available named "Super Sans Bold", it should use this instead.
Following <font-face-src>
is a <missing-glyph>
element. This defines what should be displayed if a certain glyph is not found in the font and if there are no fallback mechanisms. It also shows how glyphs are created: By adding any graphical SVG content inside. You can use literally any other SVG elements in here, even <filter>
, <a>
or <script>
. For simple glyphs, however, you can add a d
attribute — this defines a shape for the glyph exactly like how standard SVG paths work.
The actual glyphs are then defined by <glyph>
elements. The most important attribute is unicode
. It defines the unicode codepoint represented by this glyph. If you also specify the lang
attribute on a glyph, you can further restrict it to certain languages (represented by xml:lang
on the target) exclusively. Again, you can use arbitrary SVG to define the glyph, which allows for great effects in supporting user agents.
Two more elements can be defined inside font
: <hkern>
and <vkern>
. Each carries references to at least two characters (attributes u1
and u2
) and an attribute k
that determines how much the distance between those characters should be decreased. The below example instructs user agents to place the "A" and "V" characters closer together than the standard distance between characters.
<hkern u1="A" u2="V" k="20" />