写真をSVGに変換するには？向く写真と向かない写真の見分け方

はい。ラスター入力に対応するトレースツールを使えば、写真をSVGに変換できます。ただし、ここでいう「変換」の意味に注意が必要です。連続階調の写真は編集可能なベクタートレースには難しい入力で、細部を多く残すほど、一般に図形とパスが増えます。

顔、風景、柔らかなグラデーションなど、細部の多い写真が、鮮明で写真らしいSVGになるわけではありません。平坦に色分けされたポスター風の画像か、何千もの図形が絡み合う肥大化したファイルになります。一方、フラットで単純、かつコントラストの高い被写体なら、きれいに変換できる場合があります。本当の問いは「できるか」ではなく「使える結果になるか」であり、それは写真によって決まります。ほかは単純な作品で、制御された色の変化だけが難しい場合は、グラデーションのベクター化判断ガイドを使ってください。

要点

• 変換できるか： はい。多くのトレースツールは写真を受け付けます。同じ見た目になるか： 単純で編集可能なパスの集まりとしては、なりません。
• 細部の多い写真は、写真そのもののベクターではなく、単色に分かれたポスター風アートになります。様式化したポスターとして魅力的でも、原本とは違います。
• 変換に向くもの： フラットでコントラストが高く、色数の少ない被写体。ロゴ、アイコン、シルエット、線画などです。
• 変換に向かないもの： ポートレート、風景、グラデーション、細かな描写や色が多いもの。
• 写真自体を、実物に忠実に大きく使いたい場合は、ベクター化は不適切です。高解像度ラスターのまま残してください。

「写真をSVGに変換する」と実際に何が起こるか

SVG 2仕様では、ベクター図形、グラデーション、テキスト、埋め込みラスター画像も保存できます。ここで扱う自動トレースは、単にピクセルを埋め込むのではなく、編集可能なベクター領域で写真を近似することを目指します。写真には局所的な色や階調の変化が多く、1つの明確な境界図にできません。ベクターが初めてなら、詳しい解説はこちらです。

写真からSVGへの変換は、そのすべてを図形で描き直すことで、この処理をトレースと呼びます。しかし、写真にはトレースしやすい明確な要素がありません。平坦な色領域や鋭い輪郭ではなく、徐々に変わる階調です。そこでツールは、数百万の色合いを少数の単色の塊にまとめるか、小さな変化ごとに別の微小図形を描くかを選びます。前者はポスター、後者は複雑なファイルになります。どちらも写真そのものにはなりません。

実際に得られるもの

一般的なカラートレースに写真を通すと、残す細部の量によって、通常は次の2つの間の結果になります。

• 単色領域に分かれたポスター風の画像。 滑らかなグラデーションが、シルクスクリーンやポップアートのポスターのような少数の単色領域になります。魅力的に見えることもありますが、写真のコピーではなく再解釈です。
• 肥大化した複雑なファイル。 写実性を求めて細部を増やすと、何千もの小さな図形が生成されます。ファイルが大きくなっても写真らしくはならず、編集やカットも困難です。

これは、連続階調を編集可能なベクター領域で近似する際に想定される関係です。Adobeの画像トレース設定に色数、パスの適合、コーナー、ノイズの調整があるのは、再現性を変えると、生成する形状の量と複雑さも変わるためです。

変換に向く写真と向かない写真

境界はシンプルです。ベクターは、きれいな輪郭を持つ平坦な色領域でできています。写真がすでにそのように見えるなら、変換に向きます。滑らかな階調の変化が多いなら、向きません。

上のグループに入るなら、単純なトレースに向く候補です。下のグループなら、意図的に作風を変えたいか判断してください。そうでなければ、ラスターのまま残すか、イラストレーターに描き直してもらいます。

写真が変換しにくい理由

写真の3つの性質が、きれいなトレースを難しくします。

• 連続階調。 写真はピクセルごとに色合いが混ざるため、たどる明確な境界がありません。ツールは存在しなかった輪郭を作る必要があり、望む位置に置かれるとは限りません。
• JPEGの圧縮ノイズ。 AdobeはJPEGを画像データを捨てる非可逆形式と説明しています。圧縮ノイズは、トレース時に輪郭の余分な変化を作ります。同じJPEGをPNGで保存し直すだけでは、失われた情報は戻りません。できれば、よりきれいな原本を使ってください。
• 色が多すぎる。 1枚の写真は何千もの異なる色を持ちます。それを少数の平坦な色見本に押し込めるため、ポスター風の見た目になります。

実際に使える結果を得る方法

それでも写真からベクターを作りたい場合は、次の方法があります。

1. 意図的に作風を変えます。 ポスター風の見た目を受け入れ、積極的に使います。色を意図的に減らし、きれいなシルクスクリーンやポスター効果を狙います。写真のベクター化が特に役立つ場面で、多くのポスターやグッズ作品はこうして作られます。
2. フラットな部分だけを取り出します。 写真の中にロゴ、図形、明確なシルエットがあれば、その要素だけに切り抜くかマスクし、そこだけを変換します。店先のロゴも、周囲の場面から分離すればトレースに向きます。
3. より適した作品から始めます。 フラットなイラストがある、または被写体を単純な図形として作り直せるなら、写真の代わりにそれを変換します。写真ではなくAI生成アートが原本なら、印刷用AIアートのベクター化に専用の手順があります。

そして4つ目の選択肢は、写真そのものを大きく鮮明に使う必要があるなら、ベクター化しないことです。写真の細部には高解像度PNGやJPGが適しています。ベクターは写真を魔法のように高解像度化するものではありません。

iPhoneの原本なら、トレースを判断する前にHEIC写真をベクター化に向けて準備してください。

PerfectVectorでの例

PerfectVectorは、ロゴ、アイコン、ステッカー、線画、単純なグラフィックなど、フラットなイラスト作品向けに作られています。そうした作品では、ノードが少なく、色を編集できるきれいなSVGを生成します。画像をベクターに変換し、自分で結果を確認できます。クレジットカードなしで、最初の画像を無料変換できます。

細部の多い写真では、ほかの誠実なベクター化ツールと同じく、写真の複製ではなく、平坦な色領域を持つきれいな様式化した画像になります。ポスター作品には適していますが、写真そのものが必要な場合には不適切です。得られない結果を求めて苦労するより、この点を明確に伝えたいと考えています。

同じツールでも、入力は大きく違う

変換せず写真を残すべき場合

• 写真そのものを、忠実に大きく使いたい場合。 高解像度ラスターを書き出してください。ベクター化すると、平坦化されるか肥大化するだけです。
• Cricutやビニールカッターで切る場合。 機械はパスをたどり、明確な図形を必要とするため、本物の写真はカットできません。フラットなデザインか単色シルエットを使い、きれいなCricutカットファイルを作る方法をご覧ください。
• 写真がロゴの唯一のコピーの場合。 場面全体をトレースせず、ロゴを分離してそこだけをベクター化してください。

よくある質問

写真をSVGに無料で変換できますか？ はい。写真を受け付け、無料でSVGを出すツールもあります。ここでもクレジットカードなしで最初の変換をプレビューできます。ただし、価格によって再現性と複雑さの関係は変わりません。細部の多い写真は通常、単純で写真らしいベクターではなく、様式化した近似か複雑なベクターになります。

SVGにした写真がポスター風や不自然になるのはなぜですか？ ベクター化が画像を平坦な色領域で描き直すためです。写真の滑らかなグラデーションは少数の単色の塊になります。ポスター風になるのは想定される結果です。好みなら活用し、そうでなければ、その写真はベクター化に向いていません。

Cricut用に写真をSVGにできますか？ シルエットやロゴのように、被写体がフラットで単純な場合に限ります。カッターはパスをたどり、明確な図形を必要とするため、本物の写真は切れません。代わりにフラットなデザインを変換するか、先に写真から単色の図形を分離してください。

どのような写真がSVGに最も適していますか？ ロゴ、アイコン、線画、単純なシルエットなど、少数の明確な色を持つ、フラットでコントラストの高い画像です。写真がすでにフラットなベクター作品に近いほど、変換は良くなります。顔、風景、グラデーションの多い写真は特に向きません。

写真をSVGにすると元の色は保たれますか？ 滑らかな混ざり方ではなく、近似した平坦な色領域を保ちます。「カラー対応」の変換ツールは写真の色を採取して、トレースした図形を塗るため、写真らしい結果ではなくポスター風になります。

結果は本当に編集可能なベクターですか？ ツールが実際に画像をトレースした場合に限ります。SVGはラスター画像の埋め込みを認めるため、.svgの拡張子だけでは証拠になりません。ベクターエディターで確認してください。トレースした内容はパスや図形として選択できますが、埋め込み写真は画像オブジェクトのままで、ピクセル解像度も固定です。

出典

1. W3C：SVG 2：SVGのベクター、グラデーション、テキスト、ラスター画像の機能です。
2. Adobe Illustrator：画像トレースパネルのオプション：トレースの複雑さを左右する色、パス、コーナー、ノイズの設定です。
3. Adobe Photoshop：対応画像形式：JPEGの非可逆圧縮とPNGの可逆動作を説明します。
4. Inkscape：トレースチュートリアル：ビットマップトレースと、複数スキャンのカラー結果の公式説明です。
5. W3C：SVGの埋め込みコンテンツ：SVG内の埋め込みラスター画像です。

---

写真がフラットで単純なら、きれいで編集可能なSVGにでき、そうでなければ様式化したポスター作品になります。前者の作品なら、ベクターに変換し、パスを確認してください。細部の多い写真なら、変換ツールと格闘する代わりに、別のツールを選ぶ理由が分かったはずです。