SVG にとり、フォントの確実な配信は要求事項になる。デザイナーにとっては SVG 内容を任意のフォントで作成しつつ、末端利用者のコンピュータに必要なフォントがインストールされていなくとも同じグラフィック結果が現れるようにすることが必要である。このことは印刷の世界に類似する。デザイナーは印刷用の絵図の作成において与えられたフォントを利用し、印刷においてはデザイナーの文書作成システムに現れるものと正確に同じグラフィック内容が現れる。
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.
SVG は、末端利用者への信頼できるフォントデータの配信を実現するための鍵となる仕組みに "Cascading Style Sheets (CSS) level 2" 仕様 [CSS2] で定められた ウェブフォント の枠組みを利用する。一般的な筋書きとして、 SVG 文書片に現れる全てのテキスト要素のための、圧縮されサブセット化された ウェブフォント を SVG 文書作成アプリケーションが生成することが考えられる。典型的には、 ウェブフォント は参照元の文書から相対的な場所に保存される。
SVG utilizes the WebFonts 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. In a common scenario, SVG authoring applications generate compressed, subsetted WebFonts for all text elements used by a given SVG document fragment. Typically, the WebFonts are saved in a location relative to the referencing document.
現今の ウェブフォント の枠組みにおける欠点の一つは、 [CSS2] などの仕様が特定のフォント形式のサポートを要求していない所にある。その結果、異なる実装が異なるウェブフォント形式をサポートすることになり、ウェブサイト作成者にとっては全てのＵＡと互換性がとれるウェブフォントを利用する単一のウェブサイト構築が難しくなってしまったことである。
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.
全ての 適合 SVG ビューア によるサポートが保証される共通のフォント形式を提供するために、 SVG は SVG の中でフォントを定義する機能を提供する。この機能は SVG フォント と呼ばれる。
To provide a common font format for SVG that is guaranteed to be supported by all conforming SVG viewers, SVG provides a facility to define fonts in SVG. This facility is called SVG fonts.
SVG フォントにより、テキストを表現するグラフィックの意味内容を向上させられるようになる。例えば多くの会社のロゴでは意匠を凝らした社名が描かれる。ロゴを SVG フォントの一連のグリフとして表し、このフォントを参照する 'text' 要素で描画させることにより、 アクセシビリティ の向上を図れる局面もある。
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.
SVG フォント は SVG の 'font' 要素を用いて定義されるフォントのことである。
An SVG font is a font defined using SVG's 'font' element.
SVG フォントの目的は表示のみの環境においてグリフの外形線の配信を可能にすることである。ウェブページに付随する SVG フォントは、閲覧および表示目的でのみサポートされねばならない。グラフィック編集アプリケーションあるいはファイル変換ツールは SVG フォントのシステムフォントへの変換を試みてはならない。その意図するところは、 SVG ファイルに付随する SVG フォントではなく、 SVG ファイルが２人のクリエータ間で交換できるところにある。そのかわり、クリエータたちは SVG ファイルの編集において事前にフォントの使用許諾を受ける必要がある。 font-face-name 要素は、編集に利用するために許諾を得たフォントの名前を指示する。
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. 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 element indicates the name of licensed font to use for editing.
SVG フォントではフォント外形線にヒント情報が無い。このため、多くの実装でフォントサイズが小さいときのテキストの品質と読み取り易さが制限されることが予想される。クリエータにとっては小さいフォントサイズにおけるより良い品質と読み取り易さのために、オペレーティングシステムに同梱されるフォントや代替 ウェブフォント 形式によるフォントのような代替フォントの技術の利用が望ましいこともある。
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.
SVG フォントは SVG の要素と属性を利用して記述されるので、場合によってはフォントデータがかさばらないように特に設計された ウェブフォント 形式のフォントよりも SVG フォントの方が容量が大きくなることがある。クリエータにとってはウェブページの高速な配信のために代替フォントの技術が望ましいこともある。
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 WebFont 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.
SVG フォントの真価は SVG-ＵＡにおける利用可能性が保証されているところにある。状況によっては、 SVG フォントをテキスト描画における第一候補とすることが適切になる。別の状況では、 SVG フォントは第一候補のフォント（ヒント情報付きのシステムフォントかもしれない）が利用者環境で利用できない場合のための予備の代替フォントとなる。
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.
SVG フォントの特徴と属性は、 "Cascading Style Sheets (CSS) level 2" 仕様 [CSS2] の "Fonts" の章で述べられているフォントの特徴とパラメタに緊密に対応する。このモデルにおいては、アドバンス値と基底線の位置やグリフの外形線などの種々のフォントに関する計量が、同じサイズで印字されるときの行の間の距離を高さとする抽象的な正方形に相対的な単位で表される。この正方形は エム平方 （ em square ）と呼ばれるグリフの外形線を定義するためのデザイン格子である。 'font' 要素の units-per-em 属性の値はエム平方が単位に分割される数を指定する。他の種類のフォントにおける一般的な値としては、例えば 250 （ Intellifont ）, 1000 （ Type 1 ）, 2048 （ TrueType, TrueType GX, Open-Type ）などがある。 SVG における標準のグラフィックの初期座標系ではＹ軸が下向き（ 初期座標系 を見よ）であるが、それとは異なり、普及している多くのフォント形式が従う業界慣行と整合させるため、 SVG フォントのデザイン格子が従うグリフの初期座標系のＹ軸は上向きである。
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 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 フォントと関連付けられるグリフは包含ボックスについての情報を指定しない。グリフの外形線は SVG のグラフィックス要素として記述されるので、実装はグリフの描画に標準のグラフィック描画か専用のフォント描画技術のどちらを利用するかを選択できる。後者の場合、必要となる最大の包含ボックスとオーバーハング（ overhang ）の計算はグリフの外形線に含まれるグラフィックス要素を解析することで行われる。
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.
SVG フォントは、それを利用する文書に埋め込むことも、外部リソースの一部として保存しておくこともできる。
An SVG font can be either embedded within the same document that uses the font or saved as part of an external resource.
SVG 文書に SVG フォントを埋め込む例をここに示す。
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" version="1.1"
xmlns = 'http://www.w3.org/2000/svg'>
<defs>
<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>
</defs>
<text x="100" y="100"
style="font-family: 'Super Sans', Helvetica, sans-serif;
font-weight: bold; font-style: normal">Text
using embedded font</text>
</svg>
次の例は外部ファイルに保存された SVG フォントを参照するために CSS の @font-face の機能を利用する方法である。まず、参照される SVG フォントファイルは：
Here is an example of how you might use the CSS @font-face facility to 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%" version="1.1"
xmlns = 'http://www.w3.org/2000/svg'>
<defs>
<font id="Font2" horiz-adv-x="1000">
<font-face font-family="Super Sans" font-weight="normal" font-style="italic"
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 Italic"/>
</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>
</defs>
</svg>
上の SVG フォントを参照／利用する SVG ファイルは：
The SVG file which uses/references the above SVG font
<?xml version="1.0" standalone="yes"?>
<svg width="400px" height="300px" version="1.1"
xmlns = 'http://www.w3.org/2000/svg'>
<defs>
<style type="text/css">
<![CDATA[
@font-face {
font-family: 'Super Sans';
font-weight: normal;
font-style: italic;
src: url("myfont.svg#Font2") format(svg)
}
]]>
</style>
</defs>
<text x="100" y="100"
style="font-family: 'Super Sans'; font-weight:normal;
font-style: italic">Text using referenced font</text>
</svg>
'font' 要素は SVG フォントを定義する。
The 'font' element defines an SVG font.
<!ENTITY % SVG.font.extra.content "" >
<!ENTITY % SVG.font.element "INCLUDE" >
<![%SVG.font.element;[
<!ENTITY % SVG.font.content
"(( %SVG.Description.class; )*, %SVG.font-face.qname;,
%SVG.missing-glyph.qname;, ( %SVG.glyph.qname; | %SVG.hkern.qname;
| %SVG.vkern.qname; %SVG.font.extra.content; )*)"
>
<!ELEMENT %SVG.font.qname; %SVG.font.content; >
<!-- end of SVG.font.element -->]]>
<!ENTITY % SVG.font.attlist "INCLUDE" >
<![%SVG.font.attlist;[
<!ATTLIST %SVG.font.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
%SVG.External.attrib;
horiz-origin-x %Number.datatype; #IMPLIED
horiz-origin-y %Number.datatype; #IMPLIED
horiz-adv-x %Number.datatype; #REQUIRED
vert-origin-x %Number.datatype; #IMPLIED
vert-origin-y %Number.datatype; #IMPLIED
vert-adv-y %Number.datatype; #IMPLIED
>
|
属性定義：
Attribute definitions:
'font' 要素はフォントの種々の特徴を記述する 'font-face' 子要素を持たなければならない。
Each 'font' element must have a 'font-face' child element which describes various characteristics of the font.
'glyph' 要素はグリフのグラフィックを定義する。グリフの座標系は 'font' 要素の種々の属性から定義される。
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.
'glyph' を構成するグラフィックは d 属性による単一の パスデータ 指定または 'glyph' の内容として与えられる任意の SVG のいずれでもよい。この２つのそれぞれに対し異なる処理が行われる（下を見よ）。
The graphics that make up the 'glyph' can be either a single path data specification within the d attribute or arbitrary SVG as content within the 'glyph'. These two alternatives are processed differently (see below).
<!ENTITY % SVG.glyph.extra.content "" >
<!ENTITY % SVG.glyph.element "INCLUDE" >
<![%SVG.glyph.element;[
<!ENTITY % SVG.glyph.content
"( %SVG.Description.class; | %SVG.Animation.class; %SVG.Structure.class;
%SVG.Conditional.class; %SVG.Image.class; %SVG.Style.class;
%SVG.Shape.class; %SVG.Text.class; %SVG.Marker.class;
%SVG.ColorProfile.class; %SVG.Gradient.class; %SVG.Pattern.class;
%SVG.Clip.class; %SVG.Mask.class; %SVG.Filter.class; %SVG.Cursor.class;
%SVG.Hyperlink.class; %SVG.View.class; %SVG.Script.class;
%SVG.Font.class; %SVG.Extensibility.class; %SVG.glyph.extra.content; )*"
>
<!ELEMENT %SVG.glyph.qname; %SVG.glyph.content; >
<!-- end of SVG.glyph.element -->]]>
<!ENTITY % SVG.glyph.attlist "INCLUDE" >
<![%SVG.glyph.attlist;[
<!ATTLIST %SVG.glyph.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
unicode CDATA #IMPLIED
glyph-name CDATA #IMPLIED
d %PathData.datatype; #IMPLIED
orientation CDATA #IMPLIED
arabic-form CDATA #IMPLIED
lang %LanguageCodes.datatype; #IMPLIED
horiz-adv-x %Number.datatype; #IMPLIED
vert-origin-x %Number.datatype; #IMPLIED
vert-origin-y %Number.datatype; #IMPLIED
vert-adv-y %Number.datatype; #IMPLIED
>
|
属性定義：
Attribute definitions:
'glyph' のグラフィックの指定には、 d 属性, あるいは 'glyph' の内容を与える任意の SVG 、のいずれも利用できる。
The graphics for the 'glyph' can be specified using either the d attribute or arbitrary SVG as content within the 'glyph'.
d 属性が指定された場合、この属性のパスデータは次のように処理される：
If the d attribute is specified, then the path data within this attribute is processed as follows:
'glyph' 要素が子要素を持つ場合、それら子要素は 'use' 要素から参照されたシンボルの描画と同様な仕方で描画される。その描画は参照された 'glyph' 要素の内容が別の非公開 DOM 木として末端まで複製されたかのようにして行われる。複製された DOM 木は非公開であり、インスタンスが SVG DOM に現れることはない。
If the 'glyph' has child elements, then those child elements are rendered in a manner similar to how the 'use' element renders a referenced symbol. The rendering effect is as if the contents of the referenced 'glyph' element were deeply cloned into a separate non-exposed DOM tree. Because the cloned DOM tree is non-exposed, the SVG DOM does not show the cloned instance.
CSS によるスタイル付け をサポートするＵＡにおいては、この概念的な末端まで複製された 'glyph' 要素の非公開 DOM 木においては、参照された 'glyph' とその内容の CSS カスケード [CSS2-CASCADE] によるプロパティ値も複製され、 'font' 要素のプロパティ値も適用される。 CSS2 セレクタについては、元々の（参照された）要素にはそれらが正式な文書構造の一部なので適用されるが、この（概念的な）複製 DOM 木にはその内容が正式な文書構造の一部ではないので適用されない。
For user agents that support Styling with CSS, the conceptual deep cloning of the referenced 'glyph' element into a non-exposed DOM tree also copies any property values resulting from the CSS cascade [CSS2-CASCADE] on the referenced 'glyph' and its contents, and also applies any property values on the 'font' element. CSS2 selectors can be applied to the original (i.e., referenced) elements because they are part of the formal document structure. CSS2 selectors cannot be applied to the (conceptually) cloned DOM tree because its contents are not part of the formal document structure.
しかしながらプロパティ継承については、参照された 'glyph' 要素が末端まで複製された子として、テキストそのままが文書木内に挿入されたかのようにふるまう。参照された 'glyph' は対応する文字たちを含む要素からプロパティを継承し、 'font' 要素の元々の親からのプロパティを継承しない。
Property inheritance, however, works as if the referenced 'glyph' had been textually included as a deeply cloned child within the document tree. The referenced 'glyph' inherits properties from the element that contains the characters that correspond to the 'glyph'. The 'glyph' does not inherit properties from the 'font' element's original parents.
この生成された内容においては、与えられた 'glyph' の各インスタンスに対し、その参照された 'glyph' 要素に対する 'font' 要素に対して CSS カスケード [CSS2-CASCADE] が適用された結果のプロパティ値を全てを運ぶ 'g' が作成される。 この 'g' 内に、 'glyph' 要素に対して CSS カスケード [CSS2-CASCADE] が適用された結果のプロパティ値全てを運ぶ別の 'g' が作成される。 'glyph' 要素の元々の内容はこの内側の 'g' 要素内に末端まで複製される。
In the generated content, for each instance of a given 'glyph', a 'g' is created which carries with it all property values resulting from the CSS cascade [CSS2-CASCADE] on the 'font' element for the referenced 'glyph'. Within this 'g' is another 'g' which carries with it all property values resulting from the CSS cascade [CSS2-CASCADE] on the 'glyph' element. The original contents of the 'glyph' element are deep-cloned within the inner 'g' element.
'glyph' が d 属性と子要素の両方を持つ場合、 d 属性が先に描画された後に子要素が描画される。
If the 'glyph' has both a d attribute and child elements, the d attribute is rendered first, and then the child elements.
一般に、 d 属性はシステムフォントと同じ仕方で描画される。例えばダッシュパターンは、システムフォントに適用されるときと d 属性を用いてグリフを定義する SVG フォントに適用されるときとは同じ見え方になる。 多くの実装において、 d 属性で定義されるグリフを素早く描画したり、更なる性能向上のためにフォントキャッシュを利用することも可能になる。
In general, the 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 attribute. Many implementations will be able to render glyphs defined with the d attribute quickly and will be able to use a font cache for further performance gains.
'glyph' 内に子要素を含めることでグリフを定義する方法は、高い柔軟性が得られる反面、複雑さも増す。グリフの異なる部分に異なるフィルやストロークを用いる技法も可能になる。例えば、文字 "i" の本体を赤色、ドットは青色にするなど。このやり方には単位に関する固有の複雑さがある。テキスト要素に指定される 'stroke-width' プロパティなどの長さを表現するプロパティの値がグリフの座標系で処理されるので、予想外の結果も生じ得る。
Defining a glyph by including child elements within the 'glyph' gives greater flexibility but more complexity. Different fill and stroke techniques can be used on different parts of the glyphs. For example, the base of an "i" could be red, and the dot could be blue. This approach has an inherent complexity with units. Any properties specified on a text elements which represents a length, such as the 'stroke-width' property, might produce surprising results since the length value will be processed in the coordinate system of the glyph.
'missing-glyph' 要素はグリフの描画を試みた際にそのグリフが定義されていなかった場合に利用するグラフィックを定義する。 'missing-glyph' 要素の属性は 'glyph' 要素の対応する属性と同じ意味を持つ。
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 not been defined. The attributes on the 'missing-glyph' element have the same meaning as the corresponding attributes on the 'glyph' element.
<!ENTITY % SVG.missing-glyph.extra.content "" >
<!ENTITY % SVG.missing-glyph.element "INCLUDE" >
<![%SVG.missing-glyph.element;[
<!ENTITY % SVG.missing-glyph.content
"( %SVG.Description.class; | %SVG.Animation.class; %SVG.Structure.class;
%SVG.Conditional.class; %SVG.Image.class; %SVG.Style.class;
%SVG.Shape.class; %SVG.Text.class; %SVG.Marker.class;
%SVG.ColorProfile.class; %SVG.Gradient.class; %SVG.Pattern.class;
%SVG.Clip.class; %SVG.Mask.class; %SVG.Filter.class; %SVG.Cursor.class;
%SVG.Hyperlink.class; %SVG.View.class; %SVG.Script.class;
%SVG.Font.class; %SVG.Extensibility.class; %SVG.missing-glyph.extra.content; )*"
>
<!ELEMENT %SVG.missing-glyph.qname; %SVG.missing-glyph\
.content; >
<!-- end of SVG.missing-glyph.element -->]]>
<!ENTITY % SVG.missing-glyph.attlist "INCLUDE" >
<![%SVG.missing-glyph.attlist;[
<!ATTLIST %SVG.missing-glyph.qname;
%SVG.Core.attrib;
%SVG.Style.attrib;
%SVG.Presentation.attrib;
d %PathData.datatype; #IMPLIED
horiz-adv-x %Number.datatype; #IMPLIED
vert-origin-x %Number.datatype; #IMPLIED
vert-origin-y %Number.datatype; #IMPLIED
vert-adv-y %Number.datatype; #IMPLIED
>
|
文字の連なりを描くときのグリフの決定においては、 'font' 要素の中の 'glyph' 要素が検索される。検索は最初の 'glyph' から最後のものへと論理順序で、 'glyph' 要素の unicode 属性に指定されたユニコード文字の連なりが描画される当該ユニコード文字の連なりに一致するまで行われ、最初に一致したものが用いられる。したがって、フォントにおいてはリガチャ "ffl" はグリフ "f" の前に定義される必要がある。さもなければ "ffl" は決して選択されないことになる。
When determining the glyph(s) to draw a given character sequence, the 'font' element is 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 attribute for the given 'glyph' element. The first successful match is used. Thus, the "ffl" ligature needs to be defined in the font before the "f" glyph; otherwise, the "ffl" will never be selected.
'altGlyph' は、常に SVG フォントにおける上記グリフ選択規則より優先されることに注意。
Note that any occurrences of 'altGlyph' take precedence over the above glyph selection rules within an SVG font.
'hkern' と 'vkern' 要素は、それぞれ横書と縦書においてカーニングされるグリフ対を定義する。
The 'hkern' and 'vkern' elements define kerning pairs for horizontally-oriented and vertically-oriented pairs of glyphs, respectively.
カーニング対は、同じフォントの２つのグリフが続けて描画されるときにその間隔が調整されるようなグリフの対を指定する。 SVG フォントのカーニングが生じるためには、グリフ対が同じフォントに属することが要求されるのに加え、２つのグリフに対応する文字たちのプロパティ： 'font-family', 'font-size', 'font-style', 'font-weight', 'font-variant', 'font-stretch', 'font-size-adjust', 'font' も全て同じ値になる必要がある。
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'.
カーニング対の例は英字 "Va" である。この場合、英字 "V" と "a" を少し近付けて描画すれば、見栄えが良くなるであろう。
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.
右から左の、および双方向のテキストは、 双方向性との関係 で述べられている様に２段階の処理を経て配置される。 SVG フォントが利用される場合、カーニングが適用される前に文字たちは視覚的描画順序において左から右へと（縦書の場合は上から下へ）再配列される。 SVG フォントによるカーニングは続けて描画されるグリフの対に適用される。カーニング対の第一グリフは視覚的描画順序において左（または上）側であり、第二グリフは右（または下）側である。
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.
フォントデザイナーへの便宜とファイルサイズの節約のため、 'hkern' と 'vkern' はグリフの集合（例えばユニコード文字の範囲）と別の集合（例えば別の範囲のユニコード文字）との間に同一のカーニング調整値を一括して適用されるように定義できる。
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).
'hkern' 要素は２つのグリフが連続して水平に（即ち横並びに）描画されるときのカーニング対と水平アドバンスの調整値を定義する。文字の間隔はカーニング調整により詰められる（負のカーニング調整値は文字の間隔を拡げる）。
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.)
<!ENTITY % SVG.hkern.element "INCLUDE" > <![%SVG.hkern.element;[ <!ENTITY % SVG.hkern.content "EMPTY" > <!ELEMENT %SVG.hkern.qname; %SVG.hkern.content; > <!-- end of SVG.hkern.element -->]]> <!ENTITY % SVG.hkern.attlist "INCLUDE" > <![%SVG.hkern.attlist;[ <!ATTLIST %SVG.hkern.qname; %SVG.Core.attrib; u1 CDATA #IMPLIED g1 CDATA #IMPLIED u2 CDATA #IMPLIED g2 CDATA #IMPLIED k %Number.datatype; #REQUIRED > |
属性定義：
Attribute definitions:
少なくとも u1 か g1 のいずれかと、少なくとも u2 か g2 のいずれかは与えられなければならない。
At least one each of u1 or g1 and at least one of u2 or g2 must be provided.
'vkern' 要素は２つのグリフが連続して垂直に（即ち縦並びに）描画されるときのカーニング対と垂直アドバンスの調整値を定義する。文字の間隔はカーニング調整により詰められる（負のカーニング調整値は文字の間隔を拡げる）。
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.
<!ENTITY % SVG.vkern.element "INCLUDE" > <![%SVG.vkern.element;[ <!ENTITY % SVG.vkern.content "EMPTY" > <!ELEMENT %SVG.vkern.qname; %SVG.vkern.content; > <!-- end of SVG.vkern.element -->]]> <!ENTITY % SVG.vkern.attlist "INCLUDE" > <![%SVG.vkern.attlist;[ <!ATTLIST %SVG.vkern.qname; %SVG.Core.attrib; u1 CDATA #IMPLIED g1 CDATA #IMPLIED u2 CDATA #IMPLIED g2 CDATA #IMPLIED k %Number.datatype; #REQUIRED > |
フォント記述（ font description ）は、文書作成者のフォント指定とフォントデータの橋渡しを提供する。フォントデータは、テキスト整形と文字に対応する抽象的グリフの描画に必要なデータ - 実際のスケーラブルな外形線あるいはビットマップ - である。フォントは 'font-family' プロパティなどのプロパティにより参照される。
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 and 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.
フォント記述についての更なる詳細は CSS2 仕様のフォントの章 [CSS2 Fonts] を参照のこと。
For more about font descriptions, refer to the font chapter in the CSS2 specification [CSS2 Fonts].
フォント記述は次の２つの方法いずれでも指定できる：
Font descriptions can be specified in either of the following ways:
'font-face' 要素は CSS2 の @font-face の機能に直接対応するものである。SVG フォントその他任意のフォントの特徴の記述に利用できる。
The 'font-face' element corresponds directly to the @font-face facility in CSS2. It can be used to describe the characteristics of any font, SVG font or otherwise.
同じ文書に含まれている SVG フォントの特徴の記述に利用する場合は、 'font' 要素が外部依存性の無い独立なものとなるように 'font-face' 要素を当該 'font' 要素の子として与えることが推奨される。この場合、 'font-face' 要素内の 'font-face-src' 要素は無視され、 'font-face' 要素はその親の 'font' 要素の特徴を記述するものとみなされる。
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.
<!ENTITY % SVG.font-face.extra.content "" >
<!ENTITY % SVG.font-face.element "INCLUDE" >
<![%SVG.font-face.element;[
<!ENTITY % SVG.font-face.content
"(( %SVG.Description.class; )*, %SVG.font-face-src.qname;?,
%SVG.definition-src.qname;? %SVG.font-face.extra.content; )"
>
<!ELEMENT %SVG.font-face.qname; %SVG.font-face.content; >
<!-- end of SVG.font-face.element -->]]>
<!ENTITY % SVG.font-face.attlist "INCLUDE" >
<![%SVG.font-face.attlist;[
<!ATTLIST %SVG.font-face.qname;
%SVG.Core.attrib;
font-family %FontFamilyValue.datatype; #IMPLIED
font-style ( normal | italic | oblique ) #IMPLIED
font-variant ( normal | small-caps ) #IMPLIED
font-weight ( normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 |
800 | 900 ) #IMPLIED
font-stretch ( normal | ultra-condensed | extra-condensed | condensed |
semi-condensed | semi-expanded | expanded | extra-expanded |
ultra-expanded ) #IMPLIED
font-size %FontSizeValue.datatype; #IMPLIED
unicode-range CDATA #IMPLIED
units-per-em %Number.datatype; #IMPLIED
panose-1 CDATA #IMPLIED
stemv %Number.datatype; #IMPLIED
stemh %Number.datatype; #IMPLIED
slope %Number.datatype; #IMPLIED
cap-height %Number.datatype; #IMPLIED
x-height %Number.datatype; #IMPLIED
accent-height %Number.datatype; #IMPLIED
ascent %Number.datatype; #IMPLIED
descent %Number.datatype; #IMPLIED
widths CDATA #IMPLIED
bbox CDATA #IMPLIED
ideographic %Number.datatype; #IMPLIED
alphabetic %Number.datatype; #IMPLIED
mathematical %Number.datatype; #IMPLIED
hanging %Number.datatype; #IMPLIED
v-ideographic %Number.datatype; #IMPLIED
v-alphabetic %Number.datatype; #IMPLIED
v-mathematical %Number.datatype; #IMPLIED
v-hanging %Number.datatype; #IMPLIED
underline-position %Number.datatype; #IMPLIED
underline-thickness %Number.datatype; #IMPLIED
strikethrough-position %Number.datatype; #IMPLIED
strikethrough-thickness %Number.datatype; #IMPLIED
overline-position %Number.datatype; #IMPLIED
overline-thickness %Number.datatype; #IMPLIED
>
属性定義：
Attribute definitions:
次の要素と属性は @font-face 規則の 'src' 記述子に対応する。 （ CSS2 仕様の [@font-face 規則] と ['src' 記述子] を参照のこと。）
The following elements and attributes 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.)
'font-face-uri' が SVG フォント を参照している場合、参照先は SVG 'font' 要素でなければならず、したがって片識別子が必要になる（ [URI] を見よ）。参照先の 'font' 要素はローカル（即ち 'font-face-uri' 要素と同じ文書内）またはリモート（即ち異なる文書） のいずれにあってもよい。
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 [URI]). 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).
<!ENTITY % SVG.font-face-src.extra.content "" >
<!ENTITY % SVG.font-face-src.element "INCLUDE" >
<![%SVG.font-face-src.element;[
<!ENTITY % SVG.font-face-src.content
"( %SVG.font-face-uri.qname; | %SVG.font-face-name.qname;
%SVG.font-face-src.extra.content; )+"
>
<!ELEMENT %SVG.font-face-src.qname; %SVG.font-face-src.\
content; >
<!-- end of SVG.font-face-src.element -->]]>
<!ENTITY % SVG.font-face-src.attlist "INCLUDE" >
<![%SVG.font-face-src.attlist;[
<!ATTLIST %SVG.font-face-src.qname;
%SVG.Core.attrib;
>
<!-- end of SVG.font-face-src.attlist -->]]>
<!-- font-face-uri: Font Face URI Element .............. -->
<!ENTITY % SVG.font-face-uri.extra.content "" >
<!ENTITY % SVG.font-face-uri.element "INCLUDE" >
<![%SVG.font-face-uri.element;[
<!ENTITY % SVG.font-face-uri.content
"( %SVG.font-face-format.qname; %SVG.font-fac\
e-uri.extra.content; )*"
>
<!ELEMENT %SVG.font-face-uri.qname; %SVG.font-face-uri.\
content; >
<!-- end of SVG.font-face-uri.element -->]]>
<!ENTITY % SVG.font-face-uri.attlist "INCLUDE" >
<![%SVG.font-face-uri.attlist;[
<!ATTLIST %SVG.font-face-uri.qname;
%SVG.Core.attrib;
%SVG.XLinkRequired.attrib;
>
<!-- end of SVG.font-face-uri.attlist -->]]>
<!-- font-face-format: Font Face Format Element ........ -->
<!ENTITY % SVG.font-face-format.element "INCLUDE" >
<![%SVG.font-face-format.element;[
<!ENTITY % SVG.font-face-format.content "EMPTY" >
<!ELEMENT %SVG.font-face-format.qname; %SVG.font-fac\
e-format.content; >
<!-- end of SVG.font-face-format.element -->]]>
<!ENTITY % SVG.font-face-format.attlist "INCLUDE" >
<![%SVG.font-face-format.attlist;[
<!ATTLIST %SVG.font-face-format.qname;
%SVG.Core.attrib;
string CDATA #IMPLIED
>
<!-- end of SVG.font-face-format.attlist -->]]>
<!-- font-face-name: Font Face Name Element ............ -->
<!ENTITY % SVG.font-face-name.element "INCLUDE" >
<![%SVG.font-face-name.element;[
<!ENTITY % SVG.font-face-name.content "EMPTY" >
<!ELEMENT %SVG.font-face-name.qname; %SVG.font-face-na\
me.content; >
<!-- end of SVG.font-face-name.element -->]]>
<!ENTITY % SVG.font-face-name.attlist "INCLUDE" >
<![%SVG.font-face-name.attlist;[
<!ATTLIST %SVG.font-face-name.qname;
%SVG.Core.attrib;
name CDATA #IMPLIED
>
<!-- end of SVG.font-face-name.attlist -->]]>
gt;
'definition-src' 要素は CSS2 の 'definition-src' 記述子に対応する。（ CSS2 仕様の [ 'definition-src' 記述子] を参照のこと。）
The 'definition-src' element corresponds to the 'definition-src' descriptor in CSS2. (Refer to description of the [ 'definition-src' descriptor] in CSS2 specification.)
<!ENTITY % SVG.definition-src.element "INCLUDE" >
<![%SVG.definition-src.element;[
<!ENTITY % SVG.definition-src.content "EMPTY" >
<!ELEMENT %SVG.definition-src.qname; %SVG.definition-\
src.content; >
<!-- end of SVG.definition-src.element -->]]>
<!ENTITY % SVG.definition-src.attlist "INCLUDE" >
<![%SVG.definition-src.attlist;[
<!ATTLIST %SVG.definition-src.qname;
%SVG.Core.attrib;
%SVG.XLinkRequired.attrib;
>
| 要素 | 属性 | 内容モデル |
|---|---|---|
| font | Core.attrib, External.attrib, Style.attrib, Presentation.attrib, horiz-origin-x, horiz-origin-y, horiz-adv-x, vert-adv-y, vert-origin-x, vert-origin-y | (Description.class, font-face, missing-glyph, (glyph | hkern | vkern)*) |
| font-face | Core.attrib, font-family, font-style, font-variant, font-weight, font-stretch, font-size, unicode-range, units-per-em, panose-1, stemv, stemh, slope, cap-height, x-height, accent-height, ascent, descent, widths, bbox, ideographic, alphabetic, mathematical, hanging, v-ideographic, v-alphabetic, v-mathematical, v-hanging, underline-position, underline-thickness, strikethrough-position, strikethrough-thickness, overline-position, overline-thickness | (Description.class, font-face-src?, definition-src?) |
| glyph | Core.attrib, Style.attrib, Presentation.attrib, unicode, glyph-name, d, orientation, arabic-form, lang, horiz-adv-x, vert-adv-y, vert-origin-x, vert-origin-y | (Description.class | Structure.class | Shape.class | Text.class | Image.class | View.class | Conditional.class | Hyperlink.class | Style.class | Marker.class | Clip.class | Mask.class | Gradient.class | Pattern.class | ColorProfile.class | Filter.class | Cursor.class | Font.class | Animation.class)* |
| missing-glyph | Core.attrib, Style.attrib, Presentation.attrib, d, orientation, arabic-form, lang, horiz-adv-x, vert-adv-y, vert-origin-x, vert-origin-y | (Description.class | Structure.class | Shape.class | Text.class | Image.class | View.class | Conditional.class | Hyperlink.class | Style.class | Marker.class | Clip.class | Mask.class | Gradient.class | Pattern.class | ColorProfile.class | Filter.class | Cursor.class | Font.class | Animation.class)* |
| hkern | Core.attrib, g1, g2, u1, u2, k | EMPTY |
| vkern | Core.attrib, g1, g2, u1, u2, k | EMPTY |
| font-face-src | Core.attrib | (font-face-uri|font-face-name)+ |
| font-face-uri | Core.attrib, XLinkRequired.attrib | font-face-format* |
| font-face-format | Core.attrib, string | EMPTY |
| font-face-name | Core.attrib, name | EMPTY |
| defintion-src | Core.attrib, XLinkRequired.attrib | EMPTY |
| 要素 | 属性 | 内容モデル |
|---|---|---|
| font | Core.attrib, External.attrib, Style.attrib, Presentation.attrib, horiz-origin-x, horiz-adv-x | (Description.class, font-face, missing-glyph, (glyph | hkern)*) |
| font-face | Core.attrib, font-family, font-style, font-variant, font-weight, font-stretch, font-size, unicode-range, units-per-em, panose-1, stemv, stemh, slope, cap-height, x-height, accent-height, ascent, descent, widths, bbox, ideographic, alphabetic, mathematical, hanging, underline-position, underline-thickness, strikethrough-position, strikethrough-thickness, overline-position, overline-thickness | (Description.class, font-face-src?) |
| glyph | Core.attrib, Style.attrib, unicode, glyph-name, d, arabic-form, lang, horiz-adv-x | (Description.class) |
| missing-glyph | Core.attrib, Style.attrib, d, arabic-form, lang, horiz-adv-x | (Description.class) |
| hkern | Core.attrib, g1, g2, u1, u2, k | EMPTY |
| font-face-src | Core.attrib | (font-face-name)+ |
| font-face-name | Core.attrib, name | EMPTY |
次に挙げるインターフェースが以下で定義される： SVGFontElement, SVGGlyphElement, SVGMissingGlyphElement, SVGHKernElement, SVGVKernElement, SVGFontFaceElement, SVGFontFaceSrcElement, SVGFontFaceUriElement, SVGFontFaceFormatElement, SVGFontFaceNameElement, SVGDefinitionSrcElement
SVGFontElement インターフェースは 'font' 要素に対応する。
SVG DOM を通した 'font' 要素の属性へのオブジェクト指向型アクセスは提供されていない。
interface SVGFontElement :
SVGElement,
SVGExternalResourcesRequired,
SVGStylable {};
SVGGlyphElement インターフェースは 'glyph' 要素に対応する。
SVG DOM を通した 'glyph' 要素の属性へのオブジェクト指向型アクセスは提供されていない。
interface SVGGlyphElement :
SVGElement,
SVGStylable {};
SVGMissingGlyphElement インターフェースは 'missing-glyph' 要素に対応する。
SVG DOM を通した 'missing-glyph' 要素の属性へのオブジェクト指向型アクセスは提供されていない。
interface SVGMissingGlyphElement :
SVGElement,
SVGStylable {};
SVGHKernElement インターフェースは 'hkern' 要素に対応する。
SVG DOM を通した 'hkern' 要素の属性へのオブジェクト指向型アクセスは提供されていない。
interface SVGHKernElement : SVGElement {};
SVGVKernElement インターフェースは 'vkern' 要素に対応する。
SVG DOM を通した 'vkern' 要素の属性へのオブジェクト指向型アクセスは提供されていない。
interface SVGVKernElement : SVGElement {};
SVGFontFaceElement インターフェースは 'font-face' 要素に対応する。
SVG DOM を通した 'font-face' 要素の属性へのオブジェクト指向型アクセスは提供されていない。
interface SVGFontFaceElement : SVGElement {};
SVGFontFaceSrcElement インターフェースは 'font-face-src' 要素に対応する。
interface SVGFontFaceSrcElement : SVGElement {};
SVGFontFaceUriElement インターフェースは 'font-face-uri' 要素に対応する。
SVG DOM を通した 'font-face-uri' 要素の属性へのオブジェクト指向型アクセスは提供されていない。
interface SVGFontFaceUriElement : SVGElement {};
SVGFontFaceFormatElement インターフェースは 'font-face-format' 要素に対応する。
SVG DOM を通した 'font-face-format' 要素の属性へのオブジェクト指向型アクセスは提供されていない。
interface SVGFontFaceFormatElement : SVGElement {};
SVGFontFaceNameElement インターフェースは 'font-face-name' 要素に対応する。
SVG DOM を通した 'font-face-name' 要素の属性へのオブジェクト指向型アクセスは提供されていない。
interface SVGFontFaceNameElement : SVGElement {};
SVGDefinitionSrcElement インターフェースは 'definition-src' 要素に対応する。
SVG DOM を通した 'definition-src' 要素の属性へのオブジェクト指向型アクセスは提供されていない。
interface SVGDefinitionSrcElement : SVGElement {};