グラデーションはベクター化できる？適切な方法の選び方
ラスターのグラデーションをトレースする場合、SVG本来のグラデーションとして作り直す場合、元画像のまま使う方がよい場合の違いを解説します。
目次
グラデーションを含む作品もベクター化できますが、グラデーション自体のトレースが役立つとは限りません。単純なロゴなら、整ったベクター図形にグラデーションの塗りを新しく作るのがよい場合が多いです。陰影のあるイラストは意図的な単純化が必要かもしれません。光や色が連続して変わる写真は、通常ラスター形式が向いています。
適切な方法は、変換後に何を編集可能に保つ必要があるか、どこで使うかによって決まります。拡張子ではなく、形状から考えてください。
要点
SVGは本来の機能として線形・放射状グラデーションに対応します。トレースツールはラスターの陰影を多数の色付き図形で近似する場合もあります。まず形状を取り出し、色の変化を作り直す、ポスタライズした見た目を採用する、ラスターのまま使う、のどれかを選びます。
まずグラデーションの種類を見分ける
「グラデーション」は、複数の異なる視覚表現を含みます。すべて同じ問題として扱うと、単純なロゴが数百の細い色帯に変わってしまいます。
| 元の作品 | 最初に試す方法 | 理由 |
|---|---|---|
| 線形または放射状の色変化が1つあるフラットなロゴ | 外形をトレースしてグラデーションを作り直す | 形状が単純で、色変化を編集可能に保てる |
| 陰影が少数の領域に整理されたイラスト | トレースを試し、一部の領域を単純化・再構成する | 一部の陰影は使える図形になるが、細部が急増しやすい |
| 写真、柔らかな絵画、複雑な光の表現 | ラスターを保つか、意図した図案化を行う | 連続階調には少数の明確な境界がない |
| 切断、彫刻、CNC用の作品 | 単色のパスを作り、ツールパスでは見た目のグラデーションを無視する | 機械は色の陰影ではなく形状をたどる |
SVG 2のペイントサーバー仕様は、線形・放射状グラデーションを、カラーストップを持つ再利用可能な塗りやストロークとして定義します。これは簡潔なベクター命令です。フラット化したPNGの見える階調をすべてトレースするのとは異なります。
自動トレースで色帯ができる理由
ラスターのグラデーションは、色が小さな段階で変わるピクセルの集まりです。図形トレースは境界を探します。見える変化をすべて保持しようとすると、滑らかな色変化を細い領域の積み重ねに変えることがあります。通常サイズのプレビューは元画像に似て見えても、パスに展開したファイルの色変更や編集は難しくなる場合があります。
現在のAdobe Image Traceドキュメントには、対応プリセットのグラデーション検出とSmooth設定があります。Adobeは、展開後にトレースの輪郭を調べ、グラデーションを調整するよう案内しています。プレビューと同じくらい出力の構造が重要だということです。
どのトレースでも、処理後に3点を確認します。
- グラデーションの領域を選択します。本来のグラデーション塗りを持つ1つの図形か、意図した少数の領域か、大量の色帯かを確認します。
- レイヤーまたはオブジェクトのパネルを開きます。数百の断片を探さずに、主要なシルエットを特定・編集できますか？
- ストップまたは領域の色を1つ変えます。納品したい作品に合った編集の挙動になっていますか？
ラスターロゴをきれいに変換する手順
1. 最適な元データを残す
元のPNG、JPG、レイヤー付き文書を保管します。トレース前に何度もサイズ変更や再保存をしないでください。元のAI、SVG、EPS、ベクターPDFがあるなら、フラット化した書き出しから再構成するより、それを使います。
2. ベクターに必要な役割を決める
変換前に用途を書き出します。
- レスポンシブなWeb用マークには、一貫して表示される小さなSVGが必要です。
- 印刷業者は、指定の色処理に対応した編集可能なAI、EPS、PDFを求めることがあります。
- カッターや彫刻機には、実用的な単色パスが必要です。見た目のグラデーションが刃や工具の経路になるわけではありません。
- ブランド用マスターでは、ロゴを再構成せずグラデーションを調整しやすくしておくべきです。
業者が形式や色設定を指定したら、その仕様に従います。「ベクター」というだけでは、納品の詳細は決まりません。
3. 明確な形状をトレースする
縁が明確で、無関係な質感ができるだけ少ないコピーを用意します。その後画像をベクター化し、シルエット、文字の内部の穴、角、色領域を調べます。グラデーションのロゴで最も役立つ結果は、色変化を文字どおり再構成したものではなく、外側のパスやほかのフラットな図形かもしれません。
PerfectVectorは編集可能な図形の出発点を提供できます。しかし、印刷先での特色の扱い、切断機の加工経路、複雑な写真の色変化をベクターにすべきかは決められません。これらは後工程の製作上の判断です。
4. 単純なグラデーションを本来の機能で作り直す
Illustrator、Inkscape、Figmaなどのベクターエディターで整えた図形を選択し、線形または放射状グラデーションを適用します。ラスターの参照画像に合わせて、方向、両端の色、重要な中間点を調整します。SVGの<linearGradient>要素は、塗りやストロークが参照できるストップとして色変化を保存します。
意図したデザインを再現できる最少のストップを使います。余分なストップはブランドの編集を難しくし、意味のある忠実度を増やさずに小さな色の誤差を隠す場合があります。分かれたロゴの部品全体に色変化を続けたいなら、共通のSVGグラデーション座標を設定し、各パスの変換を確認します。
5. 書き出したファイルをテストする
編集キャンバスだけで判断せず、最終SVGを開き直します。次を確認してください。
- 受け取り先のアプリでグラデーションが表示される
- シルエットが1つの画像オブジェクトではなく、パスとして選択できる
- 編集が必要な場合に、グラデーションが編集可能なままである
- 細い色帯の図形や不要な領域が追加されていない
- 業者や機器がグラデーションを使えない場合の単色版がある
- 想定する最小サイズでも作品が成立する
より広い検査には、ベクタートレース品質の評価表を使い、形状と色の忠実度を別々に確認します。
ポスタライズが目的の場合
すべてのグラデーションを滑らかな色変化として残す必要はありません。ポスター、ステッカー、スクリーンプリント風のイラストでは、階調を意図した配色に減らす方がよく見える場合があります。その場合は色数を意図的に決め、新しい表現として結果を扱います。
この方法は、元画像の形が強く、単純化した色帯が意図したものに見える場合に向きます。顔、空、金属の反射、水彩のぼかしを忠実に残す必要がある場合には向きません。写真をSVGへ変換する手順でも同じ判断が必要です。通常、階調の細部が増えるほどベクター領域と修正も増えます。
線形グラデーションレイヤーへの分解の研究は、複雑なラスターの外観を編集可能なグラデーションレイヤーで再構成することが、専門的なグラフィックスの問題であることを示しています。一般的な図形トレースに、光の表現をすべて少数の整ったオブジェクトへ復元することを期待すべきではありません。
よくある失敗
滑らかに見えるのに編集しにくい
縮小表示は、色帯に分かれたトレースを隠すことがあります。陰影の領域を選択し、見える色だけでなく意味のあるオブジェクトを数えます。小さな階調がすべて別のパスなら、整った輪郭を残し、色変化を作り直します。
読み込み後にグラデーションが消える
受け取り先が書き出されたグラデーションを異なる方法で扱うか、受け渡しで失われた塗りの定義をファイルが参照している可能性があります。実際に書き出したファイルを受け取り先のアプリでテストします。編集より互換性が重要なら、印刷用PDFやラスター見本をベクターマスターに添えるべきか確認します。
切断プレビューが陰影をたどる
カッターに必要なのは切断したい境界パスです。切断ファイルから装飾用のグラデーション領域を除去または非表示にし、正しいシルエットを結合し、切断前のSVGチェックと同じ確認を行います。
グラデーションのベクター化チェックリスト
- 元のラスターやレイヤー付きデータを残す
- 単純な色変化、整理された陰影、連続階調のどれかに分類する
- 用途に必要なのが外観、編集可能な色、物理的なパスのどれかを決める
- 階調の細部を追う前に主要な形状をトレースする
- 単純なグラデーションは少数の本来のストップで作り直す
- 展開や書き出しの後にオブジェクト、ノード、塗りを確認する
- 納品するファイルを受け取り先のアプリでテストする
- 工程に必要なら単色版やラスター版を残す
よくある質問
SVGはグラデーションがあってもベクターですか？ はい。SVGにはベクター形状の塗りやストロークに使える線形・放射状グラデーションが定義されています。本来のグラデーションと埋め込まれたラスター画像を区別する必要があるなら、オブジェクトの構造を調べます。
自動トレースでグラデーションを完全に保持できますか？ 見た目の近い近似ができる場合はありますが、ツールと元画像によって、本来のグラデーション、多数の色付き図形、両者の組み合わせになることがあります。プレビューだけでなく、展開後のオブジェクトと編集の手間で判断してください。
滑らかな陰影のある写真をベクター化すべきですか？ 写真を忠実に保つ必要があるなら、通常は避けます。連続階調には高解像度のラスターを使い、意図的な単純化や必要なシルエットのためだけにベクター化します。
グラデーションのロゴをベクター化する最適な方法は何ですか？ ロゴの整った形をトレースまたは描き直し、単純な色変化を本来のベクターグラデーションで再構成します。書き出しを開き直して塗りが編集可能か確認し、色変化が使えない工程向けに単色版を残します。
参考資料
- W3C — SVG 2のペイントサーバー — 線形・放射状グラデーション、カラーストップ、ベクターの塗りからの参照方法を定義しています。
- Adobe — Image Traceパネルのオプション — 現在のグラデーション検出、平滑化、パス設定、展開時の動作を説明しています。
- MDN —
<linearGradient>— 本来の線形グラデーションを定義するSVG要素の実用的なリファレンスです。 - George Mason University — 線形グラデーションレイヤーへの分解 — ラスターの外観を編集可能なグラデーションレイヤーで表すSIGGRAPH 2023の研究プロジェクトです。
色を作り直す前に整った形状が必要ですか？ 元画像を編集可能なベクターパスに変換し、シルエットと領域を確認してから、ベクターエディターでグラデーションを仕上げます。
