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 への支持は、今後さらに高まっていくのではないかと感じています。