PerfectVector
著者: Claire Yoon2 分で読める

HEIC写真をSVGへ:トレースが適するか判断する

対応するHEICはSVGにトレースできますが、大半の写真はラスターのままが適しています。変換の判断、画像の準備、パスの確認を解説します。

目次

対応する静止画のHEIC写真は、画像をデコードし、見える領域をベクターパスへトレースすることでSVGに変換できます。ただし、すべてのiPhone写真にSVGが適しているわけではありません。写真の価値が光、肌、髪、反射、質感、奥行きにあるなら、ラスター画像として残してください。トレースはそうした細部を図形へ簡略化します。

紙のロゴ、手書きの署名、スケッチ、ラベル、看板、フラットな絵、意図的にポスター風のイラストにしたい被写体など、もともと図形的なものを撮影した場合にベクター化します。最良の作業手順は、変換ツールではなく、その判断から始まります。

判断の要点
  • 人物、旅行、商品、料理、室内など、階調が連続する写真はHEICのまま残します。
  • 被写体に拡大縮小や編集が可能な図形が必要なら、SVGに変換します。
  • 写真全体を意図的にトレースする場合は、作風の変化を想定します。
  • ベクター結果が役立つ場合も、元画像を保存します。
  • 制作に使える素材と判断する前に、プレビューを確認します。

HEICとSVGは異なる問題を解決する

HEICは、エンコードしたラスター画像に使うHEIF系の画像ファイル形式です。Appleはこの型をUTType.heicとして説明しています。SVGは形状を記述します。パス、塗り、ストロークなどのオブジェクトは、色や形を変更し、さまざまなサイズで描画できます。

両者の変換はファイルの展開とは違います。トレース処理は、どのピクセル領域を図形にするか判断する必要があります。きれいな2色の看板なら、少数の分かりやすい領域になります。夕焼けには何千もの微妙な変化があります。その夕焼けをパスにすると、複雑なファイルを作るか、写真らしさを生む多くの要素を失うことになります。

拡張子ではなく、必要な出力から判断します。

HEICに写っているもの通常の選択理由
正面から撮影したロゴ、アイコン、文字、ラベルSVGもともと図形を基にした被写体です
無地の紙のインク画や署名整えた後にSVGパスなら線を拡大縮小し、編集できます
無地の背景から分離した単純な物体用途に応じてSVGまたはラスターシルエットや作風を変えた表現が役立つ場合があります
簡略化した壁飾りにしたいペットや人物意図的に作風を変えたSVGトレースは写真の保存ではなく解釈です
人物、イベント、旅行、料理、室内の写真HEICを残すか別のラスター形式へ書き出す質感、光、奥行きが内容そのものです
店舗の商品掲載用写真ラスターを残す購入者には再構築した図形より写真の細部が必要です

実用上の境界は元画像で分かります。毛、布、反射、奥行きは写真の連続した変化に依存します。一方、正面から見た看板やラベルは、すでに少数の意図的な図形で構成されています。

カメラの元画像から、ラスターのまま残す細部の多い犬の肖像と、編集可能なベクターパスにするフラットな幾何学の看板へ分岐する判断の概念図
概念図:質感の豊かな被写体は写真として残し、編集可能な図形が必要なフラットな被写体はベクター化します。

作風を変えた肖像が目的なら、写真からSVGへのガイドが一般的なトレードオフを説明します。動物の肖像を意図的に簡略化する場合は、ペット肖像の手順で色のレイヤーと元画像の選び方を詳しく説明しています。

スマートフォンの写真をトレース用に整える

被写体がSVGに適する場合は、トレース処理に渡す情報を改善します。元のHEICは変更せず、コピーを編集します。

  1. 実際の被写体に合わせて切り抜きます。 テーブルの縁、室内の雑物、手、不要な背景を除きます。見える領域はどれも図形の候補になります。
  2. 遠近の歪みを補正します。 斜めから撮った長方形のロゴは台形になります。スマートフォンの切り抜きや遠近補正で、平行な辺が再び平行に見えるようにします。
  3. 均一な光を使います。 強い影や反射は余分な色や輪郭になります。可能なら、窓際や拡散した光の下でフラットな図柄を撮り直します。
  4. 派手にせず、違いを明確にします。 暗いインクと紙、被写体と背景を区別しやすくします。輪郭強調のハロー、強いコントラスト、人工的な質感を追加するフィルターは避けます。
  5. 透明な出力が必要な場合だけ背景を除きます。 きれいな紙の面は除きやすくても、物体の周囲の影は不規則な縁を作る場合があります。透明SVGの手順で、対比する色の上に結果を置いて確認します。
  6. 弱い元画像を寸法だけのために拡大しないでください。 拡大処理はピクセルを滑らかにしたり補ったりできますが、元の輪郭形状は復元できません。正確さが必要なら撮り直すか描き直します。

Safariが結果を保存する場所も含め、スマートフォンでのアップロードからダウンロードまでの流れは、iPhoneの画像からSVGへの手順を参照してください。この記事ではHEIC形式と出力の判断に焦点を当てます。

対応する静止画HEICをSVGに変換する

PerfectVectorは、範囲を限定した静止画のサブセットで.heic、.heif、.hifのファイル名を受け付けます。ブラウザーがコンテナーのファイル種別と主要画像の寸法を調べ、認識したシーケンスブランドを拒否し、対応する静止画をローカルでデコードします。標準のベクター化処理を始める前に、ピクセルをPNGに正規化します。

この対応はHEIF系全体のすべての機能を対象にしません。複数画像、シーケンス、別のコーデック、HDRや広色域の動作、高ビット深度、反転、その他の派生形は現在の保証範囲外です。非対応ファイルの名前を.heicに変えても内部構造は変わりません。

対応する静止画では、次の手順を使います。

  1. HEICからSVGへの変換ツールを開きます。
  2. 元の、または準備したHEIC、HEIF、HIFファイルを選びます。
  3. ブラウザーが対応する静止画を検査、デコードするのを待ちます。
  4. 通常サイズと深い拡大でベクタープレビューを確認します。
  5. SVGを選んだ用途に図形が適する場合だけダウンロードします。

PerfectVectorは、後者の分岐に適しています。対応する静止画HEICをローカルで検査、デコードし、別のJPGコピーを作らずにトレースできます。互換性のための遠回りを省けますが、細部の多い写真がフラットな絵のようになるわけではありません。解釈した結果が役立つかはプレビューで判断します。

Live PhotosやHEICシーケンスの場合

AppleのLive Photo撮影の資料では、Live Photoを静止画と短い動画の組み合わせとして説明しています。その動きやタイミングが自動でSVGアニメーションとして再構築されることはありません。PerfectVectorのHEIC処理は限定した静止画向けで、認識したHEICシーケンスブランドを拒否します。動きが重要なら、元のLive Photo素材を残すか、適切な写真の手順で動画を書き出してください。

1つの瞬間をベクターアートにしたい場合は、まず必要なフレームや静止画を選びます。その後は他の写真と同様に、図形にすることが被写体に役立つ場合だけベクター化します。

SVGを写真ではなくデザインとして確認する

問うべきは「すべてのピクセルが一致するか」ではありません。有用なトレースはすべてのピクセルを残しません。意図した見た目の構造が残っているかを確認します。

シルエットと比率

画面に収まるサイズで、被写体が正しく読み取れる必要があります。顔、文字、物体に、こぶ、潰れた隙間、比率の変化が生じていないか確認します。

抜き部分

文字の穴、ストロークの隙間、被写体の部分間の空間を調べます。撮影時の影が、元画像で開いて見えた空間を閉じる場合があります。

色の領域

大きく意味のある色を数えます。単純な看板が、不均一な照明のためにほぼ同じ色の図形が何十個もある状態にならないようにします。肖像は必ず簡略化されるため、選ばれた領域が意図した作風を支えるかで判断します。

質感とその被写体らしさ

髪、毛、布、肌、反射、葉は、塊や滑らかな面になることがよくあります。その質感を除くことで被写体らしさや画像の目的が変わるなら、HEICを主となる出力として残すべきです。

ノードと編集

ベクターエディターでいくつかのパスを選びます。曲線が、雑音の多いアンカーの連鎖ではなく、まとまりのある図形として動く必要があります。遠くでは正しく見えるのに編集しづらい場合は、ノードが多すぎる場合の診断を使います。

HEICが非対応の場合

フラットな絵、文字、線画なら、コピーをPNGで書き出します。PNGは硬い輪郭の周りに非可逆JPEGの乱れを加えず、デザインツールの大半に広く対応するラスター元画像を渡せます。本当に写真であり、フラットな輪郭の完全な保存よりファイルサイズや互換性が重要なら、JPGで書き出します。

この書き出しは互換性のための段階です。PNGもJPGもラスターであり、多くのツールで開けるだけで拡大に強くなるわけではありません。後でより良い書き出しを作れるよう、元のHEICを残してください。

よくある質問

先にJPGを作らず、HEICから直接SVGに変換できますか? 変換ツールがその静止画の派生形に対応していれば可能です。PerfectVectorは対応するHEICのサブセットをローカルで検査、デコードするため、トレース前に別のJPGコピーは必要ありません。

SVGはHEIC写真とまったく同じ見た目になりますか? 通常はなりません。ベクター化は見える領域を図形として解釈するため、質感、照明、髪、反射、グラデーション、細部は簡略化されたり作風が変わったりする場合があります。写真としての忠実さが重要ならHEICを残します。

SVGの元画像に適するHEICは? ロゴ、看板、ラベル、署名、絵など、フラットで明確なコントラストを持つ被写体を、まっすぐ均一な光で撮影したものです。混み入った場面や奥行きの強い写真は、ポスター化した見た目を意図する場合以外は適しにくいです。

Live PhotoをアニメーションSVGにできますか? この手順ではできません。PerfectVectorは限定した静止画のサブセットを扱い、認識したHEICシーケンスブランドを拒否します。Live Photoの動きやタイミングをSVGアニメーションとして再構築しません。

HEICに加え、HEIFやHIFもアップロードできますか? できます。それらのファイル名の別表記にも同じ互換性確認を行います。内部のファイルは対応する静止画ブランドと構造である必要があり、非対応のHEIF派生形の名前を変えても対応可能にはなりません。

参考資料

  1. Apple Developer — 画像、カメラ、写真 — Appleの画像撮影と処理技術の概要を示します。
  2. Apple Developer — UTType.heic — AppleのHEIC画像ファイル型を示します。
  3. Apple Developer — HEIC画像プロパティ — シーケンスを含むHEIC固有のImage I/Oプロパティを説明します。
  4. Apple Developer — Live Photosの撮影と保存 — Live Photoで対になる静止画と動画のリソースを説明します。
  5. PerfectVector — HEICからSVGへの変換ツール — 現在の製品の手順と、対応する元画像の範囲を示します。

被写体がフラットな絵で編集可能な形状が必要なら、PerfectVectorで対応するHEICを変換し、ダウンロード前にシルエット、抜き部分、色、ノードを確認します。質感、光、奥行き、写真としての忠実さが目的なら、HEICを残してください。

ブログのその他の記事

画像ファイルを
編集可能なSVGに変換