ファイル名を変えるだけでは変換になりません
ファイル名をlogo.pngからlogo.svgに変えても、中身は変わりません。データはPNGのままなので、SVGのコードを期待するプログラムは何も見つけられません。
PNGを<image>要素に入れて持ち運ぶだけのSVGも、ベクターではありません。SVGとして開けますが、絵はピクセルの集まりのままです。拡大するとぼやけ、ベクター編集ソフトやカッティングマシンでは図形を1つずつ選べません。本当の変換では絵をトレースし、色の領域をそれぞれ閉じたパスとして描き直します。SVGはベクターファイル？パスとピクセルの違いもご覧ください。
png2svg.artでPNGをSVGに変換する
- 変換ツールに、最大25MBのPNG、JPG、WebP、HEICをアップロードします。長辺が2048pxを超える画像は、トレース前にこのサイズまで縮小されます。
- プリセットを選びます。標準（8色から）、Cricut／カッティング（4色から。背景を削除し、カットできないほど細い図形をまとめます）、線画／ステンシル（常に2色）、精細なアートワーク（16色から）があります。
- 色数（上限）（2〜24）を、目に見える色の数に合わせます。これは上限なので、フラットな作品なら実際に使われている色だけが残ります。
- なめらかな曲線はオンのままにします。SVGに入れたくない単色の背景があるなら、背景を削除をオンにします。
- プレビューで結果全体を確認します。透かし入りで、登録不要・無料です（ゲストは1日5回まで）。思いどおりになるまで設定を変えてトレースし直してください。
- 透かしなしのSVGのロックを解除し（1クレジット、アカウントなら無料3クレジット。ログインはGoogleで行います）、ダウンロードするか、SVGエディターで開きます。
SVGはオブジェクトごとにグループ化されています。背景（画像にある場合）と各オブジェクトがそれぞれ別のグループになり、オブジェクトの中では図形がそれぞれ塗りつぶされた独立したパスになっていて、どれがどれを囲むかに従って入れ子になっています。そのため、エディターでオブジェクト1つ、またはその一部だけを非表示にしたり、移動したり、削除したりできます。以前のように1色につき1つのパスにしたい場合は、「設定」でレイヤーを色ごとにしてください。PNGやWebPの透明な部分は透明のまま残り、すべての結果について、ビットマップが埋め込まれておらずベクターパスだけでできていることを確認しています。
私たちの作例画像の1つをPNG（左）と、png2svg.artがトレースしたSVG（右）で比べたもの。7色、33個のパスで、ステッカーの白いフチも残っています。
InkscapeでPNGをSVGに変換する
Inkscapeは、無料でオープンソースのデスクトップ用ベクター編集ソフトです。「ビットマップのトレース」ツールは次のように使います。
- PNGを開くか、「ファイル」>「インポート」で取り込み、選択ツールで選択します。
- 「パス」>「ビットマップのトレース」（Path > Trace Bitmap、Shift+Alt+B）を選びます。
- 1色のシルエットなら、シングルスキャンで明度のしきい値（Brightness cutoff）を選びます。カラーでトレースするなら、マルチスキャンでカラーを選び、スキャン数を設定します。このモードには背景を除去（Remove background）もあります。マルチスキャンでは、スキャンごとに別のオブジェクトが作られます。
- 更新をクリックして結果をプレビューし、適用をクリックしてパスを作ります。
- トレース結果はビットマップの上に配置されます。選択ツールで横にずらして確認し、ビットマップを削除します。
- 「ファイル」>「名前を付けて保存」でプレーンSVGを選んで保存します。Inkscape独自の編集データが含まれなくなります。
Adobe IllustratorでPNGをSVGに変換する
IllustratorはAdobeの有料ソフトです。「画像トレース」機能は次のように使います。
- 「ファイル」>「配置」でPNGをドキュメントに取り込み、選択します。
- 「ウィンドウ」>「画像トレース」を開きます。
- プリセットを選びます。たとえば色数のプリセットや「白黒のロゴ」です。白黒でトレースする場合、ホワイトを無視を使うと白い部分が結果から除かれます。
- コントロールパネルかプロパティパネルで拡張をクリックします。トレースが、グループ化された編集可能なパスになります。拡張した後は、トレースのオプションを変更できなくなります。
- 「ファイル」>「書き出し」>「書き出し形式」を選び、形式にSVGを選びます。
拡張を省くと、トレースは通常のパスではなくトレースオブジェクトのままです。書き出す前に拡張してください。
Cricut Design SpaceでPNGをカットラインにする
Cricutのマシンでカットすることだけが目的なら、Design SpaceはPNGをそのまま使えます。
- アップロードを選び、PNGかJPGを開きます。
- 選択ツールと消去ツールで背景を取り除きます。
- 1色でカットするならSingle Layer（単一レイヤー）、Print Then Cut（印刷してからカット）ならFlat Graphic（フラットグラフィック）を選び、画像に名前を付けてアップロードします。
Cricutはこれらのオプションの名前をときどき変えるので、画面の表示が少し違うことがあります。フラットな画像を「Convert to Layers」で複数の色のレイヤーに分けるには、Cricut Accessのサブスクリプションが必要です。png2svg.artのトレースは、オブジェクトごとにグループ化され、図形がそれぞれ独立したパスになっているので、グループを解除できるレイヤー付きのグループ画像としてアップロードされます。詳しくはPNGをSVGに変換してCricut・シルエットで使う方法をご覧ください。
どの方法を使うか
| 方法 | 向いている場合 | 注意点 |
|---|---|---|
| png2svg.art | 多色のロゴやフラットなアートを、インストールなしでオンラインでトレースしたい | 透かし入りプレビューは無料。透かしなしのSVGは1クレジット |
| Inkscape | 無料のデスクトップツールで、トレースを細かく調整したりノードを編集したりしたい | 覚える設定が多い |
| Adobe Illustrator | すでに使っている | 書き出す前にトレースを拡張する |
| Cricut Design Space | 1色のカットかPrint Then Cutだけが目的 | Design Space内のカットラインになり、SVGファイルにはならない |
よくある質問
変換しても透明な背景は残りますか？
png2svg.artでは、PNGとWebPなら残ります。半分以上不透明なピクセルだけがトレースされるので、透明な部分は透明のままで、SVGに背景の長方形は付きません。JPGには透過がないので、単色の背景を除くには「背景を削除」をオンにしてください。詳しくはPNGをSVGにしても透明な背景は残る？をご覧ください。
色はそのまま残せますか？
最大24色のフラットな色で、オブジェクトごとにグループ化され、図形はそれぞれ独立したパスになります。陰影やグラデーションは、平坦な色の帯にまとめられます。トレースしたSVGは何色にすればいい？色数の決め方もご覧ください。
画質を落とさずにPNGをSVGに変換できますか？
トレースは画像を劣化なしで変換するのではなく、描き直す処理です。フラットなロゴやアイコンは元の画像にとても近い仕上がりになり、その後はぼやけずに拡大できます。写真やグラデーションは最大24色の平坦な色にまとめられるため、細部が失われます。小さなPNGにない細部を、トレースで付け加えることはできません。
無料ですか？
png2svg.artでは、透かし入りプレビューは登録不要・無料で、透かしなしのSVGは1クレジットです（アカウントなら無料3クレジット）。Inkscapeは無料のソフトで、Illustratorは有料です。