PNG→SVG変換ツール

1. PNG画像をドラッグ＆ドロップ、クリックで選択、またはCtrl+V（⌘V）でクリップボードから貼り付けます。JPG・WebP・GIFも読み込めます。
2. 画像の種類（ロゴ・アイコン・線画・手書き・印影・フラットイラスト・ドット絵・写真）が自動判定され、推奨設定で変換されます。
3. 「なめらか重視」「原画再現重視」「軽量・編集しやすさ重視」の3つの変換候補が表示されます。一致度・容量・パス数などの数値を比較して、目的に合う候補をクリックで選択します。
4. 比較スライダーで変換前後を見比べ、16px〜512pxの実サイズプレビューで小さく表示したときの見え方を確認します。
5. 必要に応じて「かんたん編集」で、図形をクリックして色の変更・削除、近い色の統合、小さなゴミの一括削除、背景の透明化を行います。操作は元に戻す・やり直すに対応しています。
6. SVG品質診断で構造をチェックし、出力用途（Web用・単色アイコン用・カッティング用など）を選んでSVGをダウンロードします。

PNGとSVGの違い

PNGは「ラスター形式」と呼ばれ、画像をピクセル（点）の集まりとして記録します。拡大するとピクセルが目立ち、輪郭がギザギザにぼやけてしまいます。一方SVGは「ベクター形式」で、図形の輪郭を数式（パス）として記録するXMLベースのテキストデータです。数式で描画されるため、どれだけ拡大縮小しても画質が劣化しません。

SVGには次のような利点があります。

• 拡大縮小しても画質が劣化しない（Retinaディスプレイや印刷にも対応）
• ロゴやアイコンなど単純な図形ならPNGよりファイル容量が小さい
• CSSやJavaScriptから色・サイズを制御できる
• テキストデータのためGit管理や差分確認がしやすい
• カッティングマシンやレーザー加工機の入力データとして使える

ベクター化（トレース）の仕組み

PNGをSVGに変換する処理は「ベクター化」または「トレース」と呼ばれます。おおまかには次の手順で行われます。

1. 色の集約（減色）：画像内の色を代表的な数色〜数十色にまとめます。
2. 領域分割：同じ色のかたまりごとに領域を分けます。
3. 輪郭抽出：各領域の境界線を追跡します。
4. 曲線近似：ギザギザのピクセル境界を、直線とベジェ曲線の組み合わせで滑らかに近似します。
5. SVG出力：得られたパスをSVGのpath要素として書き出します。

このとき「どこまで滑らかにするか」「どこまで細部を残すか」「色を何色に減らすか」のバランスによって仕上がりが大きく変わります。滑らかにするほど手書き文字やロゴは美しくなりますが細部は失われ、細部を残すほど原画に忠実になりますがパス数と容量が増えます。このツールが3種類の候補を同時生成するのは、このトレードオフを実際の結果で見比べて選べるようにするためです。

SVG変換に向いている画像・向かない画像

ベクター化に向いているのは、明確な形状と単純な色領域を持つ画像です。

• 向いている：ロゴ、アイコン、線画、手書き文字・サイン、印影・スタンプ、フラットイラスト、ドット絵
• 向かない：写真、グラデーションの多い画像、水彩・油彩のような複雑なテクスチャ、ノイズの多い低解像度画像

写真をSVG化すると、微妙な色の変化ごとにパスが生成されるため、パス数とファイル容量が膨大になり、画質もモザイク状に低下します。写真は無理にSVG化せず、PNGやWebPのまま使うことをおすすめします。このツールでは画像を自動解析し、写真に近い画像には変換前に警告を表示します。

透過PNGの白フチ問題

透過PNGの輪郭には、背景との合成用に半透明の白や黒のピクセルが残っていることがあります。これをそのままベクター化すると、ロゴの周りに白っぽい縁取りがパスとして生成されてしまいます。このツールの「縁取り（フチ）処理」では、半透明ピクセルから白（または黒）成分を数学的に取り除いてから変換するため、透過ロゴでもきれいな輪郭のSVGが得られます。あわせて透明度のしきい値も調整できます。

「SVGなのに中身はPNG」に注意

世の中には、SVGファイルの中にPNG画像をそのまま埋め込んだだけの「なんちゃってSVG」が存在します。拡張子は.svgでも中身はラスター画像のため、拡大すると劣化し、色の変更もできません。このツールのSVG品質診断では、PNG埋め込みの検出のほか、viewBoxの有無、固定サイズ指定、外部ファイル参照、scriptタグやイベント属性の混入など、Web掲載に適した構造かどうかを自動チェックします。

PNG→SVG変換の主な活用シーン

Webサイトのロゴ：PNGロゴをSVG化すると、あらゆる画面解像度でシャープに表示され、容量も削減できます。「Webサイト用ロゴ」出力では固定サイズを削除しviewBoxを設定するため、CSSで自由にサイズ指定できます。

アイコン・ファビコン：16px〜512pxの実サイズプレビューで、メニューアイコンやファビコンとして実際に使えるサイズ感かを事前に確認できます。「単色アイコン用」出力で1色化すれば、アイコンフォントのようにシンプルに使えます。

CSSで色を変えたいアイコン：「CSS色変更用（currentColor）」出力を選ぶと、fillがcurrentColorに置き換わり、CSSのcolorプロパティだけでアイコンの色を変更できるようになります。ホバー時の色変更やダークモード対応が簡単になります。

手書きサイン・手書き文字：紙に書いたサインをスマートフォンで撮影またはスキャンし、このツールでSVG化すれば、書類やWebサイトで使える滑らかなベクターサインが作れます。「なめらか重視」の候補が適しています。

印鑑・スタンプ画像：印影画像は自動判定で「印影・スタンプ」と分類され、白黒2色での変換が推奨されます。「印影・スタンプ用」出力で白黒化したSVGをダウンロードできます。

カッティングマシン・レーザー加工：「カッティングマシン用」出力では、単色化と小さな図形の削除を自動で行います。ステッカー製作やレーザー刻印のデータ作成に活用できます。

Q. PNGをSVGに変換するとどんなメリットがありますか？

A. SVGはベクター形式のため、どれだけ拡大縮小しても画質が劣化しません。ロゴやアイコンをSVG化すると、高解像度ディスプレイでもきれいに表示され、CSSで色を変更でき、単純な図形ならPNGより容量も小さくなります。

Q. 写真もSVGに変換できますか？

A. 変換自体は可能ですが、写真やグラデーションの多い画像はパス数と容量が非常に大きくなり画質も低下するためおすすめしません。このツールでは写真に近い画像を自動判定し、変換前に警告を表示します。

Q. アップロードした画像はサーバーに送信されますか？

A. 送信されません。変換処理はすべてブラウザ内のJavaScriptで完結します。社内ロゴや未公開デザインなど機密性の高い画像でも安心してご利用いただけます。

Q. 3つの変換候補はどう使い分ければいいですか？

A. 手書き文字・サイン・ロゴは「なめらか重視」、ドット絵や細部を残したい画像は「原画再現重視」、Webで軽く使いたい・後から編集したい場合は「軽量・編集しやすさ重視」が目安です。画像の自動判定結果に応じて「おすすめ」バッジも表示されます。

Q. 変換後のSVGの色を変更・削除できますか？

A. できます。「かんたん編集」でプレビュー上の図形をクリックするか色チップを選ぶと、カラーピッカーで色を変更したり、その色の図形をまとめて削除したりできます。操作は元に戻す・やり直すに対応しています。

Q. 背景を透明にできますか？

A. できます。「背景色を透明化」ボタンで四隅の色に近いパスを自動削除できるほか、色チップから任意の色を選んで削除することもできます。透過PNGの輪郭に残る白フチ・黒フチの除去にも対応しています。

Q. 16pxなど小さいサイズで潰れてしまいます。

A. 実サイズプレビューと各候補の「小サイズ表示」評価で事前に確認できます。潰れる場合は「軽量・編集しやすさ重視」を選ぶ、色数を減らす、小さなゴミを削除するなど、構造をシンプルにすると改善します。

Q. 対応している画像形式は何ですか？

A. PNG・JPG・WebP・GIFの読み込みに対応し、出力はSVGです。透過情報を活かせるPNGでの利用を最もおすすめします。読み込みはドラッグ＆ドロップ・ファイル選択・クリップボード貼り付け（Ctrl+V／⌘V）に対応しています。

Q. 変換したSVGは商用利用できますか？

A. ツール自体は無料で商用利用可能です。ただし変換した画像の著作権・商標権は元画像に帰属するため、他者が権利を持つロゴやイラストを利用する場合は権利者の許諾を得てください。

このツールは無料でご利用いただけます。変換処理はすべてブラウザ内で行われ、画像はサーバーに送信されません。変換品質は元画像の内容に依存し、写真やグラデーションの多い画像では十分な結果が得られない場合があります。変換した画像の著作権・商標権は元画像の権利者に帰属します。カッティングマシン等でご利用の際は、お使いの機器・ソフトウェアで事前に動作確認を行ってください。