IllustratorのSVG書き出しには、Webで使う際に確認する設定がいくつかあります。
公式ヘルプで確認できた範囲で、書き出しの手順と、各項目の意味を整理しました。
- 書き出し：ファイル > 書き出し > 書き出し形式で、形式にSVGを選ぶ
- 「アートボードごとに作成」で、アートボード単位のファイルにできる
- スタイルは「内部CSS」「インラインスタイル」「プレゼンテーション属性」の3方式を用途に合わせて選ぶ
- フォントはアウトライン化すると、互換性が高い
- 小数点の桁数は、大きいほど精度が高く、ファイルも大きくなる
前半の設定説明は、Adobe公式ヘルプ（日本語版）の記載（2026年9月30日に確認）に基づきます。
後半に、2026年10月9日のWindows実機での書き出し結果を追記しています。
2026年10月17日には、スタイル・フォント・小数点以下の桁数・縮小を1つずつ変えて画面から書き出し、SVGの中身を比べた結果も追記しました。
バージョンによって、画面や項目名が変わることがあります。
書き出しの手順
- ファイル > 書き出し > 書き出し形式を開く
- ファイル形式で SVG を選ぶ
- 「アートボードごとに作成」を、必要に応じてオンにする
- 書き出しを押して、SVGオプションの画面で設定する
選択したオブジェクトだけを出したいときは、ファイル > 選択範囲を書き出し、を使います。
設定項目
| 項目 | 公式の説明の要点 |
|---|---|
| スタイル | 「内部CSS」はstyle要素とクラス、「インラインスタイル」は各要素のstyle属性、「プレゼンテーション属性」はfillなど個別の属性として保持する。Android StudioのSVGアセットにはプレゼンテーション属性が必要と公式で案内されている |
| フォント | アウトラインにすると、互換性が高い |
| ID | レイヤー名／最小／固有から選ぶ |
| 小数点 | 値が大きいほど精度が高く、ファイルも大きい。日本語ページでは「小数点揃え」と表記されている |
| 最小化 | 空のグループや空白を取り除く。ファイルは小さくなるが、コードは読みにくくなる |
| レスポンシブ | 絶対的なサイズを書かず、ブラウザー上の表示に合わせて拡大縮小する |
日本語ページの「小数点揃え」は、Illustrator 2026 日本語版のSVGオプションでは「小数点以下の桁数」と表示されます。
表の「最小化」は、同じ画面では「縮小」というチェックボックスです。
旧ダイアログの設定
「別名で保存」からSVGを保存するダイアログにも、似た設定があります。
- 小数点以下の桁数は 1〜7
- スタイル属性は、プレゼンテーション属性（既定）、スタイル属性、スタイル属性（実体参照）、スタイル要素
- SVGプロファイル、フォントのサブセット、エンコーディングも選べる
- SVGZは圧縮されたSVG。容量差は実ファイルで比較し、掲載先で対応を確認する
使い分けの目安
- Webに置く小さなアイコンは、最小化をオンにして、桁数を抑える
- 図をあとで編集するなら、最小化はオフにして、読みやすさを残す
- 文字が崩れるときは、フォントをアウトラインにする
文字が化ける場合の切り分けは、こちらの記事にまとめています。
関連記事：IllustratorのSVGで文字化けするときの切り分け
2026年10月3日の再確認では、公式のSVG書き出しオプションに「内部CSS」が明記されています。
「別名で保存」のCSSプロパティと「書き出し形式」のスタイル設定は、選んだ保存・書き出し経路を分けて確認してください。
書き出したSVGのファイルサイズと、Illustratorで開き直した画像の差は、後半の限定条件で確認しています。
Webブラウザ上での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を参照しています。
Windows実機で確認したSVG書き出しの結果（2026年10月9日）
この節は、Windows版Illustrator 30.8.2の日本語版で実際に書き出して測った結果の追記です。
確認に使ったのは、600×400ptのアートボードに半透明の青い円と「日本語 ABC 123」を置いた1点のデータです。
画面のSVGオプションは、スタイルを内部CSS、フォントをアウトラインに変換、画像を保持、オブジェクトIDをレイヤー名、小数点以下の桁数を2、縮小をオフ、レスポンシブをオンにしました。
寸法を決めるのは、桁数より先に書き出し範囲
アートボードごとに作成を指定した出力のviewBoxは「0 0 600 400」でした。
指定しなかった出力のviewBoxは、図形と文字が占める範囲に合わせた「0 0 251.13 262.76」になりました。
どちらもIllustratorで開き直し、アートボードの寸法が600×400ptと約251.13×262.76ptに分かれることを確認しました。
ファイルサイズはそれぞれ3,083バイトと3,064バイトで、差はほとんどありませんでした。
つまり、ここで変わったのはサイズではなく書き出し範囲です。
レスポンシブをオンにした今回の出力には、width属性とheight属性がありませんでした。
寸法が思ったとおりにならないときは、小数点以下の桁数より先に書き出し範囲を確認してください。
Webページ上の表示幅と、SVGのviewBoxは分けて判断してください。
条件を1つずつ変えて比べる
補助の確認では、スクリプトのSVG書き出しAPIで同じ元データを使い、プレゼンテーション属性・文字をアウトラインに変換・小数点以下3桁を基準にしました。
基準の出力は4,060バイトでした。
小数点以下の桁数だけを1桁に変えた出力は3,008バイトでした。
スタイルだけを内部CSSに変えた出力は4,119バイトでした。
3条件とも、Illustratorで開き直すとアートボードは600×400pt、テキストフレームは0、パスオブジェクトは24でした。
同じSVGのXML上のpath要素は9個で、開き直したあとのパスオブジェクト24個とは数え方が違います。
数が合わないときは、XMLを数えたのか、Illustratorが復元したオブジェクトを数えたのかを先に区別してください。
開き直してPNG24で書き出した画像どうしを比べると、基準の出力とスタイルだけを変えた出力は完全に同じ画像でした。
小数点以下の桁数だけを1桁に変えた出力は、不透明な画素が1,436から1,459へ変わり、わずかな差が出ました。
ファイルサイズの差と見た目の差は別々に出るので、桁数を下げるかどうかは両方を見てから決めてください。
文字を残す条件が軽いとは限らない
APIでSVGフォントを指定した1条件では、開き直したあともテキストフレームが1つ残りました。
同じ出力のファイルサイズは13,030,805バイト、約13MBでした。
文字を残せば必ず軽くなる、とは一般化できません。
これはAPI側の1条件の結果であり、画面にある同じ名前の設定で同じ結果になると実証したものではありません。
透過はアルファ値でも確かめる
基準・桁数変更・スタイル変更の各SVGをIllustratorに読み込み直し、PNG24で書き出しました。
いずれも600×400画素で、アルファ値は0から255まで分布していました。
基準の出力では、完全に透明な画素が202,056、半透明の画素が36,508、不透明な画素が1,436でした。
書き出し範囲を指定しなかった出力を同じ手順で書き出すと、251×263画素になりました。
透過が残っているかどうかは、見た目だけでなくアルファ値でも確かめられます。
なお、文字をパスに変換した出力は、別の端末でフォントを編集し直せることを意味しません。
編集用の元データは別に保存してください。
今回の確認範囲と、確認していないこと
確認した環境はWindows 11（25H2、ビルド26200.9457）と、Windows版Illustrator 30.8.2の日本語版・通常版です。
確認日は2026年10月9日です。
元データは1点、画面経由の出力が2点、API経由の出力が4条件です。
Webブラウザでの表示試験は実施していません。
画質の優劣、すべてのブラウザで同じに見えること、小数点以下3桁が常に適切であることは、この確認からは判断できません。
画面経由とAPI経由の結果は、同じ元データを使っても別々に記録して比べてください。
出典：Adobe「アートワークの書き出し」
設定を1つずつ変えて書き出したSVGの中身（2026年10月17日）
Illustrator 2026（30.8.2）とWindows 11 Pro（10.0.26200）で、SVGオプションの設定を1つずつ変えて画面から書き出し、できたSVGファイルの中身を読んで比べました。
元の文書は240×160 ptのアートボードに、青い円、線の付いたオレンジの長方形、円と同じ色の小さな長方形、ArialMT 24 ptの文字「SVG 123」を置いたものです。
座標と大きさには、小数点以下が4桁ある値を使いました。
元の文書はスクリプトで用意したので、その作り方は確認に含めていません。
書き出しの操作とSVGオプションの画面
［ファイル］→［書き出し］→［書き出し形式…］を開き、ファイルの種類が「SVG (*.SVG)」、「アートボードごとに作成」がオンの状態で［書き出し］を押しました。
続いて開く「SVG オプション」で設定を変え、［OK］を押すとSVGファイルができます。
開いたときの設定は、スタイルが「内部 CSS」、フォントが「アウトラインに変換」、画像が「保持」、オブジェクトIDが「レイヤー名」、小数点以下の桁数が2、縮小がオフ、レスポンシブがオンでした。
この画面は、最後に［OK］を押したときの設定を覚えています。
スタイルをインラインスタイルにして書き出した後、次に開いたときもインラインスタイルが選ばれていました。
試しに設定を変えたときは、終わった後に元の設定へ戻しておくと、次の書き出しで迷いません。
スタイル：色や線の書き方が変わる
スタイルの一覧には「内部 CSS」「インラインスタイル」「プレゼンテーション属性」の3つがありました。
ほかの設定はそのままで、スタイルだけを変えて3回書き出しました。
線の付いたオレンジの長方形は、それぞれ次のように書かれていました。
内部CSSでは、色と線の指定がファイル先頭の<style>にまとめられ、要素にはclassだけが付きます。
.cls-1 {
fill: #f09628;
stroke: #3c3c3c;
stroke-miterlimit: 10;
stroke-width: 2.5px;
}
<rect id="rect-orange" class="cls-1" x="120.25" y="35.79" width="90.56" height="60.11"/>インラインスタイルでは、要素ごとにstyle属性が付きます。
<rect id="rect-orange" x="120.25" y="35.79" width="90.56" height="60.11" style="fill: #f09628; stroke: #3c3c3c; stroke-miterlimit: 10; stroke-width: 2.5px;"/>プレゼンテーション属性では、fillやstrokeが個別の属性になり、線幅のpxが付きません。
<rect id="rect-orange" x="120.25" y="35.79" width="90.56" height="60.11" fill="#f09628" stroke="#3c3c3c" stroke-miterlimit="10" stroke-width="2.5"/>| スタイル | 色の書き方 | ファイルサイズ |
|---|---|---|
| 内部 CSS | <style>のクラスを9つの要素が参照 | 3,408バイト |
| インラインスタイル | 9つの要素それぞれにstyle属性 | 3,281バイト |
| プレゼンテーション属性 | 9つの要素それぞれにfill属性など | 3,207バイト |
内部CSSでは、同じ色の円と小さな長方形が同じクラスを使っていました。
この元データでは3つの差は200バイトほどで、どれを選んでも座標の値は同じでした。
Web側のCSSで色を変えたいのか、ほかのツールへ渡すのかで選んでください。
フォント：文字を残すとテキスト要素とフォント名だけが入る
フォントを「アウトラインに変換」にした書き出しでは、文字「SVG 123」は6つのpath要素になり、テキスト要素はありませんでした。
フォントだけを「SVG」に変えると、文字は1つのtext要素として残りました。
.cls-3 {
fill: #1e1e1e;
font-family: ArialMT, Arial;
font-size: 24px;
}
<text id="label" class="cls-3" transform="translate(80 140)"><tspan x="0" y="0">SVG 123</tspan></text>フォントのデータは埋め込まれず、CSSにフォント名「ArialMT, Arial」と大きさが書かれるだけでした。
ファイルサイズは3,408バイトから855バイトに減りました。
表示する側にそのフォントが無いと、別のフォントで表示されるおそれがあります。
前の節のAPIでSVGフォントを指定した1条件では約13MBになったので、画面の「SVG」とAPIの指定は別のものとして扱ってください。
ブラウザーで文字がどう見えるかは、今回は確かめていません。
小数点以下の桁数：座標の桁とサイズが変わる
桁数だけを1・2・4に変えて書き出すと、同じ長方形が次のように書かれました。
<rect id="rect-orange" class="cls-1" x="120.2" y="35.8" width="90.6" height="60.1"/>
<rect id="rect-orange" class="cls-1" x="120.25" y="35.79" width="90.56" height="60.11"/>
<rect id="rect-orange" class="cls-1" x="120.2468" y="35.7891" width="90.5555" height="60.1111"/>| 桁数 | 長方形のx座標 | ファイルサイズ |
|---|---|---|
| 1 | x="120.2" | 2,746バイト |
| 2 | x="120.25" | 3,408バイト |
| 4 | x="120.2468" | 4,565バイト |
桁数を増やすと、元の座標の値に近くなり、ファイルも大きくなりました。
4桁にしても、40.25のように末尾が0の桁は書かれませんでした。
桁数を下げたときの見た目の差は、実際に使う大きさで確かめてから決めてください。
縮小：改行と字下げが消えて1行になる
縮小だけをオンにすると、36行あったファイルが改行の無い1行になり、3,408バイトから3,204バイトに減りました。
色の書き方と座標の値は、縮小がオフのときと同じでした。
練習用の文書に入れた中身の無いグループは、縮小がオフのときもSVGに書き出されませんでした。
この元データで縮小を入れて変わったのは、改行と字下げだけです。
あとで人がSVGを読んで直すなら、縮小はオフのほうが読みやすくなります。
レスポンシブ：オフにすると幅と高さが入る
レスポンシブがオンの書き出しでは、svg要素にviewBox="0 0 240 160"だけがあり、幅と高さの属性はありませんでした。
レスポンシブだけをオフにすると、width="240" height="160"が加わりました。
書き出したSVGに固定の幅と高さを持たせたいときは、レスポンシブをオフにします。
確かめた範囲と確かめていない範囲
最後に開いたときの設定へ戻して書き出すと、最初に書き出したファイルとまったく同じ内容になりました。
確かめたのは、画像を含まない1つのアートボードを、［書き出し形式…］のSVGオプションから書き出した場合です。
画像の「保持」以外の選択肢、オブジェクトIDのほかの選択肢、複数のアートボード、［スクリーン用に書き出し…］、「別名で保存」のSVG、ブラウザーでの表示、Mac、ほかのバージョンは確かめていません。
よくある質問：IllustratorのSVG書き出し
IllustratorでSVGを書き出す手順を教えてください。
「ファイル」→「書き出し」→「書き出し形式」を開き、ファイル形式でSVGを選びます。「アートボードごとに作成」を必要に応じてオンにして、書き出しを押し、SVGオプションの画面で設定します。選択したオブジェクトだけを出したいときは、「ファイル」→「選択範囲を書き出し」を使います。
スタイルの「内部CSS」「インラインスタイル」「プレゼンテーション属性」は、どう違いますか？
公式の説明では、内部CSSはstyle要素とクラス、インラインスタイルは各要素のstyle属性、プレゼンテーション属性はfillなど個別の属性として保持します。Android StudioのSVGアセットにはプレゼンテーション属性が必要と公式で案内されています。用途に合わせて選んでください。
2026年10月17日の確認では、同じ長方形が内部CSSではclass、インラインスタイルではstyle属性、プレゼンテーション属性ではfill属性などで書かれ、ファイルサイズの差は200バイトほどでした。
フォントは、アウトラインにしたほうがよいですか？
公式では、フォントをアウトラインにすると互換性が高いとされています。文字が崩れるときは、アウトライン化が候補になります。ただし、文字をパスに変換した出力は、別の端末でフォントを編集し直せることを意味しません。編集用の元データは別に保存してください。記事のAPI側の確認では、SVGフォントを指定した1条件で、ファイルサイズが約13MBになった例があり、文字を残せば必ず軽くなる、とは一般化できません。
一方、画面のSVGオプションでフォントを「SVG」にした2026年10月17日の書き出しでは、フォントのデータは埋め込まれず、文字が1つのテキスト要素とフォント名で書かれ、855バイトになりました。
小数点以下の桁数は、いくつにすればよいですか？
小数点以下の桁数は、大きいほど精度が高く、ファイルも大きくなります。「別名で保存」の旧ダイアログでは、1〜7から選びます。記事の補助確認では、桁数を3桁から1桁に変えた出力が4,060バイトから3,008バイトになりましたが、ファイルサイズの差と見た目の差は別々に出るため、両方を見てから決めてください。小数点以下3桁が常に適切であるとは、この確認からは判断できません。
画面のSVGオプションで桁数を1・2・4に変えた2026年10月17日の書き出しでは、2,746バイト・3,408バイト・4,565バイトになりました。
書き出したSVGの寸法が思ったとおりにならないのは、なぜですか？
記事の確認では、書き出し範囲が原因でした。「アートボードごとに作成」を指定した出力のviewBoxは「0 0 600 400」でしたが、指定しなかった出力は、図形と文字が占める範囲に合わせた「0 0 251.13 262.76」になりました。ファイルサイズは3,083バイトと3,064バイトで、差はほとんどありませんでした。寸法が思ったとおりにならないときは、小数点以下の桁数より先に書き出し範囲を確認してください。Webページ上の表示幅と、SVGのviewBoxは分けて判断します。
用途別に、どの設定を選べばよいですか？
記事の使い分けの目安では、Webに置く小さなアイコンは最小化をオンにして桁数を抑えます。図をあとで編集するなら、最小化はオフにして読みやすさを残します。文字が崩れるときは、フォントをアウトラインにします。ロゴ・アイコンは、小さく表示した輪郭・色・線・透明部分を、実際の配置先で確認します。画像を含む場合は、SVG内への埋め込みか、外部ファイルへのリンクかを確認してください。
JSXでSVGを書き出す設定は、画面のSVGオプションと同じですか？
同じではありません。ExportOptionsSVGを使うJSXと、「書き出し形式」から開くSVGオプションは、項目を一対一で読み替えないでください。JSXのcssProperties、fontType、coordinatePrecisionなどはAPIのプロパティです。記事では、両経路の実機比較は未実施で、API経由の結果とGUI経由の結果は、出力方法も記録して分けて比較するよう案内しています。
記事の結果は、ブラウザーでも同じように表示されますか？ 最新はどこで確認しますか？
Webブラウザーでの表示試験は実施していません。確認した環境は、2026年10月9日のWindows 11上のIllustrator 30.8.2日本語版で、元データは1点、画面経由の出力が2点、API経由の出力が4条件です。画質の優劣や、すべてのブラウザーで同じに見えることは、この確認からは判断できません。前半の設定説明は、Adobe公式ヘルプ（日本語版）の記載（2026年9月30日に確認）に基づいており、バージョンによって画面や項目名が変わることがあるため、最新はAdobe公式のヘルプと、ご自分の画面で確認してください。
