SVGのフォントが書き出しや読み込みで変わる理由
指定書体が使えない、または文字の解釈が違うとSVGのフォントが変わります。編集可能な文字、代替フォント、アウトラインの診断を解説します。
目次
SVGのフォントが変わるのは、編集可能な文字が通常はフォント名を指定するだけで、文字の形を自動で持たないためです。ブラウザー、エディター、切断ソフト、相手のパソコンが指定書体を使えなければ代替を選びます。字幅が変わり、改行、位置合わせ、近くの画像の位置も変わります。
確実な納品方法は2つです。選択、検索、文言編集が必要でフォントを正しく供給できるなら文字を残します。見た目を固定し文言編集が不要なら、ベクターのアウトラインにします。どちらも別に編集可能な原本を残します。
PNGを自動出力するなら、resvgでフォントファイルを明示的に読み込み、納品前に文字を元と比べます。
文書の図では、LaTeXのSVG図と組版ラベルを比べます。形状と文字を分けると、SVG原本を保ちながら文書で文言を組めます。
手早い診断
- テキストエディターで
<text、<tspan、font-familyを探します。 - 編集可能な文字なら、正確なファミリーとウェイトが表示環境にあるか確認します。
- ウェブページが供給するなら
@font-faceが実際に読み込まれるか確認します。 - 文字が
<path>だけなら置換は起きません。出力形状とアプリ対応を比べます。 - 固定するロゴや印刷画像は納品コピーをアウトライン化し、原本に文字を残します。
まずSVGに文字が残っているか確認する
拡張子ではわかりません。文字には少なくとも2つの一般的な表現があります。
<text font-family="Example Sans" font-weight="600">Sample</text>これは編集可能な文字です。文字と表示命令を保存し、描画側が合うフォントを探して字形にします。
アウトラインは次のようになります。
<path d="M ... Z" />各文字が形状に変わっています。相手はフォント不要ですが、通常の文字列として編集できません。
すべてのコードを理解せず確認できます。
- SVGをコピーします。
- プレーンなテキストエディターで開きます。
<textと<tspanを検索します。- フォントの表示名を検索します。
- なければ文字が
<path>か調べます。
エディターの文字ツールでクリックし、カーソルが点滅すれば文字、各字形にノードが出ればアウトラインです。
原因1：指定フォントがインストールされていない
font-familyは優先順の名前一覧です。MDNの説明のように、最初がなければ次へ進み、最後にはsans-serifやserifなどの一般的なファミリーを選びます。
よくあるのは次です。
- 相手が持たないローカルフォントを使った。
- 1台だけサブスクリプションで有効にした。
- パソコンからスマートフォン、タブレット、切断アプリ、Officeへ移した。
- 内部のファミリー名がファイル名やフォルダーの表示名と違う。
- 1つのスタイルだけあり、別の太さや斜体を要求する。
似たものを入れても配置は戻りません。2つのサンセリフでも字幅、アセンダーの高さ、カーニング、ベースラインが違います。似て見えても、中央の単語が意図した位置からずれる場合があります。指定書体が使えた後は、SVG文字の垂直配置例でベースラインと文字枠・視覚中心を区別します。
原因2：期待するウェブフォントが読み込まれない
ページ内のSVGはページのCSSからフォントを受け取れ、@font-faceのスタイルブロックも持てます。SVG 2はCSS Fontsによるダウンロードフォントへの対応を要求します。URLの誤り、未配置、アクセス制限、非対応形式、スタイルを供給するページでなく単独で開いた場合などで失敗します。
開発者ツールで再読み込みし、Networkでフォントを絞って失敗を探します。<text>の計算済みスタイルで、宣言名だけでなく実際の書体を確認します。
1つのサイト内だけで動くSVGは自己完結した納品物とは限りません。プライベートウィンドウで直接開き、別端末でも試します。ログイン済みのサービス、キャッシュ、サイトのCSSへの隠れた依存がわかります。
フォントを埋め込むと持ち運びやすくなる場合がありますが、容量増加、アプリ固有の制約、ライセンスの問題があります。デスクトップ利用権でフォントデータの再配布も許されると考えず、実際の許諾を確認します。
原因3：ファミリーや太さが完全には一致しない
CSSは表示名だけで照合しません。たとえば次を要求します。
font-family: "Example Sans";
font-style: normal;
font-weight: 600;400と700しかなければ、近いものを選ぶか太さを合成する場合があります。可変フォントには軸やインスタンス名があり、アプリの解釈も違う場合があります。古いデザイン・切断ソフトはOpenType機能、合字、可変設定を無視する場合があります。
元文書とSVGを比べます。
- 正確なファミリー名。
- スタイルと数値の太さ。
- 字間。
- 大文字・小文字と実際の文字。
- 合字などのOpenType機能。
- 可変フォントの軸値。
- パス上文字や縦書き。
単語を手で伸縮して合わせないでください。誤った字形を残して症状を隠すだけです。
原因4：文字を残したが、使用先の扱いが違う
SVGの文字配置は組版文書と同じではありません。入れ子の<tspan>、個別座標、text-anchor、<textPath>を使い、使用先が統合、再グループ化、再解釈する場合があります。バッジなら、編集可能なパス上文字の手順で、マーク、ガイド曲線、文字を分けて試します。
文書にはTypstのSVG図とインライン画像を使います。キャプションを文書の文字に残すと、図の文字を図番号や本文と別に確認できます。
Adobeの現在のSVG書き出し文書は、パス上文字がすべてのビューアーで同じ見た目にならない場合があるとしています。また、文字を残すフォント出力と、見た目を保つためパスにするConvert To Outlinesを区別します。
フォントが正しくても配置が違うなら、書体を変えず構造を見ます。
- ブラウザーと元エディターを比較します。
- 各文字に個別の
xがあるか見ます。 - 文字グループの入れ子の変換を見ます。
text-anchor、カーニング、ベースラインを使用先が削除したか見ます。- 普通の横書きコピーで、パス上文字の問題を分離します。
編集より見た目が重要なロゴ、バッジ、1行の見出しには、通常アウトラインが安全です。
原因5：アウトライン化後も文字編集できると期待した
フォント参照がないので置換は起きませんが、読み込みで違いが出ます。
- 単語ではなく複合パスとして入る場合がある。
- 複合パスの解除で穴が埋まる場合がある。
- 多くの字形がグループになる場合がある。
- 制限のあるアプリがパスを統合・簡略化する場合がある。
- 編集可能な文字より容量が増える場合がある。
これはフォントではなく形状と編集可能性の変化です。形が一致すれば出力は役割を果たしています。
常に2つ残します。
- 編集可能な原本： 編集可能な文字、フォント情報、名前付きレイヤー、元アプリの形式。
- 納品コピー： 見た目が重要なアウトラインSVG、EPS、PDF。
唯一の原本をアウトライン化しません。綴り、翻訳、新しいキャッチコピーの変更が、遅い手作業になります。
どの対処を使うか
| 使用先 | 推奨方法 | 確認 |
|---|---|---|
| 意味のある文字を持つアクセシブルなウェブ画像 | 正しく配置したウェブフォントと代替一覧を持つ編集可能な文字 | 単独とページ内でリクエストを見て試す |
| ロゴ、バッジ、装飾文字 | アウトライン納品コピー | ブラウザーと別エディターで開く |
| 相手が編集するテンプレート | 文字と許諾済みフォント、または合意したシステム代替 | 相手の環境で試す |
| 印刷業者や制作ソフト | 特に文字編集を求めない限りアウトライン | 穴、複合パス、実寸を見ます |
| 文言が変わる翻訳 | 文字とすべての文字体系に対応する書体 | 代表的な訳文と代替動作を試す |
使用先で選びます。文字は意味と編集、アウトラインは見た目を保ちます。追加依存や原データなしに1ファイルで両方を最大化できません。
安全なアウトライン工程
見た目を固定する納品では、
- 編集可能な文字の原文書を保存します。
- 複製し、名前に
-outlinedや-deliveryを加えます。 - 選択し、Create Outlines（アウトラインを作成）、Convert to Curves（曲線に変換）、**Object to Path（オブジェクトをパスへ）**などを使います。
- 文字の穴と重なりを見ます。
- SVGを書き出します。
- ブラウザーと別エディターで開きます。
- 通常サイズと拡大で元と比べます。
- アウトラインを送り、文字を編集できる原本と許諾情報を保管します。
欠けたフォントを避けるためラスター化しません。SVG内のPNGは置換を防いでも拡大可能な形状を捨てます。アウトラインなら本物のベクターを残せます。
ラスターのロゴしか残っていない場合
文字もアウトライン原本もなく、小さなPNG、JPG、スクリーンショットだけの場合があります。ロゴのベクター化判断ガイドで、トレースと描き直しを選びます。フォントを入れてもラスターは直らず、似た書体でも独自の文字の変更を再現できるとは限りません。
この条件ではPerfectVectorのロゴベクター化が、見える文字を形に再構築できます。結果はアウトライン画像で、編集可能な文字を復元するものではありません。元書体の識別、カーニングの復元、文言の入力編集はできません。見える形状を取り戻し、新しく組んだ原本とは別に保管します。
納品全体にはロゴのファイル形式ガイドで、残す原本と納品形式を説明しています。
よくある質問
別のパソコンでフォントが変わる理由は？ 使えない書体名を持つ編集可能な文字が含まれている可能性が高いと考えられます。代替一覧の別ファミリーになり、形、幅、間隔、ときには位置合わせが変わります。
SVGは自動でフォントを埋め込みますか？ いいえ。名前指定、ページCSS、フォントリソースの利用はできますが、通常の文字はデスクトップのファイルを自動同梱しません。利用可能性、ブラウザー対応、許諾を扱う必要があります。
文字をアウトライン化すべきですか？ ロゴ、装飾、印刷、制作ソフトなど見た目を固定するなら納品コピーを変換します。文言編集、アクセシビリティ、検索、翻訳が重要なら原本に文字を残します。
アウトライン文字が編集できない理由は？ 文字をパスに置き換えるためです。ノードや形は編集できますが、カーソルやフォント変更はできません。想定どおりなので、将来の変更には文字を編集できる原本を保管・共有します。
PerfectVectorはラスターのロゴから元フォントを復元できますか？ できません。見える文字をアウトラインにできますが、元書体の識別、編集可能な文字、カーニング、設定は戻しません。見えるロゴ形状を戻したい場合に使います。
参考資料
- W3C：SVG文字 —
<text>、<tspan>、フォント、配置、ダウンロードフォントです。 - W3C：CSS Fonts Level 3 — ファミリー照合、書体選択、不足、システム代替です。
- MDN：SVGの
font-family— 優先一覧と一般的な代替です。 - Adobe Illustrator：文字のアウトライン作成 — パス変換と文字編集の喪失です。
- Adobe Illustrator：画像の保存 — SVG文字、アウトライン、パス上文字の互換性です。
原本がなくラスターしかないなら、PerfectVectorで見える文字をアウトラインに再構築し、別エディターで確認します。編集可能な文字があれば、再トレースではなくフォント依存を直すか納品コピーをアウトライン化します。
