編集可能なパス • 単色マークとカラーレイヤー

画像を SVG に変換

ラスター画像をブラウザで編集可能な SVG パスに変換します。単色マークとカラーレイヤーの 2 つのプロファイル、色の精度、曲線の近似、出力の最適化を備えています。

ラスター画像を再利用できる SVG パスに変換

ラスター画像を SVG パスの文書に変換します。単色マークは黒のしきい値または適応しきい値から単色の形を描き、カラーレイヤーは画像の色を層として保ちます。設定パネルには描画に関わる調整項目が並びます: ノイズ除去、色の精度、グラデーションの刻み、色数の上限、そして輪郭の形を決める角・線分・接合のしきい値です。パス精度、曲線の単純化、出力の最適化、Watershed の詳細度は「詳細設定」にまとめています。

画像を SVG に変換する方法

  1. 1.画像をドロップするか、ファイルを選ぶか、クリップボードから貼り付けます。
  2. 2.ロゴやアイコンには単色マーク、イラストや写真にはカラーレイヤーを選び、「領域の形成」で Color clustering か Watershed を選びます。
  3. 3.黒または適応しきい値を設定し、「曲線の近似」と「出力」を調整します。ファイルサイズを詰めたいときだけ「詳細設定」を開きます（パス精度や曲線の単純化など）。画像を読み込むと自動で変換が始まり、設定を変更するたびに自動でやり直されるため、生成の操作は不要です。
  4. 4.SVG をプレビューし、ソースをコピーするか、SVG ファイルとしてダウンロードします。

この SVG コンバーターでできること

画像はページ内でデコードし、すべての処理はこのブラウザータブ内、お使いの端末上で行われるため、ファイルが変換サーバーへ送信されることはありません。

単色マークとカラーレイヤーの 2 つのプロファイルで、ロゴ、アイコン、線画、フラットなイラスト、写真に対応します。

設定パネルには描画に関わる調整項目がすべて入っています: 色の精度、グラデーションの刻み、色数の上限、そして輪郭の形を決める角・セグメント長・接合の 3 つのしきい値です。パス精度、曲線の単純化、出力の最適化、Watershed の詳細度は「詳細設定」にまとめています。各項目の隣の疑問符が影響を説明し、「設定をリセット」で初期値に戻せます。設定を変えると自動で再変換されます。

結果パネルには処理サイズ、SVG のサイズ、パス数が表示され、そのままプレビュー、コピー、ダウンロードできます。

画像から SVG への変換に関する FAQ

画像はアップロードされますか？

いいえ。デコード、変換、プレビューはすべてこのタブ内、お使いの端末上で行われ、変換サーバーがファイルを受け取ることはありません。

できあがるのは本当に編集できる SVG ですか？

はい。出力は SVG のパスデータで、SVG ファイルに埋め込んだビットマップではありません。図形・色・ノードはデザインソフトでそのまま編集でき、どんなサイズに拡大してもピクセルの粗さは出ません。

プルダウンの各選択肢は何をするものですか？

方式は画像をどう分割するかを決めます。Color clustering は近い色をまとめて面にし、ロゴやアイコン、フラットなイラストに向きます。Watershed はオブジェクトの輪郭に沿って領域を分け、細かい部分を多く残します。レイヤーの積み重ねは領域の持ち方を決めます。Stacked は図形が重なることを許してファイルを軽く保ち、Seam-free cutout は隣り合う領域で辺を共有するため、編集しても境界が両側で一致します。曲線モードは輪郭の表現を決めます。Spline curves は滑らかな曲線を描く既定の設定、Polygon は直線の線分、Pixel edges は変換した階段状の輪郭をそのまま使います。出力の最適化はファイルをどこまで書き換えるかを決めます。Off は変換結果をそのまま出力し、Quantize + clean は座標を丸めて不要なコマンドを削り、Shorthands + grouping はさらに重複した属性を短いパスにまとめるため、ファイルが最も小さくなります。

どの画像形式を使えますか？

JPEG、PNG、WebP、AVIF、BMP、GIF の画像を選択できます。形式を開けるかどうかはブラウザの画像サポートによって決まります。

単色マークとカラーレイヤーの違いは何ですか？

単色マークは二値の領域形成を使い、黒のしきい値（コントロールは 1–255、既定 128）より暗いピクセルが 1 つの単色の形になります。カラーレイヤーは Color clustering または Watershed による領域形成を使い、画像の色を Stacked または Seam-free cutout の編集可能な領域として保持します。

黒のしきい値は何をしますか？

単色マークでどのピクセルを形にするかを決める輝度の境界で、境界より暗いピクセルが形になります。コントロールは 1–255、既定は 128 です。値を大きくすると形になるピクセルが増えて塗りが強くなり、小さくすると最も暗い部分だけが残ります。

明るさが不均一なスキャンも変換できますか？

できます。単色マークで適応しきい値をオンにすると、固定のしきい値ではなく各ピクセルを周囲の明るさと比べて判定するので、写真やスキャンの明るさムラで広い範囲が一色につぶれません。適応感度は 5%–40% で既定は 15%（局所平均より下の割合）、適応ウィンドウは 0–64 ピクセルで、0 を選ぶとウィンドウが自動で決まります。スイッチをオンにすると、この 2 つはその隣に表示されます。

ノイズ除去は何をしますか？

どちらのプロファイルでも、指定したピクセル数より小さいかたまりを捨てます。範囲は 0–128 で既定は 4 です。大きくするとほこりやノイズの塊が消え、細部を残したいときは小さくします。

Watershed による領域形成はいつ使いますか？

Watershed はカラーレイヤーで Color clustering に代わる領域形成で、色の近さではなく物体の輪郭に沿って領域を分けるため、写真やイラストの細かい部分をより多く残せます。Watershed の詳細度は領域をどれだけ細かく分けるかを決めるもので、スライダーは 16–256（刻み 8）、既定は 128、値を大きくすると領域が増えてパスも増えます。

色の精度、グラデーションの刻み、色数の上限は何を変えますか？

色の精度は、どのくらい近い色を同じ領域にまとめるかを決めるもので（1–8、既定 6）、大きいほど色の変化が残りパスが増えます。グラデーションの刻みはグラデーション層の色差（0–255、既定 16）で、小さいほど階調が細かく残り、大きいほどより少なく大きな領域に統合されます。色数の上限は出力を最大 32 色に抑えるもので、既定はオフです（0 なら描かれた色をすべて残します）。

Stacked と Seam-free cutout の違いは何ですか？

Stacked が既定で、形が重なってもよくファイルは軽く保たれます。Seam-free cutout は隙間のないモザイクを作り、隣り合う領域が境界を共有するため、パスを編集しても同じ境界が両側で一致します。

曲線の近似の設定は何を変えますか？

曲線モードは Spline curves（既定）、Polygon、Pixel edges から選べます。Spline curves の輪郭を微調整する 3 つのしきい値は、Spline curves を選んでいるときだけ曲線モードの隣に並びます: 角のしきい値は 0–180 度で既定 60 度、輪郭のどこを角とみなすかを決めます。セグメント長は 3.5–10 で既定 4、パスに残す最短の線分を決めます。接合しきい値は 0–180 度で既定 45 度、短い曲線をつなぐときに使います。

SVG のファイルサイズを小さくするにはどうすればよいですか？

パス精度は座標の小数桁数（0–8、既定 2）で、桁数を減らすとファイルが小さくなります。曲線を単純化は 0–3 ピクセルの許容値内でできるだけ少ない三次曲線に再フィットする機能で、既定はオフです。出力の最適化は Off / Quantize + clean（既定）/ Shorthands + grouping の 3 段階です。

透明な部分はどうなりますか？

カラーレイヤーで Color clustering を使う場合、画像に十分な透明部分があると透明のキー処理が行われ、完全に透明なピクセルは描かれず背景は透明のまま残ります。単色マークと Watershed にはこのキー処理がなく全面を変換するため、見えている図だけを変換したいときは先に白背景へ合成してください。

大きな画像ではどうなりますか？

変換面は単色マークで長辺 2048 ピクセル、カラーレイヤーで 1280 ピクセルが上限で、それを超える画像は縦横比を保って縮小されます。結果が重いときはノイズ除去を上げる、曲線を単純化をオンにする、パス精度を下げる、または Shorthands + grouping の最適化を使うと軽くなります。カラーレイヤーは領域が少ないほど軽く、グラデーションの刻みを上げるか色の精度を下げると領域が減ります。