SVG-in-OpenType

SVG-in-OpenType

[11] OpenType ファイルには SVG 形式のグリフデータを格納できます。

仕様書

SVG

[25] SVG では、 グリフIDに対してSVG文書を対応付けることができます。 >>13

[107] グリフごとに異なるSVG文書とすることもできますし、 複数のグリフで1つのSVG文書を共有することもできます。

[112] そのフォントのすべてのグリフIDに対して SVG文書を用意しなければならないことはありません

[113] SVG グリフ記述は、 同じグリフIDglyf, CFF , CFF2グリフの記述の代替となる記述を表します。両者は同じ抽象グリフの描写でなければなりません (must) >>13

[125] OpenType の他の部分と同様に、エラー処理の規定はあまりありません。ただし SVG文書の処理については一部に規定があります。

SVG 形式のグリフの値

[38] SVG における SVG文書は、 平文としてまたは gzip 符号化により記述できます。 >>13

[39] 実装はこの両方に対応しなければなりません (must) >>13

[40] SVG svgDocLength で指定するのは、 符号化された状態のデータの長さであって、復号後の長さではありません>>13

[124] どちらであるかを明記する方法は用意されていません。先頭バイトで区別できます。

SVG における gzip

[35] RFC 1952 gzip 形式を使うことができます。 >>13

[36] gzip では RFC 1951 deflate 圧縮方式を使わなければなりません (must) >>13

[37] 従って gzip を使う場合は先頭を 0x1F 0x8B 0x08 としなければなりません (must) >>13

[123] 関連: SVGZ

SVG の要件

SVG の機能

[126] Web では普通は仕様書の最新版を使いますが、 OpenType における SVG は特定の版が参照されています。

[127] Webブラウザーではないフォントの実装も含めた相互運用性のための配慮なのでしょう。

[128] とはいえしかし機能を絞りながらも多くの機能が任意選択になっていて、 実際にどの機能が使えるかは実装によってまったく違い、相互運用性は悲惨な状況です。

[129] 仕様書が緩いから相互運用性がなくなったというよりは、 機能集合の合意形成に失敗したから仕様書がこの惨状なのでしょうが...

[26] SVG で使う SVG は、

Scalable Vector Graphics (SVG) 1.1 (Second Edition) specification at http://www.w3.org/TR/SVG11リンク.

であると定められています。 >>13

[27] 現時点でそのリンク先 http://www.w3.org/TR/SVG11 は、 >>28リダイレクトされ、 >>29 と同じものが表示されます。

[130] SVG 1.1 第2版は W3CSVG 1.2 の開発に失敗した後に SVG 1.1 に立ち返って不具合修正などを施したものです。 それまでの版よりは幾分マシとはいえ、 現在の水準から見ると曖昧で品質が低い仕様書です。また、古い時代の設計で、 HTML5 以後の新時代の設計に追いつこうと一部修正された SVG2 による変更 (例えば XLink からの脱却) が加わっていないものです。

[131] 開発タイミングの関係からこれを参照する以外に選択肢がなかったとはいえ、 「最新版仕様」ではなく特定時点の仕様書を参照しているのに参照先がこれ、 というのは不安があります。

[30] 以前の版では、

draft SVG 2リンク specification.

context-fill とその他の context-* 特性値の利用が認められていました。 >>13

[33] ここでそのリンク先は https://www.w3.org/TR/SVG2/ >>31 で、 現時点で >>32 と同じものが表示されます。 「以前の版」がどの時点のものだったかは不明です。

[34] 現在の版ではこれら特性群の利用は非推奨 (deprecated) であります。 適合実装は、これら特性群を対応しても構いませんが、 対応することは必須 (required) でも推奨 (recommended) でもありませんフォントにおけるこれら特性群の利用は強く非推奨 (strongly discouraged) です。 >>13

[92] 適合する実装は、次のものをすべて対応しなければなりません (must) >>13

[51] 適合する OpenType フォントは次の機能を使ってはなりません (must not) 適合する応用は無視しなければなりません (must) >>13

[97] 適合する OpenType フォントは次の機能を使ってはなりません (must not) >>13

[64] SVG文書は次の機能を含めて構いませんが (may) 、実装は無視します。 >>13

[68] 次の機能は適合実装において必須 (required) の能力ではありませんが、 応用によっては対応しているかもしれません (may) フォント開発者は想定対象環境で利用できるか評価するべきです (should) 。 広範囲の環境での相互運用性のため利用を避けるべきです (should) >>13

[85] 「SVG 子要素」って何のこと?
[86] イベント要素ってイベントハンドラー属性のこと? script は禁止なのに on* 属性は禁止ではないの?
[87] XML実体が禁止というのは (宣言だけしても特に何も起こらないので当たり障りないはずなので) 実体参照が使わないべきということ? だとすると実装XML の完全実装も要求されていない?

[88] 広く使われる想定のフォントには CSS によるスタイル付けよりも広く対応が見込まれる XML presentation attribute による指定が推奨 (recommended) されます。 >>13 (Note)

[119] CSSアニメーション, SVGアニメーションは広範囲の配布を想定したフォントでは推奨されません (not recommended) >>13

[89] 媒体クエリーによる環境変化への対応は、対応している応用に於いても推奨されません (not recommended) 。 (他の OpenType の仕組みとの相互作用が可能であるので) 上位層表現フレームワーク (higher-level presentation framework) に於いて環境変化を扱うべきです (should) >>13 (Note)

[90] 具体的に言えばフォント内部で媒体クエリーで条件分岐するよりもフォントを呼び出す CSS@media を使って GSUB その他を使うなりするのが適切ということでしょう。

[100] color 特性currentColor の値を上書きしますが、 その他に使い道はないので、 color 値を設定するのは避けるべき (should) です。 >>13 (Note)

SVG 文書

[41] SVG文書文字符号化は、 UTF-8 でなければなりません (must) >>13

[42] SVG文書XML文書であることも HTML構文で記述されることもありますが、 OpenType フォントSVG文書XML文書でなければなりません (must) SVG SVG文書に対応する応用XML文書に対応しなければなりません (must) HTML構文にも対応した SVG 構文解析ライブラリーを使っても構いません (may) >>13

[43] SVG 応用XML名前空間に完全に対応する必要はありません (not required) >>13

[44] SVG文書根要素SVG既定名前空間 http://www.w3.org/2000/svg として宣言しなければなりません (must) >>13

[45] 本文で明言はされていませんが、示された実例では根要素要素名既定名前空間を使っています。 >>13 XML名前空間への対応を必須としない趣旨からすれば、これも要件と考えるべきなのでしょうが、 なぜ規定がないのかは不明です。

[46] xlink:href 属性を使うときは、 根要素xmlns:xlink="http://www.w3.org/1999/xlink" としなければなりません (must) >>13

[47] 他の XLink属性を文書中で使ってはいけません (No ... may) >>13

[48] 他の機構 (mechanisms) を文書中で使ってはいけません (No ... may) 。 他の名前空間宣言を要素に使うべきではありません (no ... should) >>13

[49] 仕様書では 「No other XLink attributes or other mechanisms」 を使ってはいけないとしています。 XLink がどこに掛かっているのかやや不明瞭ですが、 「other ... or other ...」となっているので属性だけに XLink が掛かっていると考えるのが妥当でしょう。 XLink の機能もすべて属性で、 他の機構はありません。 しかしそうすると「他の機構」とは何かがよくわかりません。 文脈を汲むなら SVG 本体機能でも XLink でもないもの全般でしょうか。 続けて他の名前空間宣言もあるべきではないとしています。 他のすべての機能が認められないのだとしたら、自動的に名前空間宣言も認められなくなるはずで、 意図がわかりません。宣言だけなら機構に入らないという解釈なのでしょうか。 機構の利用が禁止 (no ... may) なのに宣言は非推奨 (no ... should) と強さが違うのはよくわかりません。
[50] 後段はあるいは SVGXLink のその他の形の宣言を禁じる意図もありそうですが。

SVG 文書におけるグリフ定義

[108] SVG においてグリフID g が参照する SVG文書は、 glyphg というIDを持つ要素を含まなければなりません (must) 。 ここで g零埋めない10進数です。 >>13

[109] font engine は、 当該要素defs 要素子供であり、 use 要素でその ID を参照したかのようにグリフレンダリングしなければなりません (must) >>13

[110] 仕様書で明文規定されているのはこれだけなのでやや曖昧ですが、例示を見ると当該要素から参照されている可能性がある、 当該要素兄弟defs は含め、当該要素以外のグリフ要素は含まない、ということになっています。 しかし当該要素以外のグリフ要素の子孫への参照が含まれるという可能性も排除されていません。 結局 SVG文書の全体が必要になりそうに思われます。

[111] 従って

レンダリングするのと同等、と考えるべきでしょうか。

[116] 仕様書には svg 要素ID を付与した例文もいくつかあります。 その場合は >>111 でもうまくいきません。 >>109 >>110 >>111 あたりはあくまで説明の便宜でそう書いていただけなのでしょう...

[118] svg 要素属性も使われますし。 文字列座標

メモ

[132] SVG の処理にはいくつかの異なる方式がありますが (スクリプトを実行するかなど)、 ここで定められているのはそのいずれとも異なります。

[133] 従って通常の SVG の処理と共通化できるところも多いとはいえ、 どの機能を有効にするかなどに多くの条件分岐が必要となります。

色の参照

[91] 実装のCSS変数への対応は任意選択です (>>68) が、 var()CPAL を参照する色変数に対応することは強く推奨 (strongly recommended) されます。 フォントSVG文書内で独自の変数を定義するべきではありません (should not) var()色値を受け付ける属性特性でのみ使うべき (should) で、 値の最初の項目としてのみ出現するべき (should) です。 >>13

[101] CPAL パレットに対応しない実装でも、 var() には対応し、第2引数のフォールバック値を使うことが強く推奨 (strongly recommended) されます。 広範囲の配布を想定するフォントはこの方法によって CPAL 未対応の応用でもフォールバック値を使えます。 >>13 (Note)

[102] text-layout engine応用は、 各パレット entry に対してカスタム特性を定義して色値を割り当てます。 カスタム色特性は CPAL を含むフォントのみ定義するべきです (should) 応用カスタム特性の値を一般的には CPALパレット entry を使って設定するべきです (should) が、 利用者入力その他の方法で値を割り当てることもできます。 CPALパレットの entry から値を割り当てるときは、 通常は最初のパレットを使うべき (should) ですが、 USABLE_WITH_LIGHT_BACKGROUNDUSABLE_WITH_DARK_BACKGROUND のフラグが付いたパレットフォントに含まれるときは、 そのいずれかを既定値として使えます。 >>13

[103] いずれにせよカスタム特性の名前は --colorn の形式で、 n0埋めしない10進数で、 --color0, --color1, ... と numPaletteEntries より 1 小さな値までとしなければなりません (must) >>13


[99] currentColor初期値は、 text-layout engine応用環境によって設定しなければなりません (must) 応用に於いて最適なものを設定できます。 一般には当該文章 (text) 連なりに適用される文章前景色とすることが推奨 (recommended) されます。 >>13

レンダリング

[114] まず通常の方法で text layout を行ってグリフIDの列と x, y 位置 (と scalerotation行列) を得ます。 次に SVG グリフ記述があれば、 それを通常のグリフ記述のかわりに使います。 >>13

[115] glyph ink bounding box には多少変化もあるかもしれませんが、 advance widthadvance height は変化しません。 line layoutbounding box に依存する場合を除き、 の再度の layout は必須とならないはずです (should not require) >>13

[117] 座標については文字列座標系を参照。

[120] SVGアニメーション, CSSアニメーションに対応した応用は、 場合によっては (例えば印刷時)、 静的なレンダリングを必須 (required) とするかもしれません (may) 。 静的なレンダリングは、 SVG文書中のアニメーションを無視して実行させないことで得ることにご注意 (アニメーションを実行して時刻 0 の初期フレームを撮影するのではありません)。 >>13

[121] advance width, advance heightアニメーションで変化させられません。 bounding boxアニメーションで変化することがあります。 文字列座標系 bounding box が変化するとしても、再配置は起きないので、 他の text element との衝突を防ぐために advance width / advance heightフォントの default line metrics の中にとどまるべきです (should) >>13

文脈

[23] SVG は必須ではありません。 >>13

[24] SVG グリフとは別に glyf, CFF , CFF2 のいずれかのグリフは必須です。 >>13

実装

[15] CSS at-rule: `@font-face`: OpenType SVG rendering | Can I use... Support tables for HTML5, CSS3, etc, https://caniuse.com/mdn-css_at-rules_font-face_opentype_svg

[16] >>15 によると FirefoxSafari は対応していますが、 Blink は対応していません。

[17] >>18 によると EdgeHTML は対応していたようですが...

[122] >>18 によると Firefoxアニメーションに対応していますが、 EdgeHTML は対応していませんでした。

関連

[22] SVG グリフには variablehint は適用できません。 >>13

[14] 色フォント, アニメーションフォント

歴史

SVG Fonts

[5] SVG Fonts は、 SVG を使って記述されたフォントでした。

[10] 一部の Webブラウザーが実装していましたが、 削除されました。

[7] 代替として、 通常の OpenType による Web Fonts を利用できます。


[12] SVG Fontsスタイル指定の挙動が理解不能になることや、 OpenTypeGSUB / GPOS に相当する機能が欠落していて実用が困難であるとされました。 >>2

[4] Note how the SVG currently implemented in browsers is a mix of SVG 1.… · whatwg/html@969c45b ( 版) https://github.com/whatwg/html/commit/969c45b2478d1d2d3be8564ec85dc316a53c8bcf

[6] Henri Sivonenさんのツイート: "Today I wrote a patch to make Gecko’s HTML parser unaware of IE5 databinding, Web Forms 2.0 repetition and SVG fonts." () https://twitter.com/hsivonen/status/855048094320398336

[8] Reference SVG 2 (dstorey著, ) https://github.com/whatwg/html/commit/7069de4fcf2f92295dded520ed5d7275addab2e7

[9] Acid3テストがありましたが、後に削除されました。

SVG-in-OpenType

[1] Well, I'm Back: SVG In OpenType: A New Approach To SVG Fonts ( ( 版)) http://robert.ocallahan.org/2013/02/svg-in-opentype-new-approach-to-svg.html

[2] SVGOpenTypeFonts - MozillaWiki ( ( 版)) https://wiki.mozilla.org/SVGOpenTypeFonts

[3] For the record: Adobe's Draft 1 of the OT 'SVG ' table ( (Sairus Patel 著, 版)) http://lists.w3.org/Archives/Public/public-svgopentype/2011Oct/0000.html

[18] OpenTypeフォントにSVGアニメーションを突っ込んでみる - にせねこメモ, https://nixeneko.hatenablog.com/entry/2017/10/31/211922

[19] SVG & colors in OpenType fonts - Mozilla Hacks - the Web developer blog, https://hacks.mozilla.org/2014/10/svg-colors-in-opentype-fonts/

[20] SVG Glyphs in OpenType Specification, , https://www.w3.org/2013/10/SVG_in_OpenType/

[21] SVG glyphs for OpenType Community Group, https://www.w3.org/community/svgopentype/