Reliable delivery of fonts is considered a critical requirement for SVG. Designers require the ability to create SVG graphics with whatever fonts they care to use and then have the same fonts appear in the end user's browser when viewing an SVG drawing, even if the given end user hasn't purchased the fonts in question. This parallels the print world, where the designer uses a given font when authoring a drawing for print, but when the end user views the same drawing within a magazine the text appears with the correct font.
SVG utilizes the web font facility defined in the "Cascading Style Sheets (CSS) level 2" specification [CSS2] as a key mechanism for reliable delivery of font data to end users. A common scenario is that SVG authoring applications will generate compressed, subsetted web fonts for all text elements used by a given SVG document fragment. Typically, the web fonts will be saved in a location relative to the referencing document.
One disadvantage to CSS2's Webfont facility to date is that CSS2 did not specify particular font formats that were required to be supported. The result was that different implementations supported different web font formats, thereby making it difficult for web site creators to post a single web site that is supported by a large percentage of installed browsers.
To provide a common font format that will exist in all conforming SVG user agents, SVG includes elements which allow for fonts to be defined in SVG.
An SVG font is a font defined using SVG's 'font' element.
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 convert SVG fonts into system fonts. The intent is that SVG files be interchangeable between two content creators, but not the SVG fonts that might accompany these SVG files. Instead, each content creator will need to license the given font before being able to successfully edit the SVG file. The font-face-name attribute indicates the name of licensed font to use for editing,
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 web font 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 web font 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.
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 "Cascading Style Sheets (CSS) level 2" specification [CSS2].
SVG fonts and their associated glyphs do not specify bounding box information. Because the glyph outlines are expressed as SVG graphics 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 graphics elements contained within the glyph outlines.
An SVG font can be either embedded within the SVG document fragment that uses the font or saved as an external file and referenced via a URI reference.
Here is an example of how you might embed an SVG font inside of an SVG document:
<?xml version="1.0" standalone="yes"?> <svg width="400px" height="300px" xmlns = 'http://www.w3.org/Graphics/SVG/SVG-19991203.dtd'> <defs> <font id="MyFont" font-face-name="Super Sans" units-per-em="1000" cap-height="600" x-height="400" ascent="700" descent="300" horiz-adv-x="1000" text-bottom="-300" baseline="0" centerline="350" mathline="350" ideographic="400" hanging="500" topline="700" text-top="700"> <missing-glyph><path d="M0,0h200v200h-200z"/></glyph> <glyph unicode="33"><path d="M0,0L200,200L400,0z"/></glyph> <glyph unicode="34"><path d="M0,0L200,200L400,0z"/></glyph> <!-- more glyphs --> </font> <style> <![CDATA[ @font-face { font-family: "MyFont"; src: url("#MyFont") format(svg) } ]]> </style> </defs> <text style="font-family: MyFont, Helvetica, sans-serif">Text using embedded font</text> </svg>
Here is an example of how you might reference an SVG font which is saved in an external file. First referenced SVG font file:
<?xml version="1.0" standalone="yes"?> <svg width="100%" height="100%" xmlns = 'http://www.w3.org/Graphics/SVG/SVG-19991203.dtd'> <defs> <font id="MyFont" font-face-name="Super Sans" units-per-em="1000" cap-height="600" x-height="400" ascent="700" descent="300" horiz-adv-x="1000" text-bottom="-300" baseline="0" centerline="350" mathline="350" ideographic="400" hanging="500" topline="700" text-top="700"> <missing-glyph><path d="M0,0h200v200h-200z"/></glyph> <glyph unicode="33"><path d="M0,0L200,200L400,0z"/></glyph> <glyph unicode="34"><path d="M0,0L200,200L400,0z"/></glyph> <!-- more glyphs --> </font> </defs> </svg>
The SVG file which uses/references the above SVG font
<?xml version="1.0" standalone="yes"?> <svg width="400px" height="300px" xmlns = 'http://www.w3.org/Graphics/SVG/SVG-19991203.dtd'> <defs> <style> <![CDATA[ @font-face { font-family: "MyFont"; src: url("myfont.svg#MyFont") format(svg) } ]]> </style> </defs> <text style="font-family: MyFont">Text using embedded font</text> </svg>
The 'font' element defines an SVG font.
<!ENTITY % fontExt "" > <!ELEMENT font (%descTitle;,missing-glyph,(glyph|hkern|vkern %fontExt;)*) > <!ATTLIST font id ID #IMPLIED font-style CDATA #IMPLIED font-variant CDATA #IMPLIED font-weight CDATA #IMPLIED font-stretch CDATA #IMPLIED unicode-range CDATA #IMPLIED units-per-em CDATA #REQUIRED panose-1 CDATA #IMPLIED slope CDATA #IMPLIED cap-height CDATA #REQUIRED x-height CDATA #REQUIRED accent-height CDATA #IMPLIED ascent CDATA #REQUIRED descent CDATA #REQUIRED horiz-origin-x CDATA #IMPLIED horiz-origin-y CDATA #IMPLIED horiz-adv-x CDATA #REQUIRED vert-origin-x CDATA #IMPLIED vert-origin-y CDATA #IMPLIED vert-adv-y CDATA #IMPLIED text-bottom CDATA #REQUIRED baseline CDATA #REQUIRED centerline CDATA #REQUIRED mathline CDATA #REQUIRED ideographic CDATA #REQUIRED hanging CDATA #REQUIRED topline CDATA #REQUIRED text-top CDATA #REQUIRED font-face-name CDATA #IMPLIED underline-position CDATA #IMPLIED underline-thickness CDATA #IMPLIED strikethrough-position CDATA #IMPLIED strikethrough-thickness CDATA #IMPLIED overline-position CDATA #IMPLIED overline-thickness CDATA #IMPLIED > |
Attribute definitions:
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 contents of a 'glyph' can be any SVG graphics elements. However, in some implementations, faster font rendering (and possibly improved quality) might occur when glyph definitions consist of a single 'path' element.
<!ENTITY % glyphExt "" > <!ELEMENT glyph (%descTitleDefs;, (path|text|rect|circle|ellipse|line|polyline|polygon| use|image|g|switch %glyphExt;)*) > <!ATTLIST glyph id ID #IMPLIED unicode CDATA #REQUIRED glyph-name CDATA #IMPLIED vert-text-orient CDATA #IMPLIED arabic CDATA #IMPLIED han CDATA #IMPLIED horiz-adv-x CDATA #IMPLIED vert-adv-y CDATA #IMPLIED > |
Attribute definitions:
The 'missing-glyph' element defines the graphics to use if there is an attempt to draw a glyph from a given font and the given glyph has been defined. The attributes on the 'missing-glyph' element have the same meaning as the corresponding attributes on the 'glyph' element.
<!ENTITY % missing-glyphExt "" > <!ELEMENT missing-glyph (%descTitleDefs;, (path|text|rect|circle|ellipse|line|polyline|polygon| use|image|g|switch %missing-glyphExt;)*) > <!ATTLIST missing-glyph id ID #IMPLIED horiz-adv-x CDATA #IMPLIED vert-adv-y CDATA #IMPLIED > |
The 'hkern' and 'vkern' elements define kerning pairs for horizontally-oriented and vertically-oriented pairs of glyphs, respectively.
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', 'font-weight', 'font-variant', 'font-stretch', 'font-size-adjust' and 'font'.
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 bi-directional text in SVG is laid out in a two-step process, which is described in Relationship with bi-directionality. If SVG fonts are used, before kerning is aplied, 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' and 'vkern' can define a single kerning adjustment value between one set of glyphs (e.g., a range 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.)
<!ELEMENT hkern EMPTY > <!ATTLIST hkern id ID #IMPLIED u1 CDATA #IMPLIED g1 CDATA #IMPLIED u2 CDATA #IMPLIED g2 CDATA #IMPLIED k CDATA #REQUIRED > |
Attribute definitions:
At least one each of u1 or g1 and at least one of u2 or g2 must be provided.
The 'vkern' element defines kerning pairs and adjustment values in the vertical advance value when drawing pairs of glyphs together when stacked vertically. The spacing between characters is reduced by the kerning adjustment.
<!ELEMENT vkern EMPTY > <!ATTLIST vkern id ID #IMPLIED u1 CDATA #IMPLIED g1 CDATA #IMPLIED u2 CDATA #IMPLIED g2 CDATA #IMPLIED k CDATA #REQUIRED > |
The SVGFontElement interface corresponds to the 'font' element.
interface SVGFontElement : SVGElement { }; |
The SVGGlyphBaseElement interface is the base interface for interfaces SVGGlyphElement and SVGMissingGlyphElement.
interface SVGBaseGlyphElement : SVGElement { }; |
The SVGGlyphElement interface corresponds to the 'glyph' element.
interface SVGGlyphElement : SVGBaseGlyphElement { }; |
The SVGMissingGlyphElement interface corresponds to the 'missingGlyph' element.
interface SVGMissingGlyphElement : SVGBaseGlyphElement { }; |
The SVGKernBaseElement interface is the base interface for interfaces SVGHKernElement and SVGVKernElement.
interface SVGBaseKernElement : SVGElement { }; |
The SVGHKernElement interface corresponds to the 'hkern' element.
interface SVGHKernElement : SVGBaseKernElement { }; |
The SVGVKernElement interface corresponds to the 'vkern' element.
interface SVGVKernElement : SVGBaseKernElement { }; |