これは何?
以前作ったドット絵svg化スクリプトver2の焼き直しです. ラスタ画像SVG化スクリプト:カラー対応版での成果を取り入れており, 高解像度の画像データも割と現実的な速度で変換・表示が可能となりました(ファイルサイズがちょっと…). また, ベクタ化エンジンを書きなおしたことで処理速度が向上しています.
Node.jsで動作するドット絵SVG化スクリプト:dotrace.jsを作りました！これでバッチ出力もバッチり.
使い方
SVGに変換したい画像を選んで「実行」ボタンをクリックします. パラメータの詳しい意味はカーソルを当てて出てくるツールチップを確認してください.
動作環境
Firefox, Chromeのなるべく新しいもの. Chrome推奨．
※Firefoxはxlink周りのバグが放置されっぱなし. blobスキームでxlink:hrefが無視されるし, feImageのxlink:hrefでid指定できないしで何とかしてください.
特徴
- 出力したSVGにmix-blend-modeを使った(描画の)軽量化を施しています. また, 互換性の高い従来の仕組みによる出力も可能です.
- 「use blend」にチェックを入れると, rgba毎に画像を分解し, レンダリング時に合成します. pash要素数を稼げるため, 比較的色数の多い画像もドット絵化可能です. 但しその代償として動作する環境がFirefox/Chrome/Inkscapeに限定されます. また, ファイルサイズが大きめになることがあります. (同じピクセルを最大4回囲むパスが出力されるから)
- 「use blend」のチェックを外すと従来のピクセル色毎にpath要素を生成します. 互換性が高いため, 出力データの再利用をしやすいようになっています.
- ドット形状の適用を改良しました. mask画像として上から被せるため, 全体としてのファイルサイズの軽減し, 後からドット形状を変更するのも簡単になっています.
- 以前のバージョンよりも出力されるパス文字列が短くなっています.
- 出力される画像の構造を見なおしたので前より大きめの画像もさほど負荷が掛からなくなってますが, それでも元画像のサイズには気をつけてください.
- Chromeの場合, 画像のサイズが大きくて, 色数が多く, 複雑なパスがcrisp-edgesなSVGを作ると途中で描画を諦めることがあるっぽい.
考察
作っておいて難なのだけれど, ドット絵SVGにおいてはmix-blend-modeによる合成テクニックは最適なストラテジーとは言えない！
- もともと色数が少ない(分解する意味がない).
- ファイルサイズが増えてしまう(同じピクセルを最大4回囲むため).
- 巨大な画像のSVG表現としてはパスの頂点が多すぎる. 環境によっては描画を諦めてしまう.
SVGでは同じ画像を表現する場合においても, 内部構造を色々変更することでびっくりするほど描画パフォーマンスに差がでてしまう. しかもこの特性がブラウザごとに異なるのでなんとも対処のしようがない.
更新履歴
- 2016/05/26 新規作成.
- 2016/05/26 svgzの出力が重すぎるので選択出来るようにした.
- 2016/05/26 要らないfill/opacity属性の出力をやめて少し軽量化.
- 2016/05/26 fill色を16進出力に.
- 2016/05/28 use blendのチェックを外す.
- 2016/05/29 Objectを使っていた部分をSet, Mapで書き換えた.
- 2016/05/30 一部処理をasm.jsで置き換え. また一部構文をES6で書き換えてみた. svgz出力をWorker内に移動
- 2017/01/29 FireFox向けのトラップコードを除去.