SVG Font

オリジナルのベクターフォント形式——SVG パスをフォントグリフにマッピングする人間が読める XML 形式です。

.svg SVG Font Format
タイプXML ベースのベクター形式
圧縮なし（プレーンテキスト）
ファイルサイズ全形式中最大
サポートSafari のみ（他は廃止済み）
最適な用途デバッグ、ソース形式
Bobcornパイプラインソース

SVG Font とは？

SVG フォントは W3C が公開した SVG 1.1 仕様の一部として定義されています。従来のバイナリフォント形式とは異なり、SVG フォントはグリフのアウトラインを <font> 要素内の SVG パスデータとして埋め込みます。各グリフは <glyph> 要素で表され、その d 属性に形状を記述するベクターパスが含まれています。

本質的に、SVG フォントはフォントとしてパッケージングされた SVG ドローイングです。SVG ファイルで図形を描くのに使うのと同じパス構文が、文字のアウトラインやアイコンのアウトラインの定義に再利用されます。これにより、SVG フォントは一意な検査可能性を持ちます——任意のテキストエディタで開き、すべてのグリフの実際のジオメトリを読み取ることができます。

仕組み

SVG フォントファイルは、グリフのパスを標準的な XML 構造の中に包んでいます。以下に簡略化した例を示します：

SVG Font の構造 
<font id="MyIcons">
  <font-face font-family="MyIcons" units-per-em="1024"/>
  <glyph glyph-name="home" unicode="&#xE001;"
         d="M512 0L0 448h128v576h256V640h256v384h256V448h128z"/>
  <glyph glyph-name="search" unicode="&#xE002;"
         d="M..."/>
</font>

<font-face> 要素はフォントファミリー名と座標系（units-per-em）を宣言します。各 <glyph> は Unicode コードポイントをベクターパスにマッピングします。d 属性は通常の SVG <path> 要素とまったく同じパス構文を使用します。

これは Bobcorn のパイプラインにおける中間形式です。個々の SVG アイコンはまずこの SVG フォント構造に組み立てられ、その後バイナリ形式に変換されます：SVG Font → TTF → WOFF / WOFF2 / EOT。

メリットとデメリット

    メリット
  • 人間が読める——任意のテキストエディタで開ける
  • グリフのパスやメタデータのデバッグが容易
  • 完全なベクターベースで無限にスケーラブル
  • ソースを確認するためのコンパイルが不要
    デメリット
  • 全フォント形式中最大のファイルサイズ
  • Chrome、Firefox、Edge では廃止済み
  • 圧縮がまったくない
  • ヒンティングのサポートなし
  • Windows でのレンダリング品質が低い

ブラウザサポート

SVG フォントのサポートはほとんどの主要ブラウザから削除されています。Chrome はバージョン 38（2014 年）で SVG フォントのサポートを廃止し、Firefox は実装したことがありません。Chromium ベースの Edge も対応していません。唯一残っているのは Safari と iOS Safari で、今でも SVG フォントをレンダリングします。

実用的なウェブ用途では、SVG フォントは事実上レガシー形式です。エンドユーザー向けの配信形式として頼るべきではありません。代わりに WOFF2 を使用してください。

SVG Font を使う場面

  • フォント生成の問題をデバッグする場合——プレーン XML なので、パスデータを直接読み取り、元の SVG アイコンと比較して問題を診断できます。
  • ビルドパイプラインのソース形式として——多くのフォント生成ツール（Bobcorn を含む）は、バイナリ形式に変換する前の中間表現として SVG フォントを使用します。
  • レガシー iOS < 5 のサポート——今日では極めてまれですが、WOFF サポート以前の古い iOS デバイスはウェブフォントとして SVG フォントしか使用できませんでした。
Bobcorn での使用
Bobcorn では、SVG Font は生成パイプラインの最初のステップです。SVG アイコンは SVG フォントに組み立てられ、その後 TTF に変換され、TTF から WOFF、WOFF2、EOT に変換されます。デバッグ目的で SVG フォントファイルをエクスポートすることができます——グリフが正しく表示されない場合にパスデータを検査するのに特に便利です。