SVGに書体を埋め込む

SVGの中の文字は、書体そのものを持ち歩いているわけではありません。 何もしなければ、開いた環境にある書体で描き直されます

何が起きるか

SVGのテキストは「この位置にこの文字を、この書体で」と書いてあるだけです。 指定した書体が相手の環境に無ければ、代わりの書体で描かれます。困るのは字形が変わることだけではありません。

三つのやり方

やり方利点欠点
アウトライン化
文字を図形に変換する
どこで開いても同じ。書体のライセンスを気にしなくてよいことが多い文字として検索・選択・修正ができない。画数の多い日本語ではファイルが大きくなる
書体を埋め込む
ファイルの中に書体を入れる
文字が文字のまま残る。検索も読み上げもできる書体のライセンスが埋め込みを許している必要がある。何もしないとファイルが重い
画像にする
PNGなどに書き出す
どこでも表示できる拡大に弱い。SVGの利点を全部手放すことになる

埋め込みを軽くする「サブセット化」

日本語の書体は、数千から数万の字を持っています。丸ごと埋め込めば数MBになり、図版1枚のファイルとしては現実的ではありません。

そこでその図で実際に使った字だけを取り出して埋め込みます。これをサブセット化と言います。 型番構成図に出てくる字は多くても200字ほどなので、日本語を含んでいても数十KBに収まります。 このツールはこれを書き出しのたびに行っています(HarfBuzzという書体処理ライブラリをブラウザ上で動かしています)。

書体に無い字は、埋め込みようがない

サブセット化は「使った字を取り出す」処理なので、もともと書体に入っていない字は取り出せません。 その字はファイルから抜け落ち、開いた側の書体で描かれます。 ここで冒頭の話が戻ってきます。位置は「字がある」前提で計算済みなので、代わりの書体で描かれた分だけ字間が崩れます。

このツールが同梱している書体は日本語とラテン文字の範囲です。 韓国語・キリル文字・タイ文字などは字が入っていません。入れた場合は検査が「気になる点」で指摘します (実測すると、ロシア語は一文字ずつ間延びして描かれました)。

ライセンスの確認

書体の埋め込みが許されているかは、その書体のライセンス次第です。SIL Open Font License(OFL)は、文書への埋め込みを明示的に認めています。 商用フォントでは、埋め込みの可否・条件が製品ごとに定められているので、購入時の条項を確認してください。

このツールが埋め込む書体はすべてOFLのものです。書き出したファイルの配布・販売に、当サイトからの追加の制限はありません (ライセンス表記)。

受け取った側で確認すること

埋め込んだつもりで崩れている、という事故を防ぐには、作った環境以外で開いてみるのが確実です。

文字が選択でき、行の折り返しが作ったときと同じなら、埋め込みは効いています。

SVGとPNGの使い分けを読む