なぜ SVG を TTF に変換するのですか？
SVG は2Dベクターグラフィックスを XML パスとして保存しますが、 TTF は文字やアイコンセットをレンダリングするためのグリフのアウトラインを保存します。開発者は各アイコンを SVG パスとして描画し、それらを .ttf にコンパイルすることで、CSS が文字コードを介して各グリフを指定できるようにします。タイプデザイナーも文字の SVG を作成し、1990年代初頭からクロスプラットフォームの標準である TrueType フォントとしてパッケージ化します。
SVG から TTF への変換方法
FontCreator APP
グリフごとの SVG ファイルをインポートし、それぞれを文字スロットに割り当てて、完成したフォントを .ttf としてエクスポートします。
Glyphs APP
SVG パスをグリフのアウトラインとしてインポートし、フォントメトリクスを設定して .ttf にエクスポートします。
FontForge OPEN-SOURCE
«File > Import» から各 SVG ファイルをグリフアウトラインとしてインポートし、各スロットの送り幅とベースラインを設定した後、 «File > Generate Fonts» を使用して TrueType を選択し .ttf をエクスポートします。
SVG を変換するプログラム
これらの形式について
.SVG
Scalable Vector Graphics
SVG ファイルは Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）画像です。これは W3C のオープン標準であり、2D グラフィックスを XML テキストとして保存するため、品質を損なうことなく任意のサイズに拡大縮小できます。Chrome、Edge、Firefox、Safari…
.SVG の詳細を開く →
.TTF
TrueType Font
TTFファイルはTrueType Font（トゥルータイプフォント）です。1991年にAppleによって作成されたスケーラブルなベクター書体で、現在はすべての主要なOSでサポートされています。インストールするには、Windowsではファイルをダブルクリックして «インストール» をクリックし、macOSでは «Font Book» を使用します。Linuxでは、ファイルを…
.TTF の詳細を開く →品質と注意点
- 単一の SVG イラストから使用可能な
.ttfを作成することはできません。各グリフは、1つのクリーンなパスを含む個別の SVG ファイルである必要があります。 - グラデーション、マスク、フィルタ、埋め込みラスターなどの複雑な SVG 機能はフォントのアウトラインではサポートされていません。パスのジオメトリのみが転送されます。
- 各グリフにはフォントエディタで送り幅とベースライン位置を設定する必要があります。そうしないと、レンダリングされたテキスト内で文字がずれて表示されます。
よくある質問
単一のロゴ SVG を TTF フォントファイルに変換できますか？
<font> 要素を持つ SVG フォントファイルが必要ですか、それとも通常の SVG ファイルでいいですか？
作成された TTF は Windows、 macOS、 Linux で動作しますか？
アイコンフォントとテキストフォントの違いは何ですか？
.ttf 形式を使用します。アイコンフォントはアイコンの SVG パスを文字コードポイントに割り当て、テキストフォントは文字のパスを割り当てます。フォントエディタでのワークフローは同一です。
