TTFをSVGに変換

Q: SVGフォントはカーニングや合字を保持しますか？

一部のみです。SVGフォント形式では`hkern`要素でカーニングペアを、また複数文字のグリフも保存できますが、スモールキャップ、代替字形、文脈依存ルールなどのOpenTypeフィーチャーテーブルに相当するものはありません。それらが必要な場合はTTFを保管してください。

このページでは、TrueTypeフォントをSVGフォントに変換します。SVGフォントは1つのXMLファイルで、各文字が <glyph> 要素として収められ、その輪郭がSVGのパスデータで記述されています。アイコンフォント作成ツールやフォントエディターでは便利ですが、文字を描いた画像とは別物です。

またはTTF, OTF, WOFF … ファイルをここにドロップ ·

1ファイルあたり最大95 MB· 最大20ファイルまで· 30分後に削除

出力

変換先

ファイルは当社のサーバーで処理され、30分後に削除されます。

このツールの使い方

1
TTFをアップロード
.ttfファイルを1つまたは複数追加します。1回に最大20ファイル、1ファイルあたり95 MBまで対応しています。アイコンフォントもテキスト用フォントも使えます。
2
出力形式はSVGフォントのままにする
変換先はSVGフォントに設定されています。ヒンティングはSVG出力には適用されないため、そのオプションは表示されません。詳細設定のファミリー名ではこれまでどおりフォント名を変更できます。
3
SVGに変換
SVGに変換を押して.svgファイルをダウンロードします。テキストエディタ、Inkscape、FontForgeで開くと、グリフのパスを確認できます。

SVGフォントと文字のSVG画像の違い

TTF SVG変換を検索すると、2つの異なる目的が混在して見つかります。1つはSVGフォントです。2001年のW3C勧告SVG 1.0で定義されたフォント形式で、<font>要素の中に、文字ごとに<glyph>があり、Unicode値、送り幅、パスとしての輪郭を持ちます。もう1つは、ロゴの文字や名前など、すでに1行に組んでシェイプとして保存した、文字のSVG画像です。このコンバーターが作るのは前者です。フォントではなくロゴ画像をお持ちの場合は、PNGをSVGに変換でパスにトレースできます。

TrueTypeの輪郭をSVGパスデータに変換しても、形状は失われません。SVGパスはTrueTypeと同じ2次曲線に対応しているため、各輪郭はそのまま書き出されます。失われるのは輪郭以外の部分で、ヒンティング命令、単純なカーニングを超えるOpenTypeフィーチャー、OSがフォントをインストールするために必要なバイナリテーブルなどです。SVGフォントはWindowsやmacOSにインストールできません。

SVGフォントファイルの中身

SVGフォントのマークアップの抜粋例

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <font id="BrandSans" horiz-adv-x="1229">
      <font-face font-family="ブランド Sans" units-per-em="2048" ascent="1638" descent="-410" />
      <glyph unicode="L" glyph-name="L" horiz-adv-x="1100" d="M180 0V1456H360V160H1040V0Z" />
    </font>
  </defs>
</svg>

このページで作成するもの:1つのファイルに、文字ごとに1つの<glyph>がフォント単位で入り、y軸は上向きです。

FontForge、Inkscape、アイコンフォントツールで開けます
パソコンにはインストールできません
現在のChrome、Edge、Firefoxでは読み込まれません

色付きで重ね構造のグリフを収めたSVGテーブルが追加された、通常のOTFまたはTTFです。

ほかのフォントと同様にインストールできます
絵文字やマルチカラーの文字に使われます
対応状況はアプリやブラウザによって異なります

SVGフォントの誕生と衰退

SVG 1.0でfont要素が定義: 2001
SVG Webフォントが必要だった最後のiPhone Safari: iOS 4.1
2014年にSVGフォントを削除: Chrome 38
フォントの章を削除: SVG 2

TTF

TrueTypeフォント

TTFは、1980年代後半に Apple が開発して1991年にリリースし、のちに Microsoft にライセンスされた TrueType フォント形式です。2次曲線で字形のアウトラインを定義し、画面上で文字をくっきり見せるヒンティング命令を含みます。すべてのデスクトップOS、ワープロソフト、デザインアプリが対応しています。OpenType にある高度な組版機能の一部はなく、Webフォント形式よりサイズも大きくなります。

圧縮方式: 可逆
透過: –
アニメーション: –
登場時期: 1991 · Apple

TTF 変換

SVG

Scalable Vector Graphics(SVG)

SVGは、2001年に W3C が標準化した XML ベースのベクター形式です。ピクセルではなく図形、パス、テキストを記述するため、どんなサイズでも鮮明で、ロゴやアイコンでは通常とても小さなファイルになります。透過、CSSによるスタイル指定、スクリプト、アニメーションに対応し、すべてのブラウザーがそのまま表示できます。写真には向かず、複雑なイラストは描画が遅くなることがあります。Illustrator、Inkscape、Figma、ブラウザーで開いて編集できます。

圧縮方式: –
透過: 対応
アニメーション: 対応
登場時期: 2001 · W3C

SVG 変換

TTFからSVGへの変換では、各グリフの輪郭が編集可能なSVGパスデータとしてSVGフォント内に書き出されます。アイコンフォントツール、フォントエディタ、古いWebフォントキットで使われますが、最新のWebページでフォントを読み込む方法ではありません。