ロゴ画像を大きなポスターに使ったら、輪郭がギザギザになってしまった。手元にPNGのロゴしかないけれど、印刷会社からSVGかAIのデータを求められた。そんなときは、画像をSVG（ベクター画像）に変換すると解決できることがあります。
この記事では、FlowPocketの画像→SVG変換を使って、ロゴやアイコンをSVGに変換する方法を紹介します。画像はアップロードされず、ブラウザの中だけで変換されます。
昔作ったロゴがPNGしか残っておらず、大きく使いたいときに困ったのがきっかけです。専用ソフトを持っていなくても、ブラウザだけでベクター化できるようにしました。
SVG（ベクター画像）とは
画像の形式には、大きく分けて2種類あります。
- ラスター画像（PNG・JPEGなど）：小さな点（ピクセル）の集まりで絵を表す。拡大すると、点が見えてギザギザになる
- ベクター画像（SVGなど）：線や図形の形を数式で記録する。どれだけ拡大しても、輪郭がなめらかなまま
SVGにすると、名刺サイズから看板サイズまで、同じファイルできれいに使い回せます。Webサイトのロゴやアイコンにもよく使われています。
このツールでできること
- PNG・JPEGなどの画像を、SVGに変換する
- スタイル（標準・色数を絞る・曲線を滑らかに・輪郭をくっきり・細部まで精密に）を選ぶ
- 使う色の数を調整する
- 元の画像と変換後のSVGを並べて見比べる
- 画像をサーバーに送らず、ブラウザの中だけで変換する
使い方
STEP1. 画像を選ぶ
画像→SVG変換を開き、ベクター化したい画像を選びます。ロゴやアイコンなど、輪郭がはっきりした画像がおすすめです。
STEP2. スタイルと色数を選ぶ
「スタイル」と「色数」を選びます。迷ったら、まず「標準」で変換してみてください。
STEP3. 変換して見比べる
「SVGに変換」を押すと、元の画像と変換後のSVGが並んで表示されます。仕上がりを見て、必要ならスタイルや色数を変えて変換し直します。
STEP4. 保存する
「SVGをダウンロード」で保存します。
単色に近いロゴなら「色数を絞る（ポスター風）」、丸みのあるロゴなら「曲線を滑らかに」が、すっきり仕上がりやすい組み合わせです。
活用シーン
- ロゴの拡大利用：PNGしかないロゴを、看板やポスター用に大きく使う
- Webサイトのアイコン：どの画面サイズでもくっきり表示されるアイコンにする
- カッティング・刺しゅう・レーザー加工：輪郭のデータが必要な機械用に、図形を用意する
- 手描きイラストのデータ化：線画をスキャンして、きれいな線のデータにする
よくある質問
写真もSVGに変換できますか？
変換自体はできますが、おすすめしません。写真は色が少しずつ変化し、グラデーションも多いため、細かい輪郭線だらけの粗い見た目になりがちで、ファイルも大きくなります。SVG化は、色数が少なく輪郭のはっきりした画像に向いています。
変換結果がガタガタに見えます
元の画像が小さい、またはぼやけていると、輪郭をうまくなぞれません。できるだけ大きく、くっきりした画像を使ってください。そのうえで「輪郭をくっきり」を試すか、色数を減らすと改善することがあります。
Illustratorの画像トレースと同じですか？
考え方は同じですが、専門ソフトほど細かい調整はできません。手早くベクター化したいときの簡易ツールとして使い、仕上げが必要な場合は専門ソフトで調整してください。
注意点
- 元の画像そのままにはなりません：輪郭をなぞり直すため、細部や文字の形が少し変わることがあります。ロゴの正式データが必要な場合は、作成元に確認してください
- 小さな文字は崩れやすい：細かい文字が入ったロゴは、文字の部分だけ形が崩れることがあります
- 背景を先に消しておくと便利です：白い背景も1色として変換されます。背景を透明にしたいときは、背景透過で先に処理してください
- ロゴの色を知りたいときは：カラーパレット抽出でHEXコードを確認できます
まとめ
ロゴやアイコンは、SVGにするだけで、どこまで拡大してもくっきり使えるようになります。FlowPocketの画像→SVG変換なら、専用ソフトがなくても、ブラウザだけでベクター化できます。
手元にPNGしかないロゴがあれば、試してみてください。
