PNG JPGをSVGに変換して色ごとに編集する方法

2026年10月7日更新

執筆・管理: GadgetPickLab

PNG/JPGを編集できるSVGにするには、画素をベクターパスとしてトレースし、原本と比較して保存します。GadgetPickLabでは色の非表示、変更、結合、色別SVGの保存もできます。多くのグラデーションがある写真より単色のロゴ、アイコン、イラストに向いています。

ツールを開く

入力と出力

トレースに合う画像を選ぶ

ロゴ、アイコン、色数の少ないイラストから始めます。透明背景のPNGは対象を分けやすく、JPGは境界の圧縮色を整理する必要があります。

変換は元の描画データを復元しません。小さな文字、影やグラデーションは多数のパスになるか細部を失います。原本を残して使用サイズで比較します。

SVGを生成して輪郭を確認する

1. 画像→SVGツールでPNG/JPGと合う開始設定を選びます。
2. 生成後に原本と比較し、拡大・移動して文字、穴、顔や外側の輪郭を確認します。
3. 細部が消える、または複雑すぎる場合は色数や設定を変えて再生成します。
4. JPGの境界に余分な色がある場合は境界整理を試し、本当の灰色まで消していないか確認します。

色を変更して個別のSVGに保存する

2色のアイコンなら各色を編集できるパスが目標です。境界に似た色が増えたら、その部分を確認してから結合を決めます。

1. 色グループを選び、色変更や非表示で対象の部分を確認します。非表示の部分は出力で透明になります。
2. 類似色の結合候補を確認するか、色を手動選択します。必要なら最後の結合を取り消します。
3. 編集した全体、または重ねるための色別SVGを保存します。
4. 保存ファイルをブラウザーやベクターエディターで開き、輪郭、透過と変更色を確認します。

SVGが原本より大きくなる場合

SVGはパスを記録します。複雑な写真やノイズの多いJPGは多数のパスとなり、ファイルが大きくなることがあります。色数を減らす場合も画質を比較してください。

大きな入力の自動縮小は細部にも影響します。元のキャンバス寸法を維持しても、作業画像で失った情報は戻りません。

保存前の疑問

拡張子を.svgに変えればベクターですか？

いいえ。拡張子ではパスを作れません。変換して保存したSVGを開いて確認します。

文字は編集できるテキストになりますか？

画素をパスにするため、元のフォントやテキストオブジェクトは復元しません。

写真も変換できますか？

試せますが、写真やグラデーションは複雑化や細部の単純化が起きます。単色のロゴやイラストに向いています。

ツールを開く

ほかの作業も試す

• 音楽スペクトラム動画の作り方・回転アルバムと透過保存

  MP3 WAVと写真で回転アルバム動画を作成。MP4 WebM、透過MOVとPNG連番の違い、編集ソフトへの読み込みを説明します。

• 写真をビーズ図案にする・手持ちの色と数量に合わせる方法

  色と個数を入力して写真をグリッド図案に。必要数、在庫制限、マス編集、印刷PDFと使用数CSVの保存を説明します。

• 写真をアップロードせず100KB・200KB以下に圧縮

  JPG PNG WebPの容量上限を指定し、縮小の許可と実際のバイト数を確認して提出用の画像を保存します。

• 必要なPDFページだけを選んで指定順で結合

  2〜10個のPDFから必要なページを選び、ファイル順を変更して一つのPDFに保存する方法。文書のアップロード不要。