IllustratorからSVGに書き出した文字が、開く環境によって別のフォントになったり、記号に置き換わったりすることがある。
原因は書き出しの設定だけでなく、SVGが文字をどう持つかという形式側の性質にもある。
ここでは、どの段階で崩れているかを確かめ、扱いを決めるまでの順番を整理する。
内容は2026年9月20日にAdobeの公開ドキュメントを確認したもので、実機での再現は含まない。
崩れ方を3つに分ける
同じ「文字化け」でも、見え方によって原因の候補が変わる。
| 見え方 | 考えられること | 先に見るところ |
|---|---|---|
| 別のフォントで表示される | 開いた環境にそのフォントが無い | 書き出し時のフォントの扱い |
| 文字が四角や記号になる | 文字コードやフォントの対応範囲 | 使っている文字とフォントの組み合わせ |
| 文字の位置や大きさがずれる | サイズ指定と拡大縮小の扱い | レスポンシブと小数点揃え |
| 文字が選択できない | パスに変換されている | アウトラインの指定 |
見え方を先に言葉にしておくと、設定のどこを触るかが決まる。
SVGは文字を2通りの持ち方ができる
書き出しの設定には、フォントをどう表現するかを選ぶ項目がある。
Adobeのドキュメントでは、この項目について「SVGファイルでフォントを表現する方法を選択します」と説明されている。
同じ箇所に、アウトラインはパス定義を保持し、互換性に優れているという説明が添えられている。
| 持ち方 | 何が起きるか | 向いている場面 |
|---|---|---|
| 文字のまま持つ | 開く側のフォントに依存する | あとでテキストを直したいとき |
| アウトラインにする | パスになるため見た目が固定される | 見た目を崩したくないとき |
文字のまま持つと、開いた環境に同じフォントが無い場合に別の書体で表示される。
アウトラインにすると表示は揃うが、文字としての情報は失われる。
アウトラインにしたときに失うもの
アウトラインは見た目を守る代わりに、いくつかの性質を手放すことになる。
- 書き出したあとに文字を編集できなくなる
- ブラウザーやツールで文字として選択・コピーできなくなる
- 文字数が多いとパスが増え、ファイルが大きくなる
- 検索や読み上げの対象にならなくなる
見た目を優先するか、文字としての扱いを残すかを先に決めてから設定する。
同じ図を両方の設定で書き出し、別名で保存しておく運用もできる。
スタイルの持ち方も表示に関わる
書き出しオプションには、見た目の情報をどう書き込むかを選ぶ項目もある。
公式の説明では、3つの方式が挙げられている。
| 方式 | 書き込まれ方 | 備考 |
|---|---|---|
| 内部CSS | styleタグとクラスでまとめて持つ | 同じ見た目を共有でき、小さくなる場合がある |
| インラインスタイル | タグごとにstyle属性で持つ | タグ単位で完結する |
| プレゼンテーション属性 | プロパティごとに別のXML属性で持つ | Android StudioでSVGを使うには この形式が必要と案内されている |
取り込む側のツールによって扱える形式が違うため、渡し先が決まっているなら先に合わせておく。
位置や大きさがずれる場合
文字そのものではなく、配置がずれて読みにくくなることもある。
公式の説明では、小数点揃えについて、小数の値を大きくするとレイアウトがより正確になり、視覚的な精度が上がると書かれている。
一方で、値を大きくすると書き出されたSVGのファイルサイズも大きくなる、とも説明されている。
レスポンシブの項目は、オンにすると生成されたSVGがブラウザー内で拡大・縮小し、絶対サイズの値は書き込まれないと案内されている。
取り込む側で幅を指定して使う場合と、そのまま貼る場合とで、この設定の向き不向きが変わる。
縮小を有効にしたときの注意
書き出しオプションには、ファイルを小さくする項目もある。
公式の説明では、空のグループと空白を削除して最適化する一方で、SVGコードの読みやすさも低下すると書かれている。
あとから手でコードを直す前提なら、この項目は外しておくほうが作業しやすい。
書き出した内容はそのまま確かめられる。
- コードを表示 … 既定のテキストエディターで書き出した内容を開く
- ブラウザーで表示 … 既定のウェブブラウザーで画像を表示する
渡す前にブラウザーで開いておくと、受け取る側で気づく前に崩れを見つけられる。
確かめる順番
- どの崩れ方かを言葉にする（別のフォント、記号、位置、選択できない）
- 書き出し時のフォントの扱いが、意図した側になっているかを見る
- 書き出したSVGをブラウザーで開いて、崩れが再現するかを見る
- 渡し先のツールが扱えるスタイル設定になっているかを見る
- 位置のずれなら、小数点揃えとレスポンシブの指定を見る
手元のIllustratorで開いたときは問題が無くても、別の環境で崩れることがある。
そのため、書き出したファイルを別のアプリで開くところまでを1つの手順として扱う。
渡すときに添えておくとよい情報
| 項目 | なぜ必要か |
|---|---|
| フォントを文字として残したか、アウトラインにしたか | 受け取る側が編集できるかが決まる |
| 使ったフォント名 | 文字のまま渡した場合に、環境を揃えられる |
| スタイル設定の方式 | 取り込むツールによって扱えるかが変わる |
| レスポンシブの有無 | サイズ指定の仕方が変わる |
この4つを伝えておくと、受け取った側での作り直しを減らせる。
まとめ
- SVGは文字を、文字のまま持つ形とパスにする形のどちらでも書き出せる
- アウトラインは互換性に優れる一方、編集も選択もできなくなる
- スタイルの持ち方は3方式あり、Android Studioではプレゼンテーション属性が必要と案内されている
- 小数点揃えを大きくすると精度は上がるが、ファイルも大きくなる
- 書き出したファイルは、渡す前にブラウザーで開いて確かめる
この記事は2026年9月20日時点の公開ドキュメントの記載に基づいている。
書き出しオプションの一覧はAdobe公式のアートワークを書き出す方法にまとまっている。
Illustratorの操作はIllustratorメソッドのまとめにも置いている。
