IllustratorからSVGに書き出した文字が、開く環境によって別のフォントになったり、記号に置き換わったりすることがある。
原因は書き出しの設定だけでなく、SVGが文字をどう持つかという形式側の性質にもある。
ここでは、どの段階で崩れているかを確かめ、扱いを決めるまでの順番を整理する。
仕組みの説明は、2026年9月20日にAdobeの公開ドキュメントを確認したもの。
あわせて2026年10月16日に、Windows 11 Pro上のIllustrator 30.8.2で、フォントの2つの設定から書き出したSVGの中身を確かめた。
ブラウザーや別の環境での表示、文字化けそのものの再現は、この確認に含めていない。
崩れ方で確認先を分ける
同じ「文字化け」でも、見え方によって原因の候補が変わる。
| 見え方 | 考えられること | 先に見るところ |
|---|---|---|
| 別のフォントで表示される | 開いた環境にそのフォントが無い | 書き出し時のフォントの扱い |
| 文字が四角や記号になる | 文字コードやフォントの対応範囲 | 使っている文字とフォントの組み合わせ |
| 文字の位置や大きさがずれる | フォントの置換、文字サイズ・文字間、座標、表示先のサイズ指定など | まずフォントとSVGの文字・座標。サイズ差なら表示先の幅・高さも確認 |
| 文字が選択できない | パスに変換されている | アウトラインの指定 |
見え方を先に言葉にしておくと、設定のどこを触るかが決まる。
SVGは文字を2通りの持ち方ができる
書き出しの設定には、フォントをどう表現するかを選ぶ項目がある。
Adobeのドキュメントでは、この項目について「SVGファイルでフォントを表現する方法を選択します」と説明されている。
同じ箇所に、アウトラインはパス定義を保持し、互換性に優れているという説明が添えられている。
| 持ち方 | 何が起きるか | 向いている場面 |
|---|---|---|
| 文字のまま持つ | 開く側のフォントに依存する | あとでテキストを直したいとき |
| アウトラインにする | パスになるため見た目が固定される | 見た目を崩したくないとき |
文字のまま持つと、開いた環境に同じフォントが無い場合に別の書体で表示される。
アウトラインにするとその文字のパスを保持できますが、元の文字列を文字要素として編集・選択する用途には使えなくなります。SVG全体の表示が別環境でも一致するかは、マスクや効果なども含めて確認します。
実機で2つの設定を書き出して比べた結果（2026年10月16日）
Windows 11 Pro（10.0.26200）のIllustrator 30.8.2で確かめた。
480×180ptのRGBドキュメントに、小塚ゴシック Pr6N（KozGoPr6N-Regular）30ptで「文字確認 ABC 123」と打った文字を1つ置いた。
この入力ファイルは自動処理で用意し、書き出しは画面から操作した。
「ファイル」→「書き出し」→「書き出し形式」でSVGを選び、開いた「SVGオプション」の「フォント」だけを変えて2回保存した。
ほかの項目は、スタイルが「内部 CSS」、画像が「保持」、オブジェクトIDが「レイヤー名」、小数点以下の桁数が2、縮小がオフ、レスポンシブがオン。
| フォントの設定 | SVGの中身 | 元の文字列 | 容量 |
|---|---|---|---|
| SVG | text要素1つ、path要素0 | そのまま残った | 424バイト |
| アウトラインに変換 | text要素0、path要素10 | 残らなかった | 4,834バイト |
「SVG」で書き出したファイルには、次のように文字がtext要素として残った。
<?xml version="1.0" encoding="UTF-8"?>
<svg id="SVG文字検証" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 180">
<defs>
<style>
.cls-1 {
fill: #005bac;
font-family: KozGoPr6N-Regular-90ms-RKSJ-H, 'Kozuka Gothic Pr6N';
font-size: 30px;
}
</style>
</defs>
<text class="cls-1" transform="translate(30 70)"><tspan x="0" y="0">文字確認 ABC 123</tspan></text>
</svg>font-familyには、KozGoPr6N-Regular-90ms-RKSJ-HとKozuka Gothic Pr6Nの2つの名前が書き込まれていた。
文字のまま持つ形では、この名前のフォントが開く側に無いと、別の書体で表示されることになる。
「アウトラインに変換」で書き出したファイルには、text要素も元の文字列も無く、文字の形がpath要素として入っていた。
この入力では容量が約11倍になったが、文字数や書体で変わるため一般化はできない。
2つのSVGをIllustratorで開き直すと（開く操作は自動処理）、「SVG」側は文字が1つ残って文字列も一致し、「アウトラインに変換」側は文字が0でパスだけになった。
ただし「SVG」側の文字のフォントは、元のRegularではなくKozGoPr6N-Mediumとして開いた。
理由は確かめていないので、文字のまま渡すときは、開いた側で文字列だけでなく書体名も見ておく。
アウトラインにしたときに失うもの
アウトラインは見た目を守る代わりに、いくつかの性質を手放すことになる。
- 書き出したあとに文字を編集できなくなる
- そのパスを元の文字列として選択・コピーする用途には使えない
- 文字数や形によってパスが増える。容量の差は実際の出力で比較する
- パス自体には元の文字列が残らない。検索や読み上げに必要な文字情報は別途用意する
見た目を優先するか、文字としての扱いを残すかを先に決めてから設定する。
同じ図を両方の設定で書き出し、別名で保存しておく運用もできる。
スタイルの持ち方も表示に関わる
書き出しオプションには、見た目の情報をどう書き込むかを選ぶ項目もある。
公式の説明では、3つの方式が挙げられている。
| 方式 | 書き込まれ方 | 備考 |
|---|---|---|
| 内部CSS | styleタグとクラスでまとめて持つ | 同じ見た目を共有でき、小さくなる場合がある |
| インラインスタイル | タグごとにstyle属性で持つ | タグ単位で完結する |
| プレゼンテーション属性 | プロパティごとに別のXML属性で持つ | Android StudioでSVGを使うには この形式が必要と案内されている |
取り込む側のツールによって扱える形式が違うため、渡し先が決まっているなら先に合わせておく。
位置や大きさがずれる場合
文字そのものではなく、配置がずれて読みにくくなることもある。
公式の説明では、小数点揃えについて、小数の値を大きくするとレイアウトがより正確になり、視覚的な精度が上がると書かれている。
一方で、値を大きくすると書き出されたSVGのファイルサイズも大きくなる、とも説明されている。
レスポンシブの項目は、オンにすると生成されたSVGがブラウザー内で拡大・縮小し、絶対サイズの値は書き込まれないと案内されている。
取り込む側で幅を指定して使う場合と、そのまま貼る場合とで、この設定の向き不向きが変わる。
縮小を有効にしたときの注意
書き出しオプションには、ファイルを小さくする項目もある。
公式の説明では、空のグループと空白を削除して最適化する一方で、SVGコードの読みやすさも低下すると書かれている。
あとから手でコードを直す前提なら、この項目は外しておくほうが作業しやすい。
書き出した内容はそのまま確かめられる。
- コードを表示 … 既定のテキストエディターで書き出した内容を開く
- ブラウザーで表示 … 既定のウェブブラウザーで画像を表示する
渡す前にブラウザーで開いておくと、受け取る側で気づく前に崩れを見つけられる。
確かめる順番
- どの崩れ方かを言葉にする（別のフォント、記号、位置、選択できない）
- 書き出し時のフォントの扱いが、意図した側になっているかを見る
- 書き出したSVGをブラウザーで開いて、崩れが再現するかを見る
- 渡し先のツールが扱えるスタイル設定になっているかを見る
- 位置のずれなら、フォントの置換と文字サイズ・文字間を先に確認し、座標や表示先の幅・高さも比べる
手元のIllustratorで開いたときは問題が無くても、別の環境で崩れることがある。
そのため、書き出したファイルを別のアプリで開くところまでを1つの手順として扱う。
渡すときに添えておくとよい情報
| 項目 | なぜ必要か |
|---|---|
| フォントを文字として残したか、アウトラインにしたか | 受け取る側が編集できるかが決まる |
| 使ったフォント名 | 文字のまま渡した場合に、環境を揃えられる |
| スタイル設定の方式 | 取り込むツールによって扱えるかが変わる |
| レスポンシブの有無 | サイズ指定の仕方が変わる |
この4つを伝えておくと、受け取った側での作り直しを減らせる。
まとめ
- SVGは文字を、文字のまま持つ形とパスにする形のどちらでも書き出せる
- アウトラインは互換性に優れる一方、編集も選択もできなくなる
- スタイルの持ち方は3方式あり、Android Studioではプレゼンテーション属性が必要と案内されている
- 小数点揃えを大きくすると精度は上がるが、ファイルも大きくなる
- 書き出したファイルは、渡す前にブラウザーで開いて確かめる
仕組みの説明は2026年9月20日時点の公開ドキュメントの記載に基づいている。
書き出した結果は2026年10月16日にIllustrator 30.8.2（Windows 11 Pro）で確かめたもので、ブラウザーや別の環境での表示は含まない。
書き出しオプションの一覧はAdobe公式のアートワークを書き出す方法にまとまっている。
Illustratorの操作はIllustratorメソッドのまとめにも置いている。
文字を戻す確認と見た目を固定する処理を分ける
SVGのtext要素に元の文字列が残っているかを、テキストエディターでも確認します。元の文字列が別の記号に変わっている場合は、フォントのアウトライン指定だけを変えても正しい文字には戻りません。まずAIの元データ、保存した文字コード、書き出した文字列を照合します。
SVGの文字列は正しいのに別の書体になる場合は、使用フォントと表示先の環境を確認します。見た目を優先してアウトライン化を選ぶ場合も、元のAIと文字情報を別途残してください。設定の全体はSVGの書き出し設定へまとめ、この記事は崩れ方の切り分けを担当します。
文字要素と代替テキストを分けて確認する
SVGのtext要素には文字データを保持できます。アウトラインのpath要素へ置き換えると、同じ形を表示できても元の文字データとしては扱えません。一方、画像に付ける代替テキストやSVGの説明情報は別に用意できます。「アウトライン化した画像は必ず読み上げられない」とは限りません。図の内容を伝える必要がある場合は、表示方法に合う説明を付けます。
文字を残したSVGでも、Webページで画像として埋め込む場合と、SVGコードをページ内へ直接置く場合で扱いが異なります。ファイル内部に文字があることだけで、利用先の検索・選択・読み上げが必ずできるとは判断せず、実際の掲載先で確認してください。
文字データの性質はW3CのSVG 2「Text」を参照しています。今回、利用先ブラウザーと支援技術による実測は行っていません。
よくある質問：IllustratorのSVGで文字化けするとき
SVGの文字が別のフォントや記号に変わるのは、なぜか？
原因は書き出しの設定だけでなく、SVGが文字をどう持つかという形式側の性質にもある。別のフォントで表示される場合は、開いた環境にそのフォントが無いことが考えられる。文字が四角や記号になる場合は、文字コードやフォントの対応範囲を疑う。文字の位置や大きさがずれる場合は、フォントの置換、文字サイズ・文字間、座標、表示先のサイズ指定などを確認する。文字が選択できない場合は、パスに変換されている（アウトライン）可能性がある。
SVGは、文字をどう持てるのか？
文字のまま持つ形と、アウトライン（パス）にする形の2通りがある。Adobeのドキュメントでは、書き出しの設定について「SVGファイルでフォントを表現する方法を選択します」と説明され、アウトラインはパス定義を保持し、互換性に優れるとされている。文字のまま持つと開く側のフォントに依存し、あとでテキストを直したいときに向く。アウトラインにするとパスになるため見た目が固定され、見た目を崩したくないときに向く。
2026年10月16日にIllustrator 30.8.2で試すと、フォントを「SVG」にした書き出しではtext要素に文字列が残り、「アウトラインに変換」では文字列が無くpath要素だけになった。
アウトラインにすると、何を失うのか？
書き出したあとに文字を編集できなくなる、そのパスを元の文字列として選択・コピーする用途には使えない、文字数や形によってパスが増える（容量の差は実際の出力で比較する）、パス自体には元の文字列が残らないので検索や読み上げに必要な文字情報は別途用意する、といった点を失う。見た目を優先するか文字としての扱いを残すかを先に決める。同じ図を両方の設定で書き出して別名で保存しておく運用もできる。
スタイルの3方式は、どう違うのか？
公式の説明では、内部CSSはstyleタグとクラスでまとめて持ち、同じ見た目を共有できて小さくなる場合がある。インラインスタイルはタグごとにstyle属性で持ち、タグ単位で完結する。プレゼンテーション属性はプロパティごとに別のXML属性で持ち、Android StudioでSVGを使うにはこの形式が必要と案内されている。取り込む側のツールによって扱える形式が違うため、渡し先が決まっているなら先に合わせておく。
位置や大きさがずれるときは、何を見るのか？
文字そのものではなく配置がずれる場合は、まずフォントとSVGの文字・座標を見る。サイズ差なら表示先の幅・高さも確認する。公式の説明では、小数点揃えの値を大きくするとレイアウトがより正確になり視覚的な精度が上がるが、書き出されたSVGのファイルサイズも大きくなる。レスポンシブの項目は、オンにすると生成されたSVGがブラウザー内で拡大・縮小し、絶対サイズの値は書き込まれないと案内されている。取り込む側で幅を指定して使う場合と、そのまま貼る場合とで、この設定の向き不向きが変わる。
「縮小」にチェックを入れると、何が起きるのか？
公式の説明では、空のグループと空白を削除して最適化する一方で、SVGコードの読みやすさも低下する。あとから手でコードを直す前提なら、この項目は外しておくほうが作業しやすい。
崩れの原因は、どう切り分ければよいか？
記事の「確かめる順番」では、書き出したSVGをブラウザーで開いて崩れが再現するかを見る、渡し先のツールが扱えるスタイル設定になっているかを見る、位置のずれならフォントの置換と文字サイズ・文字間を先に確認して座標や表示先の幅・高さも比べる、とされている。SVGのtext要素に元の文字列が残っているかを、テキストエディターで確認する方法もある。元の文字列が別の記号に変わっている場合は、フォントのアウトライン指定だけを変えても正しい文字には戻らず、まずAIの元データ、保存した文字コード、書き出した文字列を照合する。手元のIllustratorで開いたときは問題が無くても、別の環境で崩れることがあるため、書き出したファイルを別のアプリで開くところまでを1つの手順として扱う。
SVGを人に渡すとき、何を添えるとよいか？ 記事の内容は最新か？
フォントを文字として残したかアウトラインにしたか、使ったフォント名、スタイル設定の方式、レスポンシブの有無の4つを伝えておくと、受け取った側での作り直しを減らせる。
仕組みの説明は2026年9月20日時点のAdobeの公開ドキュメントの記載に基づいている。
書き出した結果は2026年10月16日にWindows 11 Pro上のIllustrator 30.8.2で確かめたが、ブラウザーや別の環境での表示、文字化けそのものの再現は含まない。
書き出しオプションの名称や挙動は変わることがあるため、最新はAdobe公式のヘルプで確認する。
