本スクリプトは256色までのGIF/PNG/BMP(ドット絵)画像を色ごとに分解し, 複数の色情報(カラーパレット)と共に単一のSVGファイルとしてまとめるものです. 例えば下の画像は全て同じ「dot.gif.pdots.svg」を表示しています.
パレットカラー化ドット絵SVGの表示例
| 未指定 |
#default |
#red |
#yellow |
|
|
|
|
格納したカラーパレットはハッシュ(#)として選択します.
元画像をグレイスケール(インデックス)化していることからファイルサイズ的に有利で, 更にSVGZ形式に圧縮することも可能です.
※なお技術的な検証を主眼としており, ツールとしての使い勝手は余り考慮していません. 本スクリプトが生成するSVG構造こそが重要であり, スクリプトそのものに意味が無いからです. (何がベストか判らんので). ですから他のドット絵ツールによる出力・変換がサポートされると非常に面白いことになるかもしれません.
SVGフィルタのfeComponentTransfer原始フィルタを利用しています. この原始フィルタはRGBAの各成分毎に入力値と出力値との間の対応(Map, function)を定めるもので, ガンマ補正・減色・反転等の画像加工を得意としています. 本スクリプトでは画像の色ごとにグレイスケール値を割り当て, feComponentTransferフィルタを用いてそのグレイスケール値毎に固定のRGB値を与えるようにしています.
このようなSVGフィルタをカラーパレット毎に用意し, CSS(:target擬似クラス)を使ってSVG内部で適用するフィルタを切り替えることで複数の色情報を選択可能としています.
また, ドット絵拡大時に発生するアンチエイリアスを防ぐためのコードを内包しています. (こうしないとfeComponentTransferフィルタが正しく作用しないため)