SVGでフォントが崩れる理由とアウトライン化の重要性

※本記事のコードは参考用です。使用前にご自身で動作確認をお願いします。

Web制作やデザインの現場では、SVG形式のロゴやアイコン、図表などが広く使われています。SVGは、画質が劣化せず拡大・縮小に強い上に、軽量でWeb表示にも適した非常に便利な形式です。
しかし、使い方を誤ると「フォントが崩れる」「デザインが再現されない」といった問題が発生し、納品後のトラブルにもつながりかねません。

この記事では、SVGでフォントが崩れる理由、SVGにおけるテキスト（<text>要素）の性質、そしてそれを防ぐためのアウトライン化の重要性について、ツール別の実践方法も交えて詳しく解説します。

SVGとは

SVG（Scalable Vector Graphics）は、XML形式で記述されたベクター画像フォーマットです。拡大縮小しても劣化しないのが特徴で、Webでも幅広く使われています。また、SVGはテキストファイルとしても扱えるため、テキストエディターやコードエディターで中身を直接確認・編集することも可能です。

SVGには、図形のパス（直線や曲線）だけでなく、テキスト要素（<text>）を含むこともできます。これは他の画像形式（PNGやJPEG）と大きく異なる特徴です。

SVGにおけるテキストの性質

SVGファイルの中で文字を使う場合、それは<text>要素としてXML構造に組み込まれます。この<text>要素には、以下のような性質があります

  • フォントファミリーやサイズは属性として指定される（例：font-family="Helvetica"）
  • 実際のフォントファイルはSVGに埋め込まれていない（あくまで参照）
  • 表示環境にそのフォントがない場合、代替フォントで描画される
  • Webサイトの場合、CSSの影響を受ける可能性がある

つまり、SVGに文字を残したまま使用する場合、環境依存のリスクが常に付きまといます。

なぜフォントが崩れるのか

SVG内にテキストがある場合、SVGファイルにはフォントの名前だけが記述されており、実際のフォントデータは含まれていません。

  • 閲覧するPCやブラウザにそのフォントがインストールされていないと、代替フォントで表示される
  • Webページに組み込むと、CSSのスタイルがSVGにも適用されることがある
  • フォントによって文字幅や太さ、位置が微妙に変わり、デザインが崩れる原因になる

この現象は、Illustratorやブラウザで開いたとき、あるいは実際にWebページで表示したときに起きます。
PCでSVGをプレビューした際に、文字の形やフォントがおかしくなっていないかを事前に確認しておくと安心です。

アウトライン化とは

アウトライン化とは、テキストをパス（輪郭）に変換する処理のことです。

アウトライン化されたテキストは、フォント情報に依存せず図形として固定されるため、どの環境でも見た目が崩れません。
ただし、アウトライン化されたテキストは、後から文字の編集ができなくなります。そのため、元データを別途保存しておくことが大切です。かならずアウトライン化前のデータを別途保存しておくようにしましょう。

SVGのアウトライン化の有無を見分ける方法

実際に確認するには、SVGファイルの中身を直接見て判断するのが確実です。
SVGはXML形式のテキストファイルなので、テキストエディターやVSCodeなどのコードエディターで開くことができます。画像としてプレビューされることもありますが、必ずテキスト表示に切り替えて中身を確認しましょう。

アウトライン化されていないSVGの特徴

  • SVGの中に <text> タグが含まれている
  • <text> タグの中に文字がそのまま記述されている
  • font-familyやfont-sizeといったフォント情報の属性が見られる

以下の例のように、文字情報がテキストとして残っている場合は、アウトライン化されていません。

<text x="10" y="20" font-family="Arial" font-size="16">テキスト</text>

アウトライン化されているSVGの特徴

  • <text> タグが存在せず、文字はすべて <path> タグなどのパス情報で表現されている
  • フォント関連の属性がなく、形状として文字がパスデータに置き換わっている

以下の例のように、文字の形がパスデータとして定義されていれば、アウトライン化されています。

<path d="M10 10 L20 20 ..." fill="#000000"/>

VSCodeでの確認方法

画像プレビューが表示された場合は、画面右上の「開くエディター切り替え」アイコンや右クリックの「ファイルを開くエディターの選択」→「テキストエディター」を選択してテキスト表示に切り替えてください。

各ツールでのアウトライン化手順

主要なデザインソフトでのアウトライン化の手順です。

Illustrator

  1. テキストを選択
  2. メニューから「書式 > アウトラインを作成」（Shift+Cmd+O）
  3. ファイル > 書き出し > SVG形式で保存

Adobe XD

  1. テキストを選択
  2. メニューから「オブジェクト ＞ パス ＞ パスに変換」（Cmd+8）
  3. 書き出し > SVGで保存（Cmd+E）

Figma

  1. テキストを選択
  2. 右クリック > 線のアウトライン化（Shift+Cmd+O）
  3. ExportパネルでSVGとして書き出す

さいごに

SVGは便利なフォーマットですが、特にフォントのアウトライン化には注意が必要です。Webで使用する場合や他者にデータを渡す際には、必ずフォントをアウトライン化しておくことが重要です。アウトライン化されていないデータは、表示崩れの原因となる可能性があります。

また、納品時には画像サイズや余白を確認し、正しい状態でデータを渡すようにしましょう。これらの点に注意することで、安心・確実なデザインとコーディングが実現でき、トラブルを避けることができます。