ScalableDots

日本語 | English

画像ファイルをドロップ
もしくはクリックして選択
とりあえずサンプル画像で試す?
百聞は一見に如かず
SVG 設定
プレビュー

ドット絵は SVG 画像にすれば綺麗に拡大出来る! ドット絵なのにベクター画像?そう、二アレストネイバー法なんてもう知らなくてもいい!

ScalableDots とは

ScalableDots は PNG や GIF などの画像ファイルを SVG 画像に変換するツールです。元の画像にある各ピクセルを一つずつ、SVG 上の要素に置き換えて元の色で塗りつぶすことで変換を行っています。主な用途としては、ドット絵 (Pixel art) を SVG に変換するために使います。

ドット絵を Web で公開する場合、等倍で表示すると小さすぎてドット絵としての魅力が十分に伝わらないので、一般には拡大して表示するようにしますが、SVG 画像として公開する事で任意の倍率で綺麗に拡大することが出来るようになります。

なぜ 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.svg

コマンドラインオプション

scalable-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

お問い合わせ

ScalableDots は Otchy (個人ブログ) が作成、公開、メンテナンスしています。不具合の報告や機能追加の要望などがあれば、Twitter を通じてお伝えいただけると幸いです。

ScalableDots is written by Otchy. Share it if you find it's valuable.