この記事でわかること
IllustratorからSVGを書き出す基本手順は、「ファイル→書き出し→書き出し形式」の5ステップで完了します。文字化け・余白・表示崩れの原因と3分診断フロー、納品品質を安定させる実務ハック5つをまとめました。
IllustratorのSVG書き出しで最優先すべきことは「書き出し形式とオプション設定の組み合わせを用途別に固定すること」です。Web用・納品用・編集用で設定を使い回すと、文字化けや余白などのトラブルが発生します。書き出し前にアートボードサイズの確認・不要レイヤーの整理・文字のアウトライン化の3点を済ませると、ブラウザ表示崩れの多くを防げます。
今日やるべき1つ
手元のIllustratorで「ファイル→書き出し→書き出し形式」を開き、形式リストに「SVG（svg）」が表示されることを確認してください（1分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| 初めてSVGを書き出したい | SVG書き出しは5ステップで完了 | 3分 |
| 複数アートボードを個別ファイルにしたい | 複数アートボードは一括書き出しで対応 | 3分 |
| 文字化け・余白・表示崩れを解決したい | SVGトラブルは3分で診断 | 3分 |
| 納品品質の設定を知りたい | SVG書き出しは5つの実務ハックで品質向上 | 5分 |
| ファイル整理と運用ルールを決めたい | フリーランスのSVG納品チェックリスト | 3分 |
30秒診断全2問・あなたに合う働き方のタイプが分かります
Q1. 今のデザインの仕事で、一番近い悩みは？
SVG書き出しは5ステップで完了
基本の流れを押さえると、その後の応用設定が格段に理解しやすくなります。
ステップ1：書き出し前の3点確認
書き出し操作を始める前に、アートボードのサイズと位置・非表示レイヤーの有無・画像オブジェクトの有無の3点を確認します。アートボードサイズは「ウィンドウ→アートボード」パネルで数値を確認できます。非表示レイヤーはレイヤーパネルを開き、目のアイコンが閉じているレイヤーをすべて表示または削除します。SVG内に配置画像が含まれる場合は、透明度（アルファチャンネル）の有無によりPNGまたはJPEGへ自動変換される仕様があるため、事前に把握しておいてください（Illustratorのアートワーク書き出し）。この3点の確認を書き出し前に習慣化するだけで、書き出し後の修正作業を大幅に削減できます。
ステップ2：「書き出し形式」を選ぶ
「ファイル」メニューを開き、「書き出し」→「書き出し形式」を選択します。SVGを書き出す場合は「書き出し形式」を使うのが現在の正式な方法です。「Web用に保存」はJPEG・PNG・GIFなどのラスター形式に特化した旧来の機能であり、SVGのオプション設定項目が少なく、フォントやCSS設定を細かく制御できません（IllustratorでSVGを書き出す方法）。SVGは必ず「書き出し形式」から行うと覚えてください。なお、シンプルアイコン無料ダウンロード完全ガイド｜SVG・PNG対応サイト厳選7選と活用法では、SVGやPNG形式で使えるアイコン素材の探し方も紹介しています。
ステップ3：形式で「SVG」を指定して保存先を決める
「書き出し形式」ダイアログが開いたら、ファイル形式のプルダウンから「SVG（svg）」を選択します。保存先フォルダはプロジェクトの「export」または「svg」フォルダにまとめると、AIファイルとの混在を防げます。ファイル名はクライアントが受け取ってすぐに内容を識別できるよう「ロゴ名_色_バリエーション.svg」のような命名規則を最初から決めておいてください。ファイル名ルール5選｜フリーランスが今日から使える命名規則を参考にすると、SVG以外のファイルも含めたプロジェクト全体の命名を統一できます。
ステップ4：SVGオプションを設定する
「書き出し」ボタンを押すと「SVGオプション」ダイアログが表示されます。Web公開用であればCSSプロパティを「スタイル要素」、フォントを「SVG」に設定します。文字のアウトライン化が済んでいる場合はフォント設定は影響しませんが、済んでいない場合は文字化けのリスクがあるため「SVG」を選択するのが安全です。「縮小（Minify）」チェックボックスを有効にすると、SVGコード内のインデント・改行・空白が除去され、ファイルサイズを削減できます。ただしMinify後のコードはテキストエディターで読みにくくなるため、コード編集が必要な案件では無効のままにしておいてください（Illustratorのアートワーク書き出し）。
ステップ5：ブラウザで表示確認する
書き出し後は必ずブラウザのアドレスバーにSVGファイルをドラッグ&ドロップして表示確認します。Illustrator上での見た目とブラウザでの描画は環境によって異なるため、納品前のブラウザ確認は省略できない工程です。Chrome・Safari・Firefoxの3ブラウザで確認すると、特定のブラウザ固有の表示差異も発見できます。
CHECK
▶ 今すぐやること: 「ファイル→書き出し→書き出し形式」を開き、形式プルダウンに「SVG（svg）」があることを確認する（1分）
Q: 「Web用に保存」でもSVGを書き出せますか？
A： 形式選択肢にSVGが含まれる場合もありますが、フォントやCSS設定の制御項目が少ないため、実務では「書き出し形式」の使用をおすすめします。
Q： 書き出したSVGをIllustratorで再編集できますか？
A： 技術的には開けますが、Adobeは元のAIファイルを編集して再書き出しする方法を推奨しています（IllustratorでSVGを書き出す方法）。SVGファイルを直接編集すると、次の書き出し時に設定が上書きされる場合があります。
複数アートボードは一括書き出しで対応
複数のアイコンやバナーを1つのAIファイルで管理している場合、個別に書き出すと手間がかかります。「アートボードごとに作成」オプションを使えば、一度の操作で全アートボードを個別SVGファイルに分割できます。
「アートボードごとに作成」の設定手順
「書き出し形式」ダイアログで保存先とファイル名を入力した後、「アートボードごとに作成」チェックボックスをオンにします。チェックを入れると、「すべて」または「範囲指定（例：1-3, 5）」を選択できます（IllustratorでSVGを書き出す方法）。書き出されるファイル名は「入力したファイル名_アートボード名.svg」になるため、アートボードに事前にわかりやすい名前を付けておくと、書き出し後のリネーム作業を省けます。アートボード名の命名規則とこのオプションを組み合わせると、10枚以上のSVGを一括で整理された状態に書き出せます。
アートボードのサイズ調整方法
各アートボードが書き出したいオブジェクトのサイズと一致しているかを事前に確認します。アートボードが大きすぎると余白が生じ、小さすぎるとオブジェクトが切れます。「オブジェクト→アートボード→アートボードを選択オブジェクトに合わせる」を使うと、選択したオブジェクトのバウンディングボックスに合わせてアートボードサイズを自動調整できます。これを使えば、余白の手動削除が不要になります。
選択範囲だけをSVGに書き出す方法
アートボード全体ではなく、特定のオブジェクトだけをSVGにしたい場合は、対象を選択した状態で「ファイル→選択範囲を書き出し」を使います。表示されるダイアログから書き出し形式をSVGに設定し、スケールや余白（padding）を指定して書き出せます（IllustratorでSVGを書き出す方法）。この方法は、ロゴのカラーバリエーションや状態違いのアイコンを同一アートボード上にレイアウトしている場合に特に有効です。Figma SVG書き出しは3ステップで完了｜アイコン軽量化まで解説も合わせて参照すると、Figmaとの書き出し比較が理解しやすくなります。
CHECK
▶ 今すぐやること: アートボードパネルを開き、各アートボードに日本語または英数字で識別しやすい名前が付いているか確認する（2分）
Q: 書き出し後のSVGファイル名を変更しても問題ありませんか？
A： ファイル名はSVGの内部コードに影響しないため、書き出し後にリネームしても表示や動作に問題はありません。
Q： アートボードの外にはみ出したオブジェクトは書き出されますか？
A： 「書き出し形式」の場合、アートボード外のオブジェクトはデフォルトで書き出されません。意図せずアートボード外にオブジェクトが存在する場合は、削除またはアートボード内に移動してから書き出してください。
SVGトラブルは3分で診断
書き出したSVGが正常に表示されないとき、原因の特定に時間がかかることも珍しくありません。以下の診断フローで該当する問題と対処法をすぐに確認できます。
Q1: ブラウザでSVGを開いたとき、文字が変わっているまたは表示されていませんか？
Yesの場合 → Q2へ進んでください。
Noの場合 → Q3へ進んでください。
Q2: 書き出し前に文字をアウトライン化（書式→アウトラインを作成）しましたか？
Yesの場合 → Result Aへ進んでください。
Noの場合 → Result Bへ進んでください。
Q3: SVGをブラウザで開いたとき、オブジェクトの周囲に不要な余白がありますか？
Yesの場合 → Result Cへ進んでください。
Noの場合 → Result Dへ進んでください。
Result A: アウトライン化済みなのに文字が崩れる場合
アウトライン化後に文字を追加または変更した可能性があります。「書式→アウトラインを作成」を再度適用し、すべてのテキストオブジェクトがパスに変換されているかをレイヤーパネルで確認してから再書き出ししてください。所要時間は約3分です。イラレ アウトライン化は5ステップで完了|入稿前チェックリスト付きでは、アウトライン化の正確な手順とチェックリストを詳しく解説しています。
Result B: アウトライン化していない場合の文字化け対処
SVGオプションの「フォント」設定を「SVG」に変更して再書き出しします。それでも文字が崩れる場合は、「書式→アウトラインを作成」で文字をパスに変換してから書き出してください。フォントをパス化すると文字の編集はできなくなるため、必ず元のAIファイルを別名保存してから作業します。所要時間は約5分です。
Result C: 余白が発生している場合の対処
アートボードのサイズとオブジェクトのバウンディングボックスがずれている状態です。「オブジェクト→アートボード→アートボードを選択オブジェクトに合わせる」でアートボードをオブジェクトに密着させてから再書き出しします。または「選択範囲を書き出し」でpadding値を0に設定する方法も有効です。所要時間は約2分です。
Result D: 余白も文字崩れもないが表示が乱れる場合
クリッピングマスクやグラデーションメッシュ、効果（ドロップシャドウ等）を使用している可能性があります。グラデーションメッシュを含むオブジェクトはSVG保存時にラスタライズされる場合があるため、効果の種類を確認し、必要であれば「オブジェクト→ラスタライズ」で明示的にラスタライズしてから書き出します（Illustratorのアートワーク書き出し）。所要時間は約5分です。
CHECK
▶ 今すぐやること: 書き出し済みのSVGファイルをChromeのアドレスバーにドラッグし、表示を確認する（1分）
Q: クリッピングマスクを使ったデザインはSVGで正常に表示されますか？
A： 多くの場合、クリッピングマスクはSVGの<clipPath>要素として書き出されブラウザで表示されます。ただし複雑なマスクや効果との組み合わせでは表示が崩れることがあるため、書き出し後のブラウザ確認は必須です。
Q： グラデーションはSVGに書き出せますか？
A： 通常のグラデーションはSVGの<linearGradient>または<radialGradient>要素として書き出されます。ただしグラデーションメッシュはラスタライズされる場合があるため、事前に確認してください（Illustratorのアートワーク書き出し）。
デザインツールを仕事で使えるようになりたい方へ
Photoshopの全工程の解説動画をLINEで受け取る
LINEで無料で届くもの
- 全工程Photoshopの解説動画
- 20本Webデザインの無料レッスン
- 4本限定のPDF・動画
登録1分・情報収集だけでもOK・セミナー参加は自由
タップするとLINEの友だち追加画面が開きます
LINE登録のよくある質問
- お金はかかりますか？
- LINEの登録と、届くレッスン・動画・PDFは無料です。
- どんな連絡が来ますか？
- レッスンや動画のほか、無料セミナーの案内が届きます。参加するかは自由です。
- やめたいときは？
- LINEでブロックすれば、それ以上は届きません。
PR提供: 日本デザインスクール（デザスク）
フリーランスのSVG納品チェックリスト
納品直前にこのチェックリストを使うと、書き出し後の修正対応を防げます。フリーランスとして納品品質を安定させるには、属人的な手順ではなくチェックリストによる標準化が有効です。
書き出し前チェック（3項目）
Illustratorファイルを書き出す前に、アートボードのサイズとオブジェクトのバウンディングボックスが一致しているかを確認します。次に、非表示レイヤーまたは不要なオブジェクトが残っていないかをレイヤーパネルで確認します。最後に、テキストオブジェクトがアウトライン化済みか、またはSVGオプションのフォント設定が「SVG」に設定されているかを確認します。この3項目を書き出し前に確認することで、書き出し後に発覚する問題の大半を事前に防止できます。
書き出し設定チェック（4項目）
「書き出し形式」から書き出しているか（「Web用に保存」との混同がないか）を確認します。Web公開用であれば「縮小（Minify）」を有効にしているかを確認します。画像を含む場合は、SVGオプションの「画像の場所」設定（埋め込みまたはリンク）が納品先の要件と一致しているかを確認します。書き出し先フォルダとファイル名がプロジェクトの命名規則と一致しているかも確認します。画像圧縮無料ツール5選｜画質を落とさず一括圧縮する方法も活用して、SVGと併用するPNG・JPEGのサイズ最適化を並行して進めると納品効率が上がります。
書き出し後チェック（3項目）
ブラウザ（Chrome）でSVGを開き、Illustratorの表示と一致しているかを目視確認します。ファイルサイズが想定範囲内かをFinderまたはエクスプローラーで確認します（ロゴ・アイコン類は内容の複雑さによって変わりますが、数KB〜数十KB程度が一般的な目安です）。AIファイル・SVGファイル・必要に応じてPNGファイルが所定のフォルダに揃っているかを確認してから納品します。
CHECK
▶ 今すぐやること: 上記10項目のチェックリストをNotionまたはテキストファイルに貼り付けて、次回の納品で活用する（3分）
Q: SVGとPNGを両方納品する必要がありますか？
A： クライアントの用途によって異なります。WebサイトやアプリへのSVG実装が目的であればSVGのみ、印刷物やSVG非対応の環境向けにはPNGも用意するのが実務上の基本です。事前に用途を確認してから書き出し形式を決めると無駄な修正を防げます。
Q： SVGZを使うべき場面はありますか？
A： SVGZはSVGをgzip圧縮した形式でファイルサイズを削減できますが、圧縮率は元のSVGの内容によって異なります。テキストエディターで直接編集できないため、コード編集の可能性がある案件には向きません（Illustratorのアートワーク書き出し）。ファイルサイズ削減が最優先の案件でのみ検討してください。
SVG書き出しは5つの実務ハックで品質向上
基本の書き出し手順を習得した後に、これらを追加することで納品品質が安定します。競合記事では触れられていない実務レベルの改善手順をまとめました。
ハック1: アートボード名の命名規則でリネーム作業をゼロにする
【対象】: 複数アイコンやバナーを同一AIファイルで管理しているフリーランス
【手順】:
ステップ1: アートボードパネルを開き、各アートボードをダブルクリックして名前を編集します（例：icon_home、icon_menu、banner_top）（2分）。
ステップ2: 「書き出し形式」でファイル名のベース名を「project名」等に設定し、「アートボードごとに作成」をオンにします（1分）。
ステップ3: 書き出し後のファイル名が「project名_アートボード名.svg」になっていることを確認し、そのまま納品フォルダへ移動します（1分）。
【コツと理由】: アートボード名を事前に命名規則に合わせると、書き出し時点でファイル名が完成します。IllustratorはUの一括書き出しで「ベース名＋アートボード名」を自動結合する仕様になっており、命名規則の決定コストを「書き出し前の1回」に集約することで書き出し後のリネーム作業が完全に不要になります。
【注意点】: アートボード名に全角文字やスペースを使うと、Webサーバーでのファイルパス処理で問題が生じることがあります。半角英数字とアンダースコアのみで構成してください。
ハック2: 文字の扱いを用途別に固定してフォント問題を根絶する
【対象】: テキストを含むロゴやバナーをSVGで納品するフリーランス
【手順】:
ステップ1: 納品先の用途を「Web実装用（コードを触る）」か「表示専用（画像として使う）」かで分類します（1分）。
ステップ2: Web実装用の場合は書き出し前にすべてのテキストを「書式→アウトラインを作成」でパス化し、フォント依存をゼロにします（2〜5分）。
ステップ3: 表示専用の場合はアウトライン化せず、SVGオプションの「フォント」を「SVG」に設定して書き出します。ブラウザ表示確認後に問題がなければ完了です（3分）。
【コツと理由】: 用途によってアウトライン化しない方が良いケースがあります。アウトライン化するとテキスト内容を後から変更できなくなる一方、SVGの<text>要素を保持する方がクライアント側でCSSを使ったフォント変更・多言語対応ができ、実装工程での自由度が高まります。用途確認を書き出し前の標準手順に組み込むことで、フォント問題の発生率を大幅に下げられます。
【注意点】: アウトライン化後のAIファイルを上書き保存すると、テキストに戻せなくなります。アウトライン化は必ず「別名で保存」したコピーに対して行い、元のAIファイルは常にテキスト編集可能な状態で保持してください。
ハック3: 「縮小（Minify）」の適用判断を案件タイプで決める
【対象】: WebページやアプリにSVGを組み込む実装案件を担当するフリーランス
【手順】:
ステップ1: 案件を「実装用（SVGコードをHTMLに埋め込む）」と「素材用（img要素またはCSSで参照）」に分類します（1分）。
ステップ2: 素材用の場合はMinifyを「有効」にして書き出します。ファイルサイズ削減によりWebページの読み込み速度向上に貢献します（1分）。
ステップ3: 実装用（SVGコードを直接操作する）の場合はMinifyを「無効」のまま書き出し、コードの可読性を保ちます。最終公開前にMinify済みバージョンを別途作成します（2分）。
【コツと理由】: Minify後のコードはIDや改行がすべて除去されるため、CSSアニメーションを追加する実装工程でクラス名やIDの特定が困難になります。Minifyはファイル配信時の最適化であり、開発・修正フェーズとは目的が異なります。開発中はMinify無効・公開直前にMinify有効という2段階の書き出しフローを標準化すると、実装コストと配信効率を両立できます。
【注意点】: MinifyしたSVGをテキストエディターで編集しようとすると、コードの構造把握に時間がかかります。MinifyはSVGZと同様、コード編集の予定がある案件では作業フェーズの終盤まで有効にしないでください。
ハック4: 書き出し前の「余白ゼロ化」を2ステップで完了する
【対象】: 書き出したSVGに不要な余白が入って困っているフリーランス
【手順】:
ステップ1: 余白の原因になっているオブジェクトを選択した状態で「オブジェクト→アートボード→アートボードを選択オブジェクトに合わせる」を実行します（1分）。
ステップ2: アートボードサイズがオブジェクトのバウンディングボックスに密着したことをアートボードパネルの数値で確認してから書き出します（1分）。
【コツと理由】: 手動数値入力でアートボードを調整すると端数ピクセルのずれが発生しやすく、それが余白として現れることがあります。「オブジェクトに合わせる」コマンドはバウンディングボックスの座標を直接参照するため、ピクセル単位のずれが発生しにくい設計になっています。この2ステップを書き出しフローに組み込むと、余白に起因する再書き出し回数を大幅に減らせます。
【注意点】: ドロップシャドウや光彩（外側）などの効果がオブジェクトに適用されている場合、バウンディングボックスが効果の外縁を含む場合と含まない場合があります。アートボードに合わせた後、ブラウザで表示して効果が切れていないかを確認してください。
ハック5: AI・SVG・PNG の3ファイル体制で納品後修正をゼロにする
【対象】: 納品後に「修正したい」と連絡を受けて困った経験があるフリーランス
【手順】:
ステップ1: プロジェクトフォルダを「source（AIファイル保管）」「export/svg（SVG書き出し先）」「export/png（PNG書き出し先）」の3フォルダに分けます（2分）。
ステップ2: 修正が発生したときは必ずsourceフォルダのAIファイルを編集し、exportフォルダへ再書き出しするルールを決めます（1分）。
ステップ3: 納品時はexportフォルダのみをZIPにしてクライアントへ渡し、AIファイルは別途要望があった場合のみ提供します（2分）。
【コツと理由】: SVGを直接編集すると次の書き出し時に変更が上書きされ、修正の履歴が追えなくなります。Adobeも公式に「SVGを再編集せず元のAIファイルから再書き出しする」方法を推奨しており、AIファイルを正本とした運用がIllustratorの設計思想と一致しています（IllustratorでSVGを書き出す方法）。AIファイルを正本とした3フォルダ体制を最初のプロジェクトから導入すると、納品後修正の対応時間を削減できます。大容量のAIファイルをクライアントへ送る場合は大容量ファイル送る無料|8つの方法で即日解決が参考になります。
【注意点】: クライアントがSVGファイルを自社でCMS等に再アップロードして使う運用の場合、ファイル名を変更すると既存のリンクが切れることがあります。初回納品時にファイル名変更の影響についてクライアントに確認しておいてください。
CHECK
▶ 今すぐやること: プロジェクトフォルダにsource・export/svg・export/pngの3フォルダを作成し、現在作業中のAIファイルをsourceに移動する（3分）
Q: Minifyを使うとSEOに影響しますか？
A： SVGファイル単体のMinifyはSEOに直接影響しません。ただしSVGをインラインでHTMLに埋め込む場合、Minify済みコードがHTMLのファイルサイズ削減に貢献し、ページ速度スコアの改善につながることがあります。
Q： クライアントからAIデータの提供を求められたときはどうすればよいですか？
A： 契約上の取り決めに従うのが原則です。AIデータを提供する場合は、使用フォントの埋め込み状態とリンク画像の添付を事前に確認してから渡すと、クライアント側での開封トラブルを防げます。
SVG書き出しは用途別設定で品質が決まる
IllustratorのSVG書き出しで品質を安定させる核心は、「書き出し前の3点確認・用途別のオプション設定・AI正本管理の3セット」を標準化することです。書き出し手順そのものは5ステップと単純ですが、文字の扱い・Minifyの適用タイミング・フォルダ体制という3つの判断を案件ごとに固定することで、書き出し後の修正回数を大幅に減らせます。今日紹介した10項目のチェックリストを最初のプロジェクトから使い始めると、納品品質の安定に直結します。
今すぐ実践できる最初の一歩は、プロジェクトフォルダの3フォルダ体制とアートボード命名規則の設定です。この2つを今日決めるだけで、次回の書き出し作業から効率が変わります。納品完了メール例文7選|コピペで即送信と組み合わせて、SVG納品後の連絡文も定型化しておくと、クライアントとのやり取りをさらにスムーズにできます。
| 状況 | 次の一歩 | 所要時間 |
| 初めてSVGを書き出す | 「ファイル→書き出し→書き出し形式」で手順を1回実行する | 5分 |
| 複数アートボードを管理している | アートボード名を半角英数字の命名規則に統一する | 5分 |
| 文字化け・余白で再納品が発生した | 書き出し前チェックリストの3項目を確認してから再書き出しする | 3分 |
| 納品フォルダが整理されていない | source・export/svg・export/pngの3フォルダを今すぐ作成する | 2分 |
Illustrator SVG書き出しに関するよくある質問
Q: IllustratorのバージョンによってSVG書き出しの手順は変わりますか？
A： メニュー名や項目の位置がバージョンによって異なる場合があります。本記事の手順はIllustrator CC（現行バージョン）を基準にしています。旧バージョンを使用している場合は、Adobe公式ヘルプで対応するバージョンの手順を確認してください（Illustratorのアートワーク書き出し）。
Q： SVGファイルをメールで送ると文字化けすることがあります。なぜですか？
A： SVGはXMLベースのテキストファイルのため、メールクライアントやZIP展開時の文字コード設定によって日本語ファイル名が文字化けすることがあります。ファイル名を半角英数字に統一すると、この問題を防げます。ZIP文字化けは3ステップで解消｜無料ソフト対応法も参考にしてください。
Q: IllustratorのSVGとFigmaのSVGは同じですか？
A： どちらもSVG規格に準拠していますが、CSSクラスの命名方式やIDの生成規則など、ツール固有のコード構造が異なります。IllustratorのSVGをFigmaに読み込む場合、一部のスタイルが調整される可能性があります。実装前に表示確認を行ってください。
【出典・参照元】
IllustratorでSVGを書き出す方法（Adobe公式・日本語）
Illustratorのアートワーク書き出し（Adobe公式ヘルプ・日本語）