ヘルプ

画像SVG変換：PNG・JPG・WebPをベクターにトレース

このツールは、PNG・JPG・WebPをトレースして、どんなサイズにも拡大できる塗りつぶしのベクターパスにする画像SVG変換ツールです。ロゴ、アイコン、線画、サイン、シルエットに向いており、Cricutなどのカッティングマシン用データも作れます。トレースはお使いのブラウザ内で行われ、画像はアップロードされません。

画像をSVGに変換する手順

  1. 画像を選択、またはここにドロップから、5 MBまでのPNG、JPG、WebP、HEICのファイルを選んでください。
  2. トレースが終わるまで少し待ち、プレビューの上にあるSVGトレースと元画像の切り替えで見比べてください。
  3. 形が粗すぎる、ごちゃごちゃしている、細部が足りないときは、プレビューの下にあるトレース設定を変更してください。コントロールを動かすたびにプレビューが更新されます。
  4. SVGをダウンロードを押してください。ファイルは元のファイル名に.svgを付けて保存され、ボタンは再ダウンロードに変わります。

プレビューは市松模様の上に表示されるので、透明な背景も確認できます。市松模様はファイルには含まれません。プレビューの下の表示（例：5パス・4.2 kB）は、トレースで作られたパスの数と、SVGのファイルサイズの目安です。設定を変えてもう一度トレースしている間は、「SVGをダウンロード」が一時的に押せなくなります。

モノクロとカラー：トレースモードの選び方

トレースモードはモノクロから始まります。ディテールのしきい値より暗いピクセルが1つの黒い図形になり、それ以外は背景になります。サイン、ステンシル、1色のロゴ、シルエットに向いています。

カラーは画像の主な色を残し、色ごとに塗りつぶしの図形にします。単色ベタのロゴ、アイコン、はっきりした数色のイラストに向いています。写真をカラーでトレースすると、実物に近いコピーではなく、色数を減らしたポスター風の図形になります。

ディテールのしきい値とスムージング

2つのスライダーは、モードによって働きが変わります。

PNGのSVG透過：白い背景を削除して透明にする

白い背景を削除は、初期状態でオンです。赤・緑・青がすべて240を超える白に近い部分を取り除くので、SVGの背景が透明になり、どんなページやモックアップ、素材の上にもきれいに重ねられます。

画像の背景と、絵の中の白を区別することはできません。そのため、画像の中の白いハイライトや白い文字も、透明な穴になります。オフにすると白い部分が白い図形として残り、モノクロでは黒い図形の後ろに白い背景の図形が加わります。PNGの透明なピクセルは、トレースの前に白として扱われます。

トレースに向く画像と向かない画像、サイズの制限

SVGはトレースの結果であり、元の画像の完全なコピーではありません。グラデーションは単色の帯になり、とても細かい部分は消えることがあり、画像内の文字がフォントに戻ることもありません。写真のSVG変換は可能ですが、ロゴのような仕上がりにはならない点に注意してください。

ファイルは5 MBまでで、HEICやカメラのRAW写真は変換した後で確認されます。とても大きな画像は、長辺が最大1200 pxの縮小コピーからトレースされ、SVGには元のサイズが記録されます。色数の多い写真は数千のパスになり、1 MB以上のファイルになることがあります。パスを減らしたいときは、スムージングを上げるか、ディテールのしきい値を下げてください。

ロゴのSVG変換と、Cricutなどのカッティングマシン用データ

ダウンロードされるSVGには、塗りつぶしのパス（path要素）だけが含まれます。線も透明度も埋め込みのラスター画像もありません。元画像の幅と高さのピクセル数をviewBoxで宣言しているので、ぼやけずにどんなサイズにも拡大できます。Cricut Design Space、Illustrator、Inkscape、Figma、各種ブラウザで開けます。

カットデータにするなら、コントラストの高い画像をモノクロで始め、白い背景を削除はオンのままにして、カットする前にカット用ソフトで形を確認してください。

ほかのツール：スキャンしたPDFのページをトレースするなら「PDFベクター変換」、トレースの前に被写体を切り抜くなら「背景切り抜き」があります。ファイル形式を変えたいだけなら、「画像フォーマット変換」でJPG、PNG、WebP、PDFに保存でき、「ドット絵変換」は画像を粗いレトロなドットにします。

画像SVG変換のよくある質問

PNGをSVGに変換するにはどうすればいいですか？

PNGを選び、「SVGトレース」のプレビューを確認して、「SVGをダウンロード」を押してください。画像の中の形が塗りつぶしのベクターパスにトレースされ、logo.svgのように元の名前を引き継いだファイルとして保存されます。結果が思わしくなければ、まず「トレース設定」を変えてください。コントロールを動かすたびにプレビューが更新されます。

JPGをSVGにカラーで変換するにはどうすればいいですか？

「トレース設定」で「トレースモード」を「カラー」にして、「SVGをダウンロード」を押してください。残された色ごとに、塗りつぶしの図形になります。色数は「ディテールのしきい値」で決まり、0で約2色、255で約32色、初期値の128では約17色です。JPGの圧縮でゴミが出たときは、「スムージング」を上げてください。

画像をCricut用のSVGに変換できますか？

はい。「SVGをダウンロード」を押して、ファイルをCricut Design Spaceで開いてください。SVGには塗りつぶしのパスだけが入っており、線も埋め込み画像もありません。白黒の線画やベタ塗りの絵がいちばんきれいにトレースでき、「モノクロ」なら1色の図形になります。写真はブロック状のポスター風になるため、きれいなカットデータには向きません。

画像のSVG変換で背景を透明にするにはどうすればいいですか？

初期設定でオンの「白い背景を削除」にチェックを入れたままにしてください。赤・緑・青がすべて240を超える白に近い部分が取り除かれるので、SVGに背景の図形がなくなり、プレビューでは市松模様が透けて見えます。絵の中のハイライトなど白い部分も透明な穴になります。白い部分を残すときは、チェックを外してください。

写真をSVGに変換できますか？

できますが、結果は写真ではなく、色数を減らしたポスター風のトレースになります。「カラー」モードは画像を単色の塗りつぶし図形にし、色数の多い写真では数千のパス、1 MB以上のファイルになることがあります。パスを減らすには「スムージング」を上げるか「ディテールのしきい値」を下げてください。きれいに仕上げたいなら、ロゴ、アイコン、線画、シルエットから始めるのがおすすめです。

PNGを画質を落とさずにSVGに変換できますか？

SVGはピクセルではなくパスでできているので、どんなサイズでもくっきり見えます。ただし画像のトレースであって完全なコピーではないため、細い線は滑らかにされたり、くっついたりすることがあります。輪郭をよりシャープにたどるには「スムージング」を下げ、「カラー」モードでもっと多くの色を残すには「ディテールのしきい値」を上げてください。ベタ塗りではっきりした輪郭の画像ほど、劣化が少なくなります。

ロゴやサインをSVGに変換できますか？

はい、どちらも最も向いています。「モノクロ」にして、細い線がつぶれず、すき間も埋まらないところまで「ディテールのしきい値」を調整してください。図形は単純な塗りつぶしのパスなので、ファイルはIllustrator、Inkscape、Figmaで開け、どんなサイズにも拡大できます。文字はフォントとして再現されず、輪郭のパスとして出力されます。

SVGに変換するとき、画像はアップロードされますか？

いいえ。トレースはお使いのブラウザ内のWeb Workerで行われるため、画像は端末から出ません。ファイルの上限は5 MBで、HEICやカメラのRAWファイルは変換した後で確認されます。とても大きな画像は、長辺が最大1200 pxの縮小コピーからトレースされ、SVGには元のサイズが記録されたまま、自由に拡大できます。

おすすめ

無料でツールを続ける支えになります。✨

画像はイメージです。 Amazonのアソシエイトとして、Capsule Toolsは適格販売により収入を得ています。

関連ツール

ファビコン生成

画像からファビコン、アイコン、manifest作成

Web用画像変換

RAW、HEIC、DNGをWeb用JPGに変換

画像圧縮

JPG、PNG、WebPを圧縮・変換

PDFベクター変換

ラスターPDFを拡大縮小可能なSVGベクターに変換

アプリスクリーンショット作成器

App Store・Playストア用の枠付き画像を生成