【p5.js】ピクセルアートの画像ファイルをSVGファイルに変換するプログラム

 

シブヤピクセルアートなどで一定のカルチャーとなりつつあるピクセルアート。

これをイラストレーターなどデザインソフトウェアでパスデータとして使用したい時がすこしやっかい。

画像で素材として使うならまあ良いのだが、パスにしたいときは自動(画像トレース→拡張)だとうまくいかないことがある。手動だと骨が折れるし、、。


なんとか綺麗に自動化できる方法はないか、ということでp5.jsで作ってみた。

結構細かいドット絵でも綺麗にパス化できる。(256*256は問題ない)

 

画像をアップロードし、SVGファイルをダウンロードすると、以下のような感じに正方形のパス(面の塗りは画像の通り、線の色は無し)に変換されている。

 

 

 

 

必要な方には重宝するはず、、、。

細かくしすぎるとIllustratorがクラッシュするので注意。

 

 

PIXELART to SVG

editor.p5js.org