SVGの文字をアウトライン化する方法
この記事のポイント
- SVGの文字はほかのパソコンで変わることがあります
- 文字を図形(アウトライン)にしておけば安心
- 元のファイルは別に保存を
SVGの中の文字は、ふつう「この位置にこのフォントでこの文章を書く」という情報として保存されます。そのため、そのフォントがないパソコンで開くと別のフォントに変わって見え、EPSやPDFに変換する過程では文字そのものが抜けることもあります。この問題を避けるには、文字をアウトライン、つまり文字の形そのままの図形に変えておけば大丈夫です。
アウトライン化した文字は、もう文字として修正できません。元のファイルは別に保存しておき、書き出し用の複製で作業してください。
Adobe Illustrator
- 選択ツールで文字オブジェクトをすべて選びます。すべて変えるなら
Ctrl + A(MacはCmd + A)ですべて選択してもかまいません。 - メニューから書式 → アウトラインを作成を選ぶか、
Shift + Ctrl + O(MacはShift + Cmd + O)を押します。 - ファイル → 書き出し → 書き出し形式でSVGを選んで保存します。
Figma
FigmaにはSVGで書き出すときに文字をアウトライン化するオプションがあります。
- 書き出すフレームを選び、右パネル下のエクスポートで形式をSVGにします。
- 横の設定(…)ボタンを押し、テキストのアウトライン化(Outline text)がオンになっているか確認します。
- エクスポートボタンを押して保存します。
特定の文字だけを図形にしたい場合は、そのテキストレイヤーを選んで平坦化(Ctrl + E、MacはCmd + E)を使ってもかまいません。
Inkscape
- 文字オブジェクトを選びます。
- メニューからパス → オブジェクトをパスへを選ぶか、
Shift + Ctrl + Cを押します。 - ファイル → 名前を付けて保存で「プレーンSVG」を選んで保存すると、ほかのアプリとの互換性が高くなります。
うまく変換できたか確かめる
保存したSVGをメモ帳などのテキストエディタで開き、<textという文字を検索してみてください。1つもなければ、すべての文字が図形になっています。またはSVGをEPSに変換に入れてみてください。文字が残っていれば「文字 ○ 個は含まれませんでした」という注意が表示されます。
メニューの名前は、アプリのバージョンや言語設定によって少し違うことがあります。