ScalableDots は PNG や GIF などの画像ファイルを SVG 画像に変換するツールです。元の画像にある各ピクセルを一つずつ、SVG 上の要素に置き換えて元の色で塗りつぶすことで変換を行っています。主な用途としては、ドット絵 (Pixel art) を SVG に変換するために使います。
ドット絵を Web で公開する場合、等倍で表示すると小さすぎてドット絵としての魅力が十分に伝わらないので、一般には拡大して表示するようにしますが、SVG 画像として公開する事で任意の倍率で綺麗に拡大することが出来るようになります。
元のドット絵を拡大する際、ラスター画像の画像拡大アルゴリズムによってはぼやけた表示になってしまうので、従来はエッジが綺麗になるように倍率やアルゴリズムを選ぶ必要がありました。もちろんそれをサポートするツールも存在しますが、複数の倍率で表示したい場合はその数だけファイルを用意して使い分けるなどの面倒がありました。
一方の SVG 画像はベクター形式であるため、どこまで拡大してもドット絵としての魅力を保ったまま綺麗に表示することが出来ます。
いま開いているこのページは ScalableDots ウェブ版ですが、その他の多くのオンラインツールとは異なり、ScalableDots は全ての処理をブラウザ内で完結しています。ファイルをアップロードする必要がないので高速で動作し、セキュリティ上の懸念もありません。
したがって処理を行う画像のサイズにも制限はありませんが、ブラウザ上での処理のパフォーマンスは当然ながらあなたが使っているパソコンあるいはスマホの処理能力に依存します。
ブラウザで処理をするには重たいサイズの大きな画像や、大量のファイルをまとめて変換したい人のために、コマンドライン版も用意されています。必要に応じてコマンドライン版の利用も検討して下さい。
Node.js バージョン 18 以降が必要です。事前にインストールして下さい。
ScalableDots コマンドライン版のインストールには Node.js に同梱されているコマンドの npm を使います。
$ npm install @otchy/scalable-dots-cli$ npm install -g @otchy/scalable-dots-cli
scalable-dots コマンドは引数に画像ファイルを渡すと SVG
に変換した結果を標準出力に書き出すので、それを別のファイルにリダイレクトして保存してください。
$ npx scalable-dots input.png > output.svg$ scalable-dots input.png > output.svgscalable-dots コマンドには以下のオプションを指定する事が出来ます。
| オプション | 説明 | 備考 | デフォルト |
|---|---|---|---|
--type |
ドットの種類 | SQUARE, CIRCLE, RHOMBUS のいずれか |
SQUARE |
--size |
ドットのサイズ | 整数値 | 16 |
--gap |
ドット同士のすき間 | 整数値 | 1 |
--pretty-print |
出力する SVG を整形 | 無効 | |
--version |
バージョンを表示 | ||
--help |
ヘルプを表示 |
$ scalable-dots --type=CIRCLE --size=32 --gap=0 --pretty-print input.png > output.svg