svgのaltGlyph要素を紐解く

svgの要素の中には仕様のみを読んだだけではその存在意義を理解できないものもあります．中でもaltGlyph要素は構造が複雑であるにもかかわらず，説明が極端に少なく導入することのメリットを理解することが困難です．

従って今回はこのaltGlyph要素を取り巻く背景について筆者なりの解説を付けることで少しでも判りやすくすることを目標とします．なお，altGlyph要素はsvgの中でもサポートが極端に遅れている機能であり，仕組みが判ったとしてもそれを使うことができるとは限りません．

また，本記事の内容は筆者の独自研究なので間違いが含まれているかも知れません．

altGlyph要素：代替グリフの利用

altGlyph要素の導入意義はw3cでは次のように説明されています．

リガチャ, 特殊な用途のフォント（例えば楽譜用のフォント）, アジア系テキストのための代替グリフなど、文字データに通常は対応しないグリフの異なるセットが必要になる状況がある。

つまりこの「グリフの異なるセットが必要になる状況」が鍵となっているようです．ではこの状況はどのような事を指しているのでしょう？

文字を電子化する際の悩ましい問題

ヒトは自分の意志や文明を他者や後世に伝えるため文字を発明しました．この文字は通常人の手により記述されるため， 非常に柔軟な構成をとるのが常でした．従ってこの文字情報をコンピュータで扱うにはこの柔軟性を如何に扱うかが肝となります．例えば次のようなケースが挙げられます．

• リガチャは合字とも呼ばれ，一連なりの特定の文字列を本来のグリフ（文字の形）とは異なるグリフで描画する事を指します．言語によってはより複雑なリガチャ構成をとるものもあるようです．その他にも「グラム」を便宜上「㌘」と記述するのもこの合字の範疇と考えられます．
  例）欧文におけるfi→fi，AE→Æ，SS→ß等
• 日本語では異体字と呼ばれる「概念上は同じ文字なのだが異なるグリフをもつもの」が存在します．また，中国語と日本語とで漢字の形が微妙に異なるのも異体字と呼べます．
  例）高と髙（はしごたか），崎と﨑（たちさき）等

つまり慣例的に用いられている文字には1文字：1グリフとして扱う事が困難なケースが存在するのです．例えば文字データとしては「高」を用いたいが，文脈上「髙」として表示したいケースがあるわけです．

従って，unicode等で定義されている「文字とグリフデータとのマッピングにとらわれない，自由なマッピングを施したい」というのがaltGlyph要素の導入動機となります．

Note．unicodeでは仕様として「異体字セレクタ」と呼ばれる仕組みを導入しており，仕組み上は異体字の表示ができることになっています．

使い方）異字体をもつ文字の後ろに異体字セレクタに相当するコード（U+FE00等）を挿入する．

この並びのことを異体字シーケンス（ivs ideographic variation sequence）と呼びます．
※ですが，この異体字セレクタを用いるにはフォントがこの仕組みをサポートしている必要があったりと，一般的に使えるわけではないようです．

グリフ置き換えのパターン

それではグリフの置き換えが発生するパターンとしてはどのようなものが考えられるでしょうか？文字の数に着目すると次の3つのパターンに集約することができるでしょう．

1. 単一文字→単一グリフ
   日本語環境における異体字はこのケースに相当します．
2. 複数文字→単一グリフ
   欧文環境における合字はこのケースに相当します．
3. 単一文字or複数文字→複数グリフ
   例えば「株式会社」を「（株）」と表示するのがこのケースに相当します．

svgにはこれらの処理を行うための仕組みが二つ提供されています．

• svgフォント
  svgフォントのglyph要素には一連なりのユニコード列に対して一つのグリフを定める仕組みが備わっています．従って上記の1・2のパターンに対応することができます．
  また，ユニコード列として先ほど示した異体字シーケンスを指定することで擬似的に異体字セレクタと同等の処理を行わせることができます．
• altGlyph要素
  altGlyph要素はsvg内部でしか動作しないものの，上記全てのパターンに対処することができます．

なおsvgフォントの使用例はこちらで紹介されています．

• Web Fonts で SVG Fonts を利用する
• SVGフォントでIVSを表示するテスト

altGlyph要素の使い方

それではaltGlyph要素はどのように使うのでしょうか？
基本的にaltGlyph要素はtspan要素とまったく同じ使われ方をします．つまり，ベースとなるtext要素の子として文字列の一部を指し示すのがaltGlyph要素の役割です．その上で書き換え先のグリフ情報を参照するのがtspan要素と決定的に異なる部分です．altGlyph要素で囲まれた部分が参照しているグリフで置き換えられます．

また，参照するグリフの数によって参照する方法が変わります．

• 単一のグリフを参照する場合はaltGlyph要素から直接グリフを参照します．
• 複数のグリフを参照する場合は，予めaltGlyphRef要素にグリフ参照に相当するglyphRef要素のリストを定義し，その内容を参照するようにします．

ここで参照するグリフはglyph要素に限らず，一般のフォントに含まれているグリフを参照可能とされています．ですが，筆者は具体的なサンプルを見つけることができませんでした．

例を示します．(実際の動作はこちらで確認できます．※編集ボタンを押さないと正しく動作しないかも知れません)

• 単一のグリフを参照した例．※operaでの描画結果を掲載しています

<svg>
    <defs>
        <font horiz-adv-x="1024">
            <font-face units-per-em="1024"/>
            <glyph id="glyph" d="M 0,0 h 1024 v 1024 z"/>
        </font>
    </defs>
    <text x="0" y="100" fill="purple" font-family="sans-serif" font-size="20">
        本日は<altGlyph xlink:href="#glyph">晴天</altGlyph>なり．
    </text>
    <!--glyphRef属性に指定する値が不明-->
    <text x="0" y="120" fill="purple" font-family="sans-serif" font-size="20">
        本日は<altGlyph format="truetype" glyphRef="1">晴天</altGlyph>なり．
    </text>
</svg>

• 複数のグリフを参照した例．

<svg>
    <defs>
        <font horiz-adv-x="1024">
            <font-face units-per-em="1024"/>
            <glyph id="glyph1" d="M 0,0 h 1024 v 1024 z"/>
            <glyph id="glyph2" d="M 0,0 v 1024 h 1024 z"/>
        </font>
        <altGlyphDef id="seiten">
            <glyphRef xlink:href="#glyph1"/>
            <glyphRef xlink:href="#glyph2"/>
        </altGlyphDef>
    </defs>
    <text x="0" y="100" fill="purple" font-family="sans-serif" font-size="20">
        本日は<altGlyph xlink:href="#seiten">晴天</altGlyph>なり．
    </text>
</svg>

残った問題

このようにsvgでは自由にグリフを書き換えることができることが判りました．が，問題も残りました．その最たるものはサポートする環境が非常に少ない点です．svgフォントはwebkit系のブラウザで動作するなどそれなりに使い途があるものの，altGlyph要素となると残念ながらoperaでしか動作しません．

勿体ないとも思うのですが，よくよく考えてみるとこの機能ってsvgに必要なのでしょうか？どちらかというとhtml等の文書において重要であって，グラフィックを主に扱うsvgでは少し場違いな感じもするのです．従って今後サポートが広がること無くひっそりと姿を消すことも考えられます．もう少しsvgならではの使い途といったものがあれば良いのですが，どうにもこれといったイメージが沸かないんですよね．

参考文献
異体字セレクタ
SVGフォントでIVSを表示するテスト
Web Fonts で SVG Fonts を利用する