PNG→SVG 変換の使い方
- PNG、GIF、WebP のスプライトをドロップします。
- 出力モードを選びます。1色につき1パス（最小）、結合した矩形、1ピクセル1矩形。
- 表示サイズを設定します。viewBox はピクセル単位のままなので、どのみち SVG はきれいに拡縮されます。
- 必要なら単色の背景を追加します。
- .svg をダウンロードするか、コードをコピーします。
得られるもの
- shape-rendering="crispEdges" 付きの SVG
- モードごとのファイルサイズ比較
- コピーできる SVG ソース
ゲーム制作で使って得たコツ
- パスモードがたいてい最小で、Web、アイコン、レーザーカッター向けにはこれが最適です。
- 矩形モードは各ブロックが独立した要素なので、手で編集したり CSS でアニメーションさせたりしやすいです。
- スプライトは小さめに。64×64 のスプライトなら一瞬で変換できますが、数千色ある写真のような画像だと巨大な SVG になります。
- 半透明のピクセルは fill-opacity になるので、柔らかい影も変換後に残ります。
活用例
- スプライトを Web サイトのくっきりしたアイコンやロゴとして使う
- ドット絵を大きく印刷する（ポスター、ステッカー、グッズ）
- ドット絵を Figma、Illustrator、Inkscape に取り込む
- ドット絵のデザインでレーザーカットやカッティングシートを作る
よくある質問
変換で劣化しませんか？
しません。すべてのピクセルが、正確な色とアルファを持つ図形1つで覆われます。SVG を元のサイズでラスタライズすれば、元の PNG に戻ります。
画像をトレースすればよいのでは？
トレースツールはエッジを曲線に滑らかにしてしまい、ドット絵が台無しになります。この変換ツールは、ピクセルグリッド上の 90° のエッジをそのまま保ちます。
一番小さくなるのはどのモードですか？
パスです。同じ色の矩形は短い相対コマンドで1つの path 要素にまとめられます。各モードのサイズが表示されるので比べてみてください。
拡大するとぼやけませんか？
ぼやけません。SVG は shape-rendering="crispEdges" と整数座標を使うので、どの倍率でもエッジがくっきりしたままです。
サイズの上限はありますか？
512×512 ピクセルまでです。それより大きい画像だと、SVG が大きくなりすぎて実用的ではありません。
画像はアップロードされますか？
いいえ、変換はブラウザ内で行われます。