HEIC を SVG に変換 — 撮影した図をベクターに

トレースは異なる色の領域の境目を見つけ、その境目に沿って閉じた経路を描きます。鉛筆の線には両側に 1 つずつ、合わせて 2 つの境目があるので、出てくるのは線ではなく、線を囲む細長いループです。黒で塗りつぶせば画面上は正確に見え、表示や印刷が目的ならこれで十分な答えです。

ところが機械が経路をたどる瞬間、それは十分な答えではなくなります。ペンプロッターはストロークの片側を描いて反対側を戻ります。ビニールカッターはストロークを 1 つの形として切り抜きます。V ビットを使う CNC ルーターは描いた線ではなく輪郭をたどります。行き先が経路をたどる機械なら、必要なのはセンターライントレースやスケルトン化と呼ばれる、このページの背後にあるものとは別のアルゴリズムです。

アルゴリズムは平らな領域を探していますが、スマートフォンで撮ったホワイトボードには思ったより平らな領域が少ないものです。ボードは窓に近い場所で明るく隅で暗く、マーカーは天井の照明が当たる場所につやが出て、前回の消し残しがうっすらと真ん中に残り、椅子から撮ったので長方形は台形になっています。

そのすべてが形状になります。照明の勾配はわずかに違う白の帯になり、つやはストロークの真ん中の島になり、消し残しは絵に散らばる淡い形になります。これはトレーサーの失敗ではなく、写真に映っているものを忠実に再現しているだけです。トレースする前に写真を直す理由がここにあります。

斜めからではなく真正面から、電話を紙やボードと平行に構えてください。自分の体の影がフレームに入らない、光沢面が反射しない均一な光。図面だけでフレームを埋めてください。紙の上の図面なら、iOS のメモアプリの書類スキャナーが遠近を平らにしてくれます。ただの写真より良い出発点になります。

そして変換前にコントラストを上げてください。写真アプリでコントラストと黒レベルを上げ、明るさを少し下げると、紙は白へ、インクは黒へ寄っていき、放っておけば形状になっていた照明の変化を潰せます。この 2 分の作業のほうが、このページのどの設定よりトレース結果に効きます。

色数の設定はいちばん効く項目で、線画には最も低い 4 が答えです。図面には 2 色しかありません。それ以上に費やされるのは紙の照明や線の柔らかい縁の描写で、色が増えるたびに経路が増え、ファイルが大きくなり、後で片付けるべき小さな図形が増えます。

既定の 8 は平らなイラスト——数色のロゴやアイコン、印刷された図表——向けです。16 と 32 は本物の陰影を持つ絵のためのもので、スケッチにそれを選ぶと、あなたが描いた線への忠実さは増えないまま、ずっと大きな SVG になります。まず 4 を試し、必要なものが消えたときだけ上げてください。

精細さの設定は 2 つのことを制御します。直線や曲線を縁のピクセルの並びにどれだけゆるく当てはめるか、そしてどれだけ小さい形状なら捨てるかです。滑らか設定は 16 ピクセル未満を捨て、標準は 8 未満、鋭いは 2 未満を捨てます。

スマートフォンの写真ではこのしきい値が重要です。カメラの縁は決してきれいではなく、センサーノイズとアンチエイリアシングがすべてのストロークに沿って中間的な色のピクセルの縁取りを残し、それぞれが独自の小さな経路の点になり得るからです。滑らか設定は撮影した図面にたいてい合っていて、その縁取りを捨て、角をわずかに丸めます。鋭い設定はスクリーンショットやスキャンのようなすでにきれいな元データのためのもので、電話の写真に使うと、ノイズまで忠実にトレースしてしまいます。

トレース前のぼかしは点を抑える効果がありますが、どのトレースツールにもたいてい付いています。ここではゼロに固定されています。トレースする唯一の理由である鋭い縁そのものをぼかして和らげてしまい、丸みを帯びて少し溶けたような図面と引き換えに経路数を減らすのは、割に合わない取引だからです。

捨てるしきい値は同じ仕事を、そのコストなしに果たします。一定の大きさより小さい形状を取り除くだけで、それより大きいものすべてをぼかしはしません。トレースが点だらけなら、意図的にないぼかし設定を探すのではなく、精細さを滑らかへ寄せるか、元の写真をきれいにしてください。

入力が何であれ、トレースを始める前に、絵はいちばん長い辺が最大 1,600 ピクセルになるよう縮小されます。1200 万画素の iPhone 写真は 4,032 ピクセル幅なので、およそ 2.5 分の 1 に縮小されます。

これは重要な意味では何も失われません。出力は解像度に依存しません。1,600 ピクセルでトレースした経路と 4,032 ピクセルでトレースした経路は、どの大きさで表示しても同じように見え、変わるのは輪郭が元のピクセル格子にどれだけ密着するかだけです。得られるのは、数十秒ではなく数秒で終わる変換と、メガバイトではなくキロバイト単位の SVG です。トレースの負荷は境目の数で増え、大きな写真はほぼどこにでも境目があるからです。

トレースがうまくいったかどうかのいちばん確実な合図はプレビューではなく算数です。SVG が元のファイル以下か同程度なら、絵には本物の平らな領域があり、トレーサーはそれを見つけました。何倍にもなっているなら、トレーサーは絵と格闘して、テクスチャーを何千もの小さな経路に変えてしまっています。

どちらの数字も変換後に表示されるので、確認に手間はかかりません。知っておく価値のある実測例があります。文字を含むスクリーンショットは PNG の 40 倍のサイズの SVG になりました。アンチエイリアシングされたすべての文字が独自の経路の山になったからです。ホワイトボードの手書き文字も同じように振る舞います。これが見えたら、答えは別の設定ではなく別のアプローチです。

SVG は完成した絵ではなく出発点だと考えてください。Inkscape、Illustrator、Figma で開き、3 つのことを想定してください。トレースされた背景の四角形を削除すること、トレーサーが残した点を選んで消すこと、そして 1 本のストロークが複数に分かれてしまった経路を結合または単純化することです。

間取り図や技術図面には 4 つ目の作業があります。トレースの中には縮尺、直線性、直角の概念が何もありません。平行だったはずの線が平行ではなく、4 メートルだった壁は任意のユーザー単位の数値になります。寸法が重要なら、トレースは測る図面ではなく、上からなぞって描き直すための下敷きです。

すべてページの中で動きます。libheif が HEIC を復号し、キャンバスが縮小し、46 KB の純粋な JavaScript である imagetracerjs がトレースを行います。絵を運ぶ通信は一切なく、ネットワークタブで確認するか、先に端末をネットワークから切り離しても確認できます。

これは抽象的な利点ではありません。人々が写真に撮ってベクター化したいものは、打ち合わせのホワイトボード、製品のスケッチ、現場の図面、パターンです。つまり未公開の作業です。4 つの設定をどれもノートパソコンの外へ出さずに試せることが、この道具を使えるものにするか使えないものにするかの違いです。