テキストのアウトライン化とSVG保存
このツールでは、お手持ちのフォントファイルを使ってテキストのアウトライン化ができます。TTF、OTF、WOFFのフォントを選ぶと、ベクターのパスだけでできたSVGが手に入ります。文字はフォントそのままの形を保つので、どのブラウザやデザインアプリでも同じ見た目になり、フォントのインストールは要りません。ロゴの文字、名前、看板、ビニールやレーザー、カッティングマシン用のカットデータに向いています。フォントとテキストはブラウザ内で処理され、アップロードされることはありません。
アウトライン化のやり方
- フォントファイルを選択、またはここにドロップを選び、10 MBまでのTTF、OTF、WOFFファイルを選んでください。
- テキストの欄に文字を入力するか貼り付けてください。1,000文字まで、複数行も入力でき、入力に合わせてアウトラインのプレビューが更新されます。
- プレビューを確認してください。透明な背景が見えるよう市松模様の上に表示されますが、この市松模様はファイルには含まれません。
- SVGをダウンロードを押してください。ファイル名はフォントファイル名に.svgを付けたものになります。
別のフォントを試すときは、フォント名の横のフォントを変更を押してください。入力したテキストはそのままで、新しいフォントで描き直されます。プレビューの下に表示される行（たとえば20パス、9.3 kB）で、SVGのパス数とサイズが分かります。
文字のパス化で作られるSVGの中身
ダウンロードしたSVGには<path>要素だけが入っています。<text>や<tspan>要素はなく、ファイルを開く環境にフォントがあるかどうかに左右されません。
- 初期設定では1文字につき1つのパスです。Illustrator、Inkscape、Figmaで1文字ずつ選択、移動、色変更がしやすくなります。
- 閉じた図形：すべての輪郭が閉じているので、カッターや線の効果でも完全な形として扱われます。
- 0 0から始まり、図案ぴったりに切り取られたviewBox。余白は付きません。
- 塗りは黒で、数値は小数第2位まで丸められるため、ファイルが小さく済みます。
フォントに組み込まれたカーニングと合字も反映されるので、「AV」や「fi」のような組み合わせは、フォントの意図どおりに間隔が取られ、つながります。
重なった文字を結合する（筆記体・カッティング用）
筆記体や手書き風のフォントは、線を重ねて文字をつないでいます。別々のパスのままだとその重なりが残り、ビニールやレーザーのカッターはつなぎ目のど真ん中を切ってしまいます。
書式を開き、重なった文字を結合にチェックを入れてください。重なった図形が1つのアウトラインにまとまり、テキスト全体が1つの複合パスとして保存されます。筆記体フォントの1単語なら、状態表示は1パスになります。Cricut Design Space、Silhouette Studio、レーザー用ソフトはこの形式のSVGを読み込めます。カットする前に、お使いのソフトで形を確認してください。
文字間隔と行間
どちらも書式の中にあり、動かすとプレビューが変わります。
- 文字間隔は-100から100まで（単位は1/1000 em）で、初期値は0です。マイナスにすると文字が近づき、プラスにすると離れます。
- 行間は0.80から2.50 emまでで、初期値は1.20です。テキストが2行以上のときだけ効果があります。
制限と注意点
- WOFF2とフォントコレクションには対応していません。WOFF2しかない場合は、そのフォントのTTF、OTF、WOFF版を使ってください。TTCコレクションは、先に単体のフォントファイルに分ける必要があります。
- フォントにない文字は除外されます。プレビューの下の注記に、除外された文字が表示されます。
- カラーフォントや絵文字フォントは、色のレイヤーではなく、黒の基本アウトラインだけが出力されます。
- 右から左へ書く文字や複雑な文字は、フォント自体が持つ内容にしたがいます。レイアウトに合うか、プレビューで確認してください。
- フォントのライセンスはアウトラインにも適用されます。下のよくある質問を参照してください。
このツールはテキストをアウトラインに変えるもので、フォントを編集したり、1文字の形を変えたりはしません。1文字ずつ形を整えたいときは、SVGをベクターエディタで開いてください。
ほかのテキスト・ベクターツール
スキャンしたPDFのページをベクターの図形にしたいときはPDFベクター変換を使ってください。ここでフォントを選ぶ前に、PDF、SVG、CSSファイルが使っているフォントを知りたいときはファイルのフォントと色を調べるを開いてください。フォントファイルなしでコピー＆貼り付けできる装飾テキストにはフォント変換ツールがあります。
テキストのアウトライン化についてのよくある質問
アウトライン化をオンラインで無料でできますか？
はい。フォントファイルを選び、テキストを入力して「SVGをダウンロード」を押すだけです。SVGにはベクターのパスだけが入っているので、フォントをインストールしなくても文字の形はそのままです。変換はブラウザ内で行われ、フォントファイルとテキストはアップロードされません。
文字をパスにしてSVGに保存するには？
TTF、OTF、WOFFのフォントを読み込み、テキストを入力して「SVGをダウンロード」を押してください。1文字ずつ閉じたpath要素として保存され、textやtspanの要素は使われないので、ブラウザでもInkscape、Illustrator、Figmaでも同じ表示になります。1つの複合パスにしたいときは、「書式」の「重なった文字を結合」をオンにしてください。
フォントファイルをSVGに変換できますか？
そのフォントで入力したテキストをSVGのアウトラインにできます。フォントからSVGへの変換で多くの人が求めているのは、これです。結果は名前やロゴの文字のような図案で、インストールして使えるSVGフォントではありません。アルファベット全体を変換したいときは、「テキスト」の欄にすべて入力する必要があります。
SVGをIllustrator、Inkscape、Figmaで使えますか？
はい。黒で塗られたパスと、図案に合わせて切り取られたviewBoxを持つ標準的なSVGなので、どのベクターエディタでもブラウザでも開けます。結合しない場合は1文字が1つのパスなので、1文字ずつ選択、色変更、移動ができます。
アウトラインに一部の文字が出ないのはなぜですか？
フォントは、自分が持っている文字しか描けません。フォントにない文字が含まれていると、空の四角ではなく除外され、プレビューの下の注記に「このフォントにない1文字を除外しました」のように表示されます。その文字に対応したフォントを選ぶか、テキストから取り除いてください。
筆記体フォントの重なった文字を結合するには？
「書式」を開き、「重なった文字を結合」にチェックを入れてください。筆記体や手書き風のフォントは、重なった線で文字をつないでいるため、カッティングマシンでは余分な線として現れます。結合すると重なりが1つのアウトラインにまとまり、テキスト全体が1つの複合パスとして保存されます。長いテキストでは少し時間がかかることがあります。
どのフォントでもアウトライン化した文字を商用利用できますか？
それはツールではなく、フォントのライセンスによります。アウトラインはフォント自体のデザインなので、SVGを販売するものに使う前に、そのライセンスで何が許されているかを確認してください。
画像をSVGにトレースするのと同じですか？
いいえ。トレースは画像のピクセルから形を推測します。このツールでは、正確な曲線がフォントファイルから直接取り出されるので、縁はフォントそのままにきれいです。ロゴや署名のような画像をベクターにしたいときは、画像をベクター化するツールが必要です。
おすすめ
-
エーワン 手作りステッカー 強粘着タイプ（5セット）アウトライン化した文字をカットして、手作りステッカーや看板に仕上げられます。
-
デザインの学校 これからはじめる Illustratorの本SVGをIllustratorで開いて、ロゴ文字の形を整える入門にぴったりです。
-
ワコム Intuos Medium ワイヤレス ペンタブレット文字の輪郭パスを細かく調整して、入稿用のロゴデータを仕上げられます。
無料でツールを続ける支えになります。✨
画像はイメージです。 Amazonのアソシエイトとして、Capsule Toolsは適格販売により収入を得ています。
