IllustratorのSVG書き出しには、Webで使う際に確認する設定がいくつかあります。
公式ヘルプで確認できた範囲で、書き出しの手順と、各項目の意味を整理しました。
- 書き出し：ファイル > 書き出し > 書き出し形式で、形式にSVGを選ぶ
- 「アートボードごとに作成」で、アートボード単位のファイルにできる
- スタイルは「内部CSS」「インラインスタイル」「プレゼンテーション属性」の3方式を用途に合わせて選ぶ
- フォントはアウトライン化すると、互換性が高い
- 小数点の桁数は、大きいほど精度が高く、ファイルも大きくなる
Illustratorの画面での再現は含まず、Adobe公式ヘルプ（日本語版）の記載（2026年9月30日に確認）に基づきます。
バージョンによって、画面や項目名が変わることがあります。
書き出しの手順
- ファイル > 書き出し > 書き出し形式を開く
- ファイル形式で SVG を選ぶ
- 「アートボードごとに作成」を、必要に応じてオンにする
- 書き出しを押して、SVGオプションの画面で設定する
選択したオブジェクトだけを出したいときは、ファイル > 選択範囲を書き出し、を使います。
設定項目
| 項目 | 公式の説明の要点 |
|---|---|
| スタイル | 「内部CSS」はstyle要素とクラス、「インラインスタイル」は各要素のstyle属性、「プレゼンテーション属性」はfillなど個別の属性として保持する。Android StudioのSVGアセットにはプレゼンテーション属性が必要と公式で案内されている |
| フォント | アウトラインにすると、互換性が高い |
| ID | レイヤー名／最小／固有から選ぶ |
| 小数点 | 値が大きいほど精度が高く、ファイルも大きい。日本語ページでは「小数点揃え」と表記されている |
| 最小化 | 空のグループや空白を取り除く。ファイルは小さくなるが、コードは読みにくくなる |
| レスポンシブ | 絶対的なサイズを書かず、ブラウザー上の表示に合わせて拡大縮小する |
日本語ページの「小数点揃え」は、英語版の表記から見て、小数点以下の桁数を指す項目と思われます。
旧ダイアログの設定
「別名で保存」からSVGを保存するダイアログにも、似た設定があります。
- 小数点以下の桁数は 1〜7
- スタイル属性は、プレゼンテーション属性（既定）、スタイル属性、スタイル属性（実体参照）、スタイル要素
- SVGプロファイル、フォントのサブセット、エンコーディングも選べる
- SVGZは圧縮されたSVG。容量差は実ファイルで比較し、掲載先で対応を確認する
使い分けの目安
- Webに置く小さなアイコンは、最小化をオンにして、桁数を抑える
- 図をあとで編集するなら、最小化はオフにして、読みやすさを残す
- 文字が崩れるときは、フォントをアウトラインにする
文字が化ける場合の切り分けは、こちらの記事にまとめています。
関連記事：IllustratorのSVGで文字化けするときの切り分け
2026年10月3日の再確認では、公式のSVG書き出しオプションに「内部CSS」が明記されています。「別名で保存」のCSSプロパティと「書き出し形式」のスタイル設定は、選んだ保存・書き出し経路を分けて確認してください。
書き出したSVGの実際のファイルサイズと見た目の差は、この記事では試していません。
まとめ
- 書き出しは、ファイル > 書き出し > 書き出し形式でSVGを選ぶ
- スタイル、フォント、ID、小数点、最小化を、用途に合わせる
- 文字の編集が不要ならアウトラインを候補にし、渡し先で表示を確認する
- 旧ダイアログとは、項目名が違う
参考：Adobe ヘルプ「アートワークの書き出し」「アートワークの保存」（2026年9月30日確認）。
用途を決めてから設定を比較する
| 用途 | 先に決めること | 確認する結果 |
|---|---|---|
| ロゴ・アイコン | 文字の編集が必要か、Web側で色を変えるか、配置先のサイズはどう指定するか | 小さく表示した輪郭、色、線、透明部分、実際の配置先での表示 |
| 文字を残す図表 | 使うフォントと表示先でのフォント利用、文字の編集・コピーが必要か | 代替フォント、改行、文字の欠落、文字間と位置 |
| 外部ツールへ渡す素材 | ツールが読めるスタイル・画像・フォントの形式 | 取り込み後の色、マスク、文字、リンク画像 |
| 複数アートボード | 書き出す範囲とファイル名、画像の外部リンクを残すか | ファイル数、余白、切れ、名前とアートボードの対応 |
比較では元のAIを残し、設定を1つずつ変えたSVGを別名で保存します。桁数を抑える、最小化する、アウトラインにする、といった設定を一度に変えると、表示差の原因が分かりません。小数点の桁数は固定の推奨値として決めず、使うサイズで輪郭を確認して選びます。容量も実際の出力で記録します。
配置画像がある場合は、SVG内への埋め込みか外部ファイルへのリンクかを確認します。リンクのまま納品する場合は、画像が一緒に届くか、別環境から参照できるかを確かめます。レスポンシブをオンにした場合も、実際のWebページで幅・高さと表示を確認してください。
出力後に編集を続ける場合は、元のAIを修正して再度書き出します。AdobeのSVG書き出しのチュートリアルも、この手順を案内しています。設定の仕様はSVG書き出しオプションを参照してください。
JSXのSVG出力と画面の設定を混同しない
ExportOptionsSVGを使うJSXと、「書き出し形式」から開くSVGオプションは、項目を一対一で読み替えないでください。JSXのcssProperties、fontType、coordinatePrecisionなどはAPIのプロパティです。画面にある最小化・ID・レスポンシブの設定を、似た名前の別プロパティで代用して同じ結果になるとは判断できません。
自動出力を比較する場合は、同じAIから設定を1つずつ変え、SVG内のtext・path・style、幅・高さ・viewBox、画像参照と実表示を確認します。API経由の結果とGUI経由の結果は、出力方法も記録して分けて比較します。今回、両経路の実機比較は未実施です。
APIの設定項目はAdobe資料をもとに維持されているExportOptionsSVGを参照しています。
