SVGに書体を埋め込む
SVGの中の文字は、書体そのものを持ち歩いているわけではありません。 何もしなければ、開いた環境にある書体で描き直されます。
何が起きるか
SVGのテキストは「この位置にこの文字を、この書体で」と書いてあるだけです。 指定した書体が相手の環境に無ければ、代わりの書体で描かれます。困るのは字形が変わることだけではありません。
- 文字幅が変わる: 図版は文字の幅を測って線の位置を決めています。幅が変われば、引き出し線と説明文の関係が崩れます
- 折り返しが変わる: 1行に収まっていた説明が2行になり、下の項目と重なります
- 日本語が出ないことがある: 欧文書体しか無い環境では、豆腐(□)になることがあります
- 気づきにくい: 作った本人の環境では正しく見えます。おかしくなるのは渡した先です
三つのやり方
| やり方 | 利点 | 欠点 |
|---|---|---|
| アウトライン化 文字を図形に変換する | どこで開いても同じ。書体のライセンスを気にしなくてよいことが多い | 文字として検索・選択・修正ができない。画数の多い日本語ではファイルが大きくなる |
| 書体を埋め込む ファイルの中に書体を入れる | 文字が文字のまま残る。検索も読み上げもできる | 書体のライセンスが埋め込みを許している必要がある。何もしないとファイルが重い |
| 画像にする PNGなどに書き出す | どこでも表示できる | 拡大に弱い。SVGの利点を全部手放すことになる |
埋め込みを軽くする「サブセット化」
日本語の書体は、数千から数万の字を持っています。丸ごと埋め込めば数MBになり、図版1枚のファイルとしては現実的ではありません。
そこでその図で実際に使った字だけを取り出して埋め込みます。これをサブセット化と言います。 型番構成図に出てくる字は多くても200字ほどなので、日本語を含んでいても数十KBに収まります。 このツールはこれを書き出しのたびに行っています(HarfBuzzという書体処理ライブラリをブラウザ上で動かしています)。
書体に無い字は、埋め込みようがない
サブセット化は「使った字を取り出す」処理なので、もともと書体に入っていない字は取り出せません。 その字はファイルから抜け落ち、開いた側の書体で描かれます。 ここで冒頭の話が戻ってきます。位置は「字がある」前提で計算済みなので、代わりの書体で描かれた分だけ字間が崩れます。
このツールが同梱している書体は日本語とラテン文字の範囲です。 韓国語・キリル文字・タイ文字などは字が入っていません。入れた場合は検査が「気になる点」で指摘します (実測すると、ロシア語は一文字ずつ間延びして描かれました)。
ライセンスの確認
書体の埋め込みが許されているかは、その書体のライセンス次第です。SIL Open Font License(OFL)は、文書への埋め込みを明示的に認めています。 商用フォントでは、埋め込みの可否・条件が製品ごとに定められているので、購入時の条項を確認してください。
このツールが埋め込む書体はすべてOFLのものです。書き出したファイルの配布・販売に、当サイトからの追加の制限はありません (ライセンス表記)。
受け取った側で確認すること
埋め込んだつもりで崩れている、という事故を防ぐには、作った環境以外で開いてみるのが確実です。
- 別の端末のブラウザにファイルをドラッグして開く
- その図で使っている書体が入っていない環境で開く
- PDFに貼るなら、貼ったPDFを別の端末で開く
文字が選択でき、行の折り返しが作ったときと同じなら、埋め込みは効いています。