SVGカラーフォントの作り方

チュートリアル

Rainer Erich Scheichelbauer著

2022年7月20日 2017年1月20日公開

Glyphsには、OpenType-SVGフォントを作成するためのさまざまな方法があります。このチュートリアルを読めば、そのほとんどすべてを理解できるでしょう。

SVGについて調べると、Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）の略であることがわかるでしょう。それはそれで良いのですが、フォントの領域でこの用語を使うと、実際には異なるものを指すことがあります。

SVGフォントフォーマット
SVG OpenTypeテーブル
方法A：外部SVG画像ファイルを使う
1. 旧バージョン
2. プロのヒント
方法B：既存のカラーフォントから作る
方法B、選択肢1：CPAL/COLRフォントを変換する
1. プロのヒント
方法B、選択肢2：レイヤーフォントを変換する
方法B、選択肢3：sbixフォントを変換する
1. プロのヒント
方法C：ネイティブのColorレイヤーを使う
カスタムパラメータ
便利なスクリプト
アプリケーションの対応状況
SVGについてもっと詳しく
関連記事

SVGフォントフォーマット

まず、かつてウェブフォントのファイル形式としてSVGというものがありました。そのファイル名の拡張子は.svg、またはzip圧縮された.svgzでした。これはすぐに忘れてください。なぜなら、初期のiPhoneのSafariでしか本格的にサポートされていなかったからです。そして幸いなことに、この形式は廃れました。ファイルサイズは他のフォント形式に比べて巨大で、単純なアウトラインしか提供しませんでした。つまり、カーニングもヒンティングもなく、OpenTypeテーブルが提供するその他の優れた機能もありませんでした。言い換えれば、これはOpenTypeフォントですらなかったのです。GlyphsはOpenTypeフォントエディタなので、このようなSVGフォントを生成することはできません。

このチュートリアルは、廃止されたレガシーなSVGフォントファイル形式に関するものではありません。

SVG OpenTypeテーブル

現在広く使われているウェブフォントのファイル形式はWOFFとWOFF2です。もちろんそれだけではありませんが、簡単に言えば、WOFFは圧縮されたOpenTypeフォントです。デスクトップ版の兄弟であるCFF/OTFやTTFもOpenType形式ですが、それぞれに特性があり、WOFFほど圧縮効率は高くありません。OpenTypeフォントがOpenTypeフォントたる所以は、その内部構造にあります。それはOpenTypeテーブルと呼ばれるものの集合体であり、そのテーブルの一つに、SVGベースの情報を含むSVGテーブルがあり得ます。このようなSVGテーブルを含むフォントは、一般的にOpenType-SVG、時にはSVG-in-OT、あるいは単にSVGカラーフォントと呼ばれます。SVGテーブルは主にMozillaとAdobeによって開発され、推進されました。そして時々、OpenType-SVGのロゴとしてこれを目にするでしょう。

このチュートリアルは、このようなOpenType-SVGカラーフォントに関するものです。

Glyphsでは、SVG情報をフォントに取り込む方法が3つあります。

方法A：外部の.svg画像ファイルを、特殊なsvgレイヤーに埋め込む。
方法B：既存のカラーフォントの設定から作る。後者は、異なるマスターを持つレイヤーフォント、CPAL/COLRフォント、またはAppleスタイルのsbixフォントのいずれかです。
方法C：Colorレイヤーと呼ばれるものからネイティブに作る。

それでは、早速見ていきましょう。

方法A：外部SVG画像ファイルを使う

もしSVGグラフィックがすでに個別のファイルとして手元にあるなら、それを各グリフに配置して、SVGテーブルを持つフォントを書き出すことができます。この方法を使えば、ベクターアニメーションのような凝ったものも含め、SVGファイル形式の能力を最大限に活用できます。

準備として、.glyphsファイルを好きな場所に保存し、SVGファイルを入れるためのImagesというサブフォルダを作成することをお勧めします。これは、.glyphsファイルには画像への相対パスのみが保存されるため、サブフォルダに入れておくとファイルをまとめて管理しやすくなるからです。

さて、例が必要です。もし手元にSVGがなければ、ここに一つ用意しました。大文字のOに、回転する赤い円のアニメーションを試してみましょう。このSVGコードを選択してコピー（Cmd-C）してください。

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1000" height="1000" viewBox="-400 -400 800 800">
 <title>SVG animation using SMIL</title>
 <circle cx="0" cy="100" r="200" stroke="none" fill="red">
  <animateTransform
   attributeName="transform"
   attributeType="XML"
   type="rotate"
   from="0"

   to="360"
   begin="0s"
   dur="1s"
   repeatCount="indefinite"></animateTransform>
 </circle>
</svg>

それを、TextMate、SublimeText、Atomなど、お好みのプレーンテキストエディタの新しいウィンドウにペースト（Cmd-V）します。

そして、そのファイルをImagesフォルダにO.svgとして保存します。Finderでは、セットアップ全体はこのようになるでしょう。

.glyphsファイルに戻り、大文字のOを準備します。編集ビューでOを開き、レイヤーパレットでプラスボタンを押してレイヤーの複製を追加し、それを右クリックして表示されるコンテクストメニューからレイヤータイプとしてsvgを選択します。

旧バージョン

Glyphs 2では、コピーボタンで複製し、新しいレイヤーの名前をsvg（すべて小文字）に変更します。

ここがポイントです。マスターレイヤーに置いたものは、SVGテーブルに保存されたカラー情報を表示できないアプリケーションで見える、白黒のフォールバックグリフになります。ちなみに、マスターレイヤーとはレイヤーパレットで太字で表示されているレイヤーのことで、この例では「Regular」という名前のレイヤーです。

しかし、新しく作ったsvgレイヤーには、.svg画像ファイルをドラッグ＆ドロップできます。すぐに表示されるはずです。ただし、アニメーションは表示されません。画像は好きなようにサイズ変更したり移動したりできます。

字幅についての注意点：svgレイヤーはマスターレイヤーから字幅を継承するので、グリフの字幅を設定したい場合はマスターレイヤーに切り替える必要があります。この例では、配置したSVGを拡大縮小したり変形したりしていないと仮定して、字幅を800に設定するのが理にかなっています。そのためには、レイヤーパレットでRegularレイヤーをクリックし、グレーの情報ボックスで字幅を800に変更します。

いずれにしても、フォントをウェブフォントとして書き出します。ファイル > 書き出し > OTFを選び、形式としてWOFFとWOFF2を使用します。CFFかTTFかは問題にならないはずです。

すべてのブラウザがOpenType-SVGをサポートしているわけではありません。OpenType-SVGフォントをテストするブラウザを選ぶ際には、このチュートリアルのサポート状況のセクション（下記参照）を確認してください。そのためには、WOFFを表示するためのHTMLとCSSコードを含むHTMLファイルを用意するか、mekkablue scriptsからTest > Webfont Test HTMLスクリプトを実行することができます。このスクリプトは、最後に使用されたウェブフォントの書き出し先に、現在のフォント用のHTMLファイルを生成します。

プロのヒント

まだスクリプトに慣れていない方は、少し時間を取ってGlyphsを拡張するチュートリアルに目を通し、ウィンドウ > プラグインマネージャーを閲覧してみてください。

このスクリプトは、デフォルトのブラウザでHTMLファイルを開き、同時にFinderでそのファイルが入っているフォルダも開いてくれるので便利です。あとは、HTMLファイルをDockのFirefoxアイコンにドラッグするか（または右クリックしてこのアプリケーションで開く > Firefox.app）、大文字のOを入力すれば、ほらこの通り。

ジャジャーン！でも注意してください。フォント内のアニメーションはプロセッサに大きな負荷をかける傾向があります。コンピュータのファンがすごい音を立てて回り出すかもしれませんし、すべてのモバイルユーザーはあなたのせいでバッテリーを消耗させられるので、あなたに対して複雑な感情を抱くことになるでしょう。警告しておきます。

方法B：既存のカラーフォントから作る

Glyphsでは、さまざまな形式の既存のカラーフォントを取り込み、SVGとして書き出すことができます。これらのソース形式のいずれかでカラーフォントを設定しておくと、ソース形式とSVGの両方で書き出せるという利点があります。

選択肢は3つあります。

CPAL/COLRフォント：事前に定義されたカラーパレットの色にそれぞれリンクされたColor Paletteレイヤーを持つグリフを含むフォント。
レイヤーフォント：互いに重ね合わせることができる2つ以上のマスターを持つフォント。マスターは互換性がある必要はありませんが、Master Colorパラメータを持っている必要があります。
sbixフォント：さまざまな解像度のビットマップ画像がiColorレイヤーに配置されたグリフを含むフォント。

これらの選択肢を見て、どれかを選び、SVG書き出しを追加する方法を以下で読んでください。

方法B、選択肢1：CPAL/COLRフォントを変換する

準備：MicrosoftスタイルのCPAL/COLRフォントについて読む。ファイル > フォント情報 > フォントの最初のマスターのカスタムパラメータセクションに一つ以上のColor Palettesが設定されており、グリフにColor Paletteレイヤーがあることを確認してください。

ファイル > フォント情報 > 書き出しで、SVGテーブルを含むフォントの新しいインスタンスを作成します。適切なスタイル名を付けます。
カスタムパラメータColor Layers to SVGを追加します。
カスタムパラメータColor Palette for SVGを追加し、その値を目的のカラーパレットのインデックスに設定します。上記のColor Palettesパラメータで定義したパレットが一つしかない場合は、値として0を使用します。
最後に、カスタムパラメータExport SVG Tableを追加し、その値のチェックボックス（右側のもの）がオンになっていることを確認します。

プロのヒント

他のカラーテーブルを含まない、純粋なSVGフォントが欲しいですか？カスタムパラメータExport COLR TableとExport sbix tableを追加し、それらの値のチェックボックスをオフにしてください。

方法B、選択肢2：レイヤーフォントを変換する

準備：レイヤーフォントについて読む。ファイル > フォント情報 > マスターで、Master Colorパラメータを使って色を設定していることを確認してください。

ファイル > フォント情報 > 書き出しで、左下のプラスボタンをクリックし、表示されるメニューからインスタンスを追加を選択して、SVGテーブルを含むフォントの新しいインスタンスを作成します。MulticolorやSVGなど、自分にとって分かりやすいスタイル名を付けます。
カスタムパラメータColor Layers to SVGを追加し、その値のチェックボックス（右側のもの）がオンになっていることを確認します。
カスタムパラメータExport SVG Tableを追加し、その値のチェックボックス（右側のもの）がオンになっていることを確認します。

方法B、選択肢3：sbixフォントを変換する

準備：Appleスタイルのsbixフォントについて読む。複数のiColor解像度がある場合は、SVGにしたい解像度のsbix画像がすべて揃っていることを確認してください。

ファイル > フォント情報 > 書き出しで新しいインスタンスを作成します。
カスタムパラメータSBIX to SVGを追加し、値として希望するiColorのサイズを指定します。これにより、同じサイズインデックスのiColorレイヤーからsbix画像が取得され、SVGグラフィックに変換されます。例えば、カスタムパラメータの値に256を指定すると、GlyphsはすべてのiColor 256レイヤーを探し出し、それらをSVGに変換します。

プロのヒント

方法C：ネイティブのColorレイヤーを使う

まず、用語に注意しましょう。Glyphsでは「カラーレイヤー」という表現が2つの意味で使われます。一つはMicrosoftスタイルのCPAL/COLRレイヤーを指します。しかし、この用語はGlyphs 3で新しく導入されたネイティブのColorレイヤーを意味することもあります。この2つを区別するため、後者を「ネイティブ」と呼び、「Color」を大文字のCで表記します。なぜなら、レイヤータイプメニューではそのように表示されるからです。

さて、おしゃべりはこれくらいにして、始めましょう。レイヤーをレイヤータイプColorに切り替えます。このレイヤーはマスターレイヤーであってもかまいません。これを行うには、レイヤーパレットでレイヤーを右クリックし、メニューからColorを選択します。

正しくできていれば、パレットのレイヤー名の横に小さなカラーホイールが表示されます。

次に、表示 > 情報を表示（Cmd-Shift-I）がオンになっていることを確認してください。そうでなければ、次のステップのグラフィックオプションが表示されません。

さあ、描画を始めましょう。いつものようにシェイプを追加します。ただし、一つだけ違う点があります。ウィンドウの右下隅に、現在選択されているシェイプの属性セクションが表示されます。

線や塗りを追加し、それぞれのカラーフィールドをダブルクリックして色を選択できます。そして、こんなこともできます。

パレットでは、「属性」という単語の横にあるプラスボタンから、追加の属性を追加することもできます。グラデーション、シャドウ、グローなど、思いつく限りのものが。しかし注意してください。これらすべてがフォントでサポートされているわけではありません。また、フォントに書き込まれたとしても、それを使用するアプリでサポートされていない可能性もあります。安全を期すなら、色の塗りと色の線だけを使用してください。

書き出す前に、ファイル > フォント情報 > 書き出しでインスタンスを設定し、カスタムパラメータColor Layers to SVGを追加します。

これで準備完了です。

カスタムパラメータ

ファイル > フォント情報 > 書き出し（Cmd-I）で、各インスタンスのカスタムパラメータに、以下の3つのパラメータのいずれか、またはすべてを追加できます。

Export COLR Table
Export SVG Table
Export sbix Table

これらは、どのカラーテーブルを生成して実際にOpenTypeフォントに含めるか、また含めないかを制御するためのものです。ウェブフォントのファイルサイズを削減するために、いずれかのテーブルの書き出しを有効にし、他のすべてを無効にしたい場合があるでしょう。例えば、上記で説明した既存のカラーフォントを使用する方法、つまりCPAL/COLRまたはsbixの設定に基づいている場合（上記の「方法B」を参照）、他のテーブルの作成を抑制したいかもしれません。そうすることで、読み込みがずっと速いsbix専用、CPAL専用、SVG専用のカラーフォントを作成できます。

便利なスクリプト

Henrique Beier氏のHarbor Type scriptsには、SVG Export and SVG Importというスクリプトが含まれています。これはDrawBotを使ってGlyphs内部から外部SVGを生成し、それを再インポートしてSVGカラーフォントを作成します。

アプリケーションの対応状況

この記事を書いている時点では、SVGテーブルはFirefoxバージョン32以降、Windows 10以降のMicrosoft Wordでサポートされています。また、いくつかのAdobeアプリでもサポートされており、PhotoshopはCC 2017以降、IllustratorはCC 2018以降、InDesignはCC 2019以降で対応しています。そして最近では、AppleもSVGフォントのサポートを開始しました。macOS 10.14 Mojave以降では、Macアプリ（Safari、テキストエディット、Pixelmator、Sketch、Affinity Designerを含む）で正しく表示できるはずです。同じことはiOS 12以降にも当てはまり、Procreateのバージョン4.3以降はOpenType-SVGを扱うことができます。

繰り返しになりますが、注意してください。アプリやシステムが公式にSVGをサポートしているからといって、SVGのすべての機能がサポートされているわけではありません。