1 画像を選ぶ
2 何が形なのかを伝える
トレースには1ピクセル1ビットが必要です。中か、外か。それを決める方法は2つあり、向いている画像が違います。白い紙に描いた図は明暗で分けられます。物を写した写真はそうはいきません。暗い灰色の石の上の暗い赤の像は、暗い上に暗いもので、明るさでは分けられないからです。そうした写真には被写体を選んでください。画像の縁から何が背景かを割り出し、背景でないものをすべて残します。
3 輪郭を確かめ、間違いを直す
赤い線がいまの輪郭で、その元になったピクセルの上に重ねて描かれています。この問いに答えが出せる場所はそこしかありません。輪郭が正しいか間違っているかは、そのピクセルとの関係だけで決まるからです。どちらかの画像をドラッグすれば両方が動き、ホイールを回せば拡大できます。あってはいけないものはクリックしてください。クリックひとつでその色のかたまり全体が選ばれるので、指しているのはピクセルではなく形です。もう一度クリックすれば戻ります。
形ごとに計算する 線がピクセルからどれだけ離れてよいか。1を下回ると何も起こりません。階段の一段は、本来属する線からまるまる1ピクセル外れているからです。2を超えると、本物の曲線まで削り始めます。
角の鋭さ 曲がり角が曲線に丸められずに角として残るために、輪郭がどれだけ曲がる必要があるか。低すぎると、あらゆる揺れが角になり、円は多角形になって戻ってきます。
キーボード：Tabでどちらかの画像に移動します。矢印キーで元画像の1ピクセル、Shiftと矢印キーで10ピクセル移動します。Homeで画像の中央に戻ります。EnterまたはSpaceで領域を切り替えます。背景を指定する設定が有効なら背景色を追加します。十字カーソルは両方の画像に表示され、座標は1から始まります。
画像
SVG
線をどれだけ滑らかにするか
ピクセルの階段がどう曲線になるかは、2つの数値で決まります。たいていの画像ではどちらも触る必要がなく、必要になったときのために、どちらも知っておく価値があります。
4 SVGを受け取る
# 画像をSVGに｜ロゴ・ステンシル・シルエットを曲線にトレース ひとつの形に、ひとつの輪郭。あってはいけないものを指さすだけです。 > 白黒の画像をブラウザの中で本物のSVGの輪郭にトレースします。ロゴ、ステンシル、署名、線画、シルエットが、どんな大きさにも伸ばせる曲線になります。トレースが拾いすぎたものはクリックひとつで外せます。アップロードはありません。 これはhttps://abox.tools/ja/image-to-svg/にあるブラウザー用の対話型ツールです。ファイルはそのブラウザーを実行する端末上で処理します。意図した共有や任意の通信機能はページ内で説明します。以下は文章による説明です。利用するにはアドレスを開いてください。 ## 画像は**ブラウザー内で処理**されます。処理のためのアップロードはありません。 画像はブラウザがディスクから読み出し、`src/mask.js`が1ピクセル1ビットに落とし、`src/contour.js`が形の縁をたどり、`src/fit.js`が曲線を当てはめます。誰でも読める600行ほどのコードで、裏にエンジンはなく、動かすために何かを取り寄せることもありません。このツールにはネットワーク機能が一切ありません。取りに行く先も、送る先もなく、仮に送ろうとしても、このページの向こう側に図を受け取るサーバーが存在しません。 - ✗ アップロードなし - ✗ 登録なし - ✗ 透かしなし - ✓ オフラインで動作 - ✓ ソース公開 ## 画像をアップロードせずにSVGにトレースする手順 1. **画像を選びます。** ロゴ、ステンシル、署名、判子、スキャンした図面、シルエット。はっきりした形が入っているものなら、何でもきれいにトレースできます。部屋の写真は向いておらず、その場合は最後に驚かされる代わりに、下の方に率直な注意が出ます。ファイルはディスクから直接読み出され、その間に何かがどこかへ送られることはありません。 2. **何が形なのかを伝えます。** 紙に描いた図は**明暗**で分けられ、その境目の値はこちらで計算します。物を写した写真はそうはいきません。暗い灰色の石の上の暗い赤の像は、暗い上に暗いもので、明るさでは分けられないからです。そうした写真には**被写体**を選んでください。画像の縁に沿った帯から何が背景かを学び、背景でないものをすべて残します。 3. **設定ではなく、赤い線を見ます。** 輪郭は、その元になったピクセルの上に重ねて描かれます。この問いに答えが出せる場所はそこしかないからです。輪郭が正しいか間違っているかは、そのピクセルとの関係だけで決まります。どちらかの画像をドラッグすれば両方が動き、ホイールを回せば、線が実際に何をしているか見えるところまで拡大できます。 4. **あってはいけないものをクリックで外します。** ゴミ、ホチキスの針、判子、キャプション、影。クリックひとつでその色のかたまり全体が選ばれるので、指しているのはピクセルではなく形です。もう一度クリックすれば戻ります。囲まれた背景をクリックすると、今度はそこが塗りつぶされます。穴であってはいけない穴は、こうして塞ぎます。 5. **必要なときだけ、滑らかさを調整します。** *細かさ*は、線を単純化するときにピクセルからどれだけ離れてよいかで、指定しない限り形ごとに計算されます。*角の鋭さ*は、曲がり角が丸められずに角として残るために、輪郭がどれだけ曲がる必要があるかを決めます。たいていの画像では、どちらも触る必要がありません。 6. **SVGを受け取ります。** ファイルはひとつ、`<path>`もひとつ、気にすべき塗りつぶし規則もありません。輪郭は一方向に、穴は逆方向に回っているので、40個の穴のある形もひとつの要素になります。Illustrator、Inkscape、Figma、ブラウザ、そしてカッティングマシンで開けます。 ## 詳しい解説 [画像をSVGにトレースする方法](https://abox.tools/ja/guides/trace-an-image-into-an-svg/): ロゴ、ステンシル、署名、シルエットを、ブラウザの中で本物のベクターの輪郭にします。きれいにトレースできる画像とそうでない画像、そしてトレーサーが間違えた部分の直し方。 ## 箱の中のほかのツール - [身長比較チャート](https://abox.tools/ja/compare-heights/): 身長を打ち込めば、絵が持ち帰れます。描くために何かを送ることはありません。 - [ビジネスプロフィールのプレビュー](https://abox.tools/ja/business-profile-preview/): 入力するとGoogleのカードの見本になります。描くための送信はありません。 - [画像圧縮ツール](https://abox.tools/ja/compress-image/): サイズを指定するだけ。あとは自動で探します。 - [画像リサイズツール](https://abox.tools/ja/resize-image/): サイズを指定し、枠を描き、形式を選ぶ。それだけです。 ## よくある質問 ### 画像はどこかにアップロードされますか？ いいえ。ファイルはお使いの端末上のブラウザが読み出し、このオリジンから配信される数百行のJavaScriptがトレースし、ダウンロードとして返します。このツールにはネットワーク機能が一切なく、何かを取りに行くことも送ることもありません。ページの`Content-Security-Policy`には接続してよいアドレスがすべて挙がっていますが、そのどれも当サイトのものではありません。 ### 写真をSVGにできますか？ 役に立つ形にはなりません。それはダウンロードしてから気づかせる代わりに、ページがその場で伝えます。トレースは似た色のかたまりを一つひとつ別の形にするので、写真は重なり合った何千ものしみになって戻ってきます。ファイルはJPEGの何倍にもなり、開くのは遅く、写真には見えません。きれいにトレースできるのは、*形*が入っている画像です。ロゴ、ステンシル、署名、線画、シルエット。物をひとつ写した写真なら、*被写体*の設定がそれを塗りつぶしのシルエットひとつとして切り抜きます。これは別の仕事で、本当に役に立ちます。 ### 形を見つける2つの方法は何が違うのですか？ 投げかける問いが違います。**明暗**は、各ピクセルがある値より暗いかを問います。紙の上のインクにはぴったりで、被写体と背景が同じくらい暗いときには役に立ちません。**被写体**は、何が背景かを問います。画像の縁に沿った帯からそれを学び、各ピクセルをそれと比べ、背景でない最大のものを残します。ほぼ一様な背景の前に物をひとつ置いた写真ではうまくいき、被写体が三辺からはみ出すほど詰めて切り抜かれた画像では失敗します。学ぶ元になる縁が、被写体そのものになってしまうからです。そのときは、代わりに背景を自分で指し示せます。 ### トレースした形に穴が開いたり、細い部分が消えたりするのはなぜですか？ 1ピクセル1ビットに落とした時点で、画像がそうなっていたからです。*トレーサーが受け取ったもの*を表示して確かめてください。12ピクセルほどを下回ると、文字の中の空きはすでに埋まり、縦棒はすでにくっついています。そこにない穴を、どんなトレースも取り戻せません。手当ては手前にあります。しきい値を動かすか、もっと大きなスキャンから始めてください。*被写体*モードでは、*隙間を塞ぐ幅*が小さな穴を閉じ、*中を塗りつぶす*が、背景が画像の縁から届かない穴をすべて閉じます。 ### 間違えた部分は直せますか？ はい。3番目のステップは、ほぼそのためにあります。図に入るべきでないものをクリックすれば消え、もう一度クリックすれば戻ります。クリックひとつでその色のかたまり全体が選ばれるので、1回でゴミひとつや判子ひとつがまるごと外れ、ピクセルひとつではありません。囲まれた背景をクリックすると塗りつぶされます。修正はしきい値とは別に保持されるので、あとでスライダーを動かしても捨てられません。 ### SVGはどれくらいの大きさになりますか？ 形であれば、画像より小さくなります。トレースしたシルエットはたいてい1〜5キロバイトで、ロゴならもう少し増えます。正確な値はダウンロードの隣にページが表示します。写真なら巨大になり、それがこのツールがそのファイルに向いていないという最もはっきりした印です。独立した形が1000個ほどを超えると、ページは描くのをやめてそう伝えます。 ### 色付きでトレースできますか？ いいえ。これは1色の形をひとつ作るもので、それが粗悪なコピーではなく図として仕上がる場合です。色付きのトレースとは、数色に減色して一色ずつ別のレイヤーとしてトレースすることで、その結果は、求める人のほとんどをがっかりさせます。色が必要なら、ここで形をトレースし、お使いのドローソフトで塗ってください。 ### できたSVGで何ができますか？ ぼやけることなくどんな大きさにも伸ばす、属性ひとつで色を変える、アニメーションさせる、印刷する、カッティングマシンやレーザーに送る。間違えようのある塗りつぶし規則を持たない`<path>`ひとつなので、Illustrator、Inkscape、Figma、ブラウザ、そしてほとんどのCNCソフトが同じように読みます。 ### 画像の大きさに上限はありますか？ お使いの端末の上限であって、こちらの上限ではありません。300dpiでスキャンしたA4一枚、およそ900万ピクセルは一瞬でトレースできます。もっと大きな画像でも動きます。時間がかかるだけで、その作業はどこかの待ち行列ではなく、手元のプロセッサで行われます。 ### 無料ですか？アカウントは必要ですか？ 無料で、アカウントもログインも試用期間も透かしもありません。ファイルの数や大きさの上限もありません。費用を負担するサーバーが存在せず、作業は手元の端末で行われるからです。サイトには広告が載っていて、それが費用をまかなっています。広告には、ファイルに関する情報は何も渡されません。 ### オフラインで動きますか？ はい。ページを一度読み込んだら回線を切ってください。そのまま動き続けます。何もアップロードされていないことを示す、いちばん簡単な方法でもあります。画像をどこかへ送ってトレースさせるツールなら、線を抜いた瞬間に止まるはずです。 ## この主張を確かめる方法 - **処理はこのブラウザー内で行います。** 入力と結果はブラウザー内で処理し、処理コードはそれらを処理用にアップロードしません。Content-Security-Policyは資源と接続先を制限しますが、許可済みの相手はリクエストを受け取れます。内容は検査せず、何も送られないことを単独で証明しません。具体的な操作の要求とソースを比較するか、切断中にローカル操作を完了してください。 - **何かを取りに行くコードがありません。** `src/`のどこにも`fetch`も`XMLHttpRequest`も`sendBeacon`もありません。ツールの全体は、1枚の画像のピクセルに対する計算です。しきい値がひとつ、見つけた形の縁を一周、そして少しの曲線当てはめ。それだけです。 - **取り寄せるエンジンがありません。** トレースはふつう他人のプログラムの仕事で、ウェブ上では最初のクリックより先に数メガバイトのコンパイル済みコードが届くことを意味します。ここにはそれがありません。全体はこのオリジンから配信される数百行の素朴なJavaScriptで、ページが待ち時間の後ではなく開いた瞬間に動く理由でもあります。 - **Googleが読み込むものと、渡されないもの。** 広告と計測のスクリプトはGoogleから、寄付ボタンはBuy Me a Coffeeから来ています。そのどれにも、画像に関する情報は渡されません。画像を読み、しきい値で分け、トレースするコードはすべてこのオリジンから配信され、リポジトリに載っています。 - **オフラインで動きます。** 通信を切ってもこのツールは何も変わりません。もともと通信する段階が存在しないからです。これがいちばん単純な証明です。 **自分で確かめてください。**以上のどれも、鵜呑みにする必要はありません。このページは、リポジトリにあるテンプレートと設定から、誰でも読んで実行できるビルドスクリプトが生成しています。その結果は`dist`ブランチに置いてあるので、配信されているものと、ソースをビルドした結果とを差分で比べられます。 https://github.com/A-Box-of-Tools/website まず読むとよいのは、Content-Security-Policyについては`config/site.toml`、画像が1ピクセル1ビットになる過程は`src/mask.js`、形の縁をたどる一周は`src/contour.js`、階段が曲線になる過程は`src/fit.js`、明暗で分けられないときに背景をどう割り出すかは`src/subject.js`です。
画像をアップロードせずにSVGにトレースする手順
- 画像を選びます。ロゴ、ステンシル、署名、判子、スキャンした図面、シルエット。はっきりした形が入っているものなら、何でもきれいにトレースできます。部屋の写真は向いておらず、その場合は最後に驚かされる代わりに、下の方に率直な注意が出ます。ファイルはディスクから直接読み出され、その間に何かがどこかへ送られることはありません。
- 何が形なのかを伝えます。紙に描いた図は明暗で分けられ、その境目の値はこちらで計算します。物を写した写真はそうはいきません。暗い灰色の石の上の暗い赤の像は、暗い上に暗いもので、明るさでは分けられないからです。そうした写真には被写体を選んでください。画像の縁に沿った帯から何が背景かを学び、背景でないものをすべて残します。
- 設定ではなく、赤い線を見ます。輪郭は、その元になったピクセルの上に重ねて描かれます。この問いに答えが出せる場所はそこしかないからです。輪郭が正しいか間違っているかは、そのピクセルとの関係だけで決まります。どちらかの画像をドラッグすれば両方が動き、ホイールを回せば、線が実際に何をしているか見えるところまで拡大できます。
- あってはいけないものをクリックで外します。ゴミ、ホチキスの針、判子、キャプション、影。クリックひとつでその色のかたまり全体が選ばれるので、指しているのはピクセルではなく形です。もう一度クリックすれば戻ります。囲まれた背景をクリックすると、今度はそこが塗りつぶされます。穴であってはいけない穴は、こうして塞ぎます。
- 必要なときだけ、滑らかさを調整します。細かさは、線を単純化するときにピクセルからどれだけ離れてよいかで、指定しない限り形ごとに計算されます。角の鋭さは、曲がり角が丸められずに角として残るために、輪郭がどれだけ曲がる必要があるかを決めます。たいていの画像では、どちらも触る必要がありません。
- SVGを受け取ります。ファイルはひとつ、
<path>もひとつ、気にすべき塗りつぶし規則もありません。輪郭は一方向に、穴は逆方向に回っているので、40個の穴のある形もひとつの要素になります。Illustrator、Inkscape、Figma、ブラウザ、そしてカッティングマシンで開けます。
詳しい解説
画像をSVGにトレースする方法 ロゴ、ステンシル、署名、シルエットを、ブラウザの中で本物のベクターの輪郭にします。きれいにトレースできる画像とそうでない画像、そしてトレーサーが間違えた部分の直し方。
箱の中のほかのツール
よくある質問
画像はどこかにアップロードされますか？
いいえ。ファイルはお使いの端末上のブラウザが読み出し、このオリジンから配信される数百行のJavaScriptがトレースし、ダウンロードとして返します。このツールにはネットワーク機能が一切なく、何かを取りに行くことも送ることもありません。ページのContent-Security-Policyには接続してよいアドレスがすべて挙がっていますが、そのどれも当サイトのものではありません。
写真をSVGにできますか？
役に立つ形にはなりません。それはダウンロードしてから気づかせる代わりに、ページがその場で伝えます。トレースは似た色のかたまりを一つひとつ別の形にするので、写真は重なり合った何千ものしみになって戻ってきます。ファイルはJPEGの何倍にもなり、開くのは遅く、写真には見えません。きれいにトレースできるのは、形が入っている画像です。ロゴ、ステンシル、署名、線画、シルエット。物をひとつ写した写真なら、被写体の設定がそれを塗りつぶしのシルエットひとつとして切り抜きます。これは別の仕事で、本当に役に立ちます。
形を見つける2つの方法は何が違うのですか？
投げかける問いが違います。明暗は、各ピクセルがある値より暗いかを問います。紙の上のインクにはぴったりで、被写体と背景が同じくらい暗いときには役に立ちません。被写体は、何が背景かを問います。画像の縁に沿った帯からそれを学び、各ピクセルをそれと比べ、背景でない最大のものを残します。ほぼ一様な背景の前に物をひとつ置いた写真ではうまくいき、被写体が三辺からはみ出すほど詰めて切り抜かれた画像では失敗します。学ぶ元になる縁が、被写体そのものになってしまうからです。そのときは、代わりに背景を自分で指し示せます。
トレースした形に穴が開いたり、細い部分が消えたりするのはなぜですか？
1ピクセル1ビットに落とした時点で、画像がそうなっていたからです。トレーサーが受け取ったものを表示して確かめてください。12ピクセルほどを下回ると、文字の中の空きはすでに埋まり、縦棒はすでにくっついています。そこにない穴を、どんなトレースも取り戻せません。手当ては手前にあります。しきい値を動かすか、もっと大きなスキャンから始めてください。被写体モードでは、隙間を塞ぐ幅が小さな穴を閉じ、中を塗りつぶすが、背景が画像の縁から届かない穴をすべて閉じます。
間違えた部分は直せますか？
はい。3番目のステップは、ほぼそのためにあります。図に入るべきでないものをクリックすれば消え、もう一度クリックすれば戻ります。クリックひとつでその色のかたまり全体が選ばれるので、1回でゴミひとつや判子ひとつがまるごと外れ、ピクセルひとつではありません。囲まれた背景をクリックすると塗りつぶされます。修正はしきい値とは別に保持されるので、あとでスライダーを動かしても捨てられません。
SVGはどれくらいの大きさになりますか？
形であれば、画像より小さくなります。トレースしたシルエットはたいてい1〜5キロバイトで、ロゴならもう少し増えます。正確な値はダウンロードの隣にページが表示します。写真なら巨大になり、それがこのツールがそのファイルに向いていないという最もはっきりした印です。独立した形が1000個ほどを超えると、ページは描くのをやめてそう伝えます。
色付きでトレースできますか？
いいえ。これは1色の形をひとつ作るもので、それが粗悪なコピーではなく図として仕上がる場合です。色付きのトレースとは、数色に減色して一色ずつ別のレイヤーとしてトレースすることで、その結果は、求める人のほとんどをがっかりさせます。色が必要なら、ここで形をトレースし、お使いのドローソフトで塗ってください。
できたSVGで何ができますか？
ぼやけることなくどんな大きさにも伸ばす、属性ひとつで色を変える、アニメーションさせる、印刷する、カッティングマシンやレーザーに送る。間違えようのある塗りつぶし規則を持たない<path>ひとつなので、Illustrator、Inkscape、Figma、ブラウザ、そしてほとんどのCNCソフトが同じように読みます。
画像の大きさに上限はありますか？
お使いの端末の上限であって、こちらの上限ではありません。300dpiでスキャンしたA4一枚、およそ900万ピクセルは一瞬でトレースできます。もっと大きな画像でも動きます。時間がかかるだけで、その作業はどこかの待ち行列ではなく、手元のプロセッサで行われます。
無料ですか？アカウントは必要ですか？
無料で、アカウントもログインも試用期間も透かしもありません。ファイルの数や大きさの上限もありません。費用を負担するサーバーが存在せず、作業は手元の端末で行われるからです。サイトには広告が載っていて、それが費用をまかなっています。広告には、ファイルに関する情報は何も渡されません。
オフラインで動きますか？
はい。ページを一度読み込んだら回線を切ってください。そのまま動き続けます。何もアップロードされていないことを示す、いちばん簡単な方法でもあります。画像をどこかへ送ってトレースさせるツールなら、線を抜いた瞬間に止まるはずです。