Affinity（2026年最新版）の SVG 書き出し設定。毎回「あれ、どれが正解だっけ？」と調べるのは本当に時間をロスしますし、作業の勢いを止めてしまうのでストレスですよね。何しろ、設定項目が多すぎて、完ぺきに覚えるのは至難の業です。
今後のための「完全備忘録（チートシート）」として、迷わず設定できるように整理しました。ブックマークやメモアプリに保存してご活用ください。
1. まず、どのプリセットを選ぶか？
用途に合わせて、ベースとなるプリセットを以下の4つから選びます。
- SVG（書き出し用）▶ 【基本はコレ】
- 用途: Adobe Illustratorなど他のベクターソフトで開く場合や、印刷所に入稿する場合。
- 特徴: データを可能な限り保持し、再編集しやすい状態で書き出します。
- SVG（デジタル – 小サイズ）▶ 【Web向け・軽量化】
- 用途: Webサイトのアイコンやロゴとして使う場合。
- 特徴: ファイルサイズを最小限に抑えることを優先します。
- SVG（デジタル – 高品質）▶ 【Web向け・高画質】
- 用途: Web用ですが、ラスター画像（写真や影などのエフェクト）が含まれており、その画質を落としたくない場合。
- SVG（画像の統合）▶ 【基本使わない】
- 用途: 特殊用途。
- 特徴: ベクターデータをすべて1枚の画像（ラスター）として書き出してしまいます。拡大すると荒れるため、SVGのメリットが消えます。
2. 書き出しの詳細設定（ケースバイケースの対応表）
詳細設定パネルの各項目です。「基本の推奨」と「変更すべきケース」をまとめました。
| 設定項目 | 基本の推奨 | 理由・ケースバイケース |
|---|---|---|
| 非表示レイヤーをエクスポートしない | オン | 不要なデータ（非表示にしているゴミや下書き）を含めず、ファイルを軽くするため。 |
| ラスタライズ | サポートされていないプロパティ（または「なし」） | SVGで表現できないエフェクト（複雑なぼかし等）だけを画像化し、他はベクターを維持します。完全にベクターにこだわりたい場合は「なし」ですが、見た目が崩れるリスクがあります。 |
| ドキュメント解像度を使用 | オフ | オフにして、下の「ラスターDPI」で用途に合わせた解像度を直接指定する方が確実です。 |
| ラスターDPI | 72 または 300 | SVG内に画像が含まれる場合の解像度です。Web用なら「72」または「96」。印刷用なら「300」にします。 |
| 画像のダウンサンプル | オン | 無駄に大きい埋め込み画像を縮小し、ファイルサイズを最適化するため。 |
| 最小DPI | 72 （Webの場合） | Web用途なら「72」または「96」。印刷用途なら「300」等に設定します。 |
| リサンプル | Lanczos 3（分離不可） | 縮小時のアルゴリズムです。一番綺麗に縮小される「Lanczos 3」または「バイキュービック」がおすすめです。 |
| JPEG圧縮を許可 | オン | SVG内に写真などのラスター画像が含まれる場合、容量を大幅に削減できます。 |
| 品質 | 85 | デフォルトの85で十分綺麗です。極限まで容量を削りたいWeb用なら少し下げます。 |
| 小数部桁数 | 3 | パスの座標の細かさです。「3」で十分です。容量を削りたい場合は「1〜2」に減らしますが、カーブが少しカクつく可能性があります。 |
| テキストをカーブとして書き出し | オン | 重要！（いわゆるアウトライン化です）。相手のPCに同じフォントがなくてもデザインが崩れません。※後からテキストを打ち替えたい場合のみ「オフ」。 |
| より長いテキスト範囲 | オフ | コード内でテキストを一つの塊として扱うかの設定です。カーブ化（アウトライン化）する場合は関係ありません。 |
| 相対座標 | オフ | オンにするとコードの文字数が減りわずかに軽くなりますが、他のソフトで開いたときに表示が崩れる（互換性が下がる）原因になりやすいため、基本はオフです。 |
| 16進数カラーを使用 | オン | #FFFFFFのようなWebで一般的なカラーコードで書き出されます。Webエンジニアが扱いやすくなります。 |
| 変形をフラット化 | オン | 回転などの情報をパス自体に適用して書き出します。他のソフトで読み込んだ際の互換性が高まります。 |
| タイルパターンを使用 | オン | パターン塗りつぶしを使っている場合、データが軽くなります。使っていなければどちらでも影響ありません。 |
| viewBoxを使用する | オン | Web用なら必須。 これをオンにしないと、Webサイトに埋め込んだ時にレスポンシブ（画面幅に合わせて伸縮）になりません。 |
| 改行を追加 | オン | 後からテキストエディタ等でSVGのコードを直接開いて確認・編集する際に読みやすくなります。容量を極限まで削りたい（1バイトでも軽くしたい）時のみオフにします。 |
迷った時の「鉄板」セッティングまとめ
A. 印刷・他ソフト（Illustrator等）との連携用
- プリセット：「SVG（書き出し用）」
- テキストをカーブとして書き出し：「オン」
- ラスターDPI：「300」
B. Webデザイン・コーディング用
- プリセット：「SVG（デジタル – 小サイズ）」
- テキストをカーブとして書き出し：「オン」
- viewBoxを使用する：「オン」（必須）
- ラスターDPI：「72」
このページをスクリーンショットするか保存しておけば、次回以降の SVG エクスポート設定で迷うことはなくなります！
書き出した画像がボヤける場合
書き出した画像がボヤける時は、その部分だけが意図せずラスタライズ（画像化）されている可能性があります。
SVG（ベクター）の標準機能では、表現できないデータを見つけると、見た目を維持するためにそのパーツだけを無理やり画像（ピクセル）に変換してSVGの中に埋め込みます。
具体的には、ドロップシャドウ、ガウスぼかし、光彩、3Dエフェクトなどの「レイヤーエフェクト（fx）」が適用されている場合、ピクセルレイヤーになっている場合、特殊な描画モードや不透明度マスクを使っている場合などが考えられます。
エフェクトをオフにしたり、ベクターの図形だけで表現できるデザインに変更すると改善しますが、見えない描画モードや不透明度のズレなどが原因になることもあります。
写真や複雑な影（ドロップシャドウなど）を使わない純粋なベクターのロゴやアイコンを書き出す際は、「ラスタライズ：なし」を基本設定（デフォルト）にするのも有効です。意図しないボヤけ（ピクセル化）を未然に100%防ぐことができます。
余裕があれば、エクスポート後のコードを整理したい
エクスポート後のファイルをコードエディタなどで見てみると、<?xml...?> や <!DOCTYPE...> といった古い規格の宣言が残っています。現代のWeb環境において100%不要のため、削除することをおすすめします。
厳密に言うと、他にも削除すべきコード類が結構ありますし、すっきり整理できる部分もあります（Affinity 独自のメタデータ削除や共通スタイルを親にまとめるなど）。
ただ、表示を維持するために絶対削ってはいけない要素もあるため、SVG の構造を完全に理解して、コードを自分で調整するのは難易度が高めです。
慣れるまでは、AI の一時チャットなどに「コードを整理して」などと投げるのが手っ取り早い解決法です（一時チャットであれば、一般的に AI の学習では使われません）。
また、コードについて不慣れであれば、SVGOMG などの SVG 最適化オンラインツール（無料）を活用するのも有効な手段です。画面を見ながら直感的な操作で、不要なメタデータやコードを削除できます。
Affinity vs. Adobe の今後について
Affinity は無料ながら、Adobe Illustrator / Photoshop に匹敵する機能を備えており、スタートアップや個人事業主はもちろん、今後は企業での導入もさらに進むと見られています。
もちろん、広告物や印刷物などの最終入稿では、依然として Adobe が求められる場面も多いでしょう。しかし、今回のような「書き出し」用途や Web デザイン用途であれば、必ずしも Adobe 製品が必要というわけではありません。
近年は Adobe 製品の年間維持費が大きな負担になっていることもあり、無料で継続利用できる Affinity への支持は、今後さらに高まっていくのではないかと感じています。
Leave a Reply