これは何?
お手持ちの画像ファイルをSVGに変換します. ベクタ出力エンジンとしてPotraceを利用しています. なお, 出力結果はCSSのmix-blend-modeをサポートしている環境(Firefox, Chrome, Inkscape(!)等)でのみ確認出来ます. Illustratorだとダメらしい.
姉妹版：ドット絵SVG化スクリプト:改訂3版作りました！
姉妹版：ラスタ画像SVG化スクリプト:HSLカラー版作りました！
使い方
SVGに変換したい画像を選んで「実行」ボタンをクリックします. パラメータの詳しい意味はカーソルを当てて出てくるツールチップを確認してください.
何をしているの?
元画像を, RGB成分に分割して, 階調毎にベクタ化して重ねています(丁度等高線みたいなグラフィックが出来る). 最後にRGBをスクリーン合成すれば…ってのを寝る前に思いついたので試してみたものです. こうすると, 本来色数の多いグラフィックの表現が難しかったSVGにおいても, さほどDOM要素数を増やさずに多色表現が可能になる筈で, 結果はご覧の通りです.
例)4×4×4色の画像を作る場合これまでは4×4×4＝64個のpath要素が必要だった
mix-blend-modeを使えば4＋4＋4＝12個で済む!
その差実に52. これはSVGのレンダリング速度に雲泥の差をもたらす.
つまりラスタ画像として"フルカラーな"SVGの構築はほぼ不可能だったが, 色数をケチればそこそこカラフルなSVGがそこそこの速度で動作する. (実用的とは言っていない)
動作環境
Firefox, Chromeのなるべく新しいもの. Chrome推奨．
※Firefoxはxlink周りのバグが放置されっぱなし. blobスキームでxlink:hrefが無視されるし, feImageのxlink:hrefでid指定できないしで何とかしてください.
特徴
- ストラテジ的には色が中途半端に多い画像に適したフォーマットかと. 自然画を変換すると割とSVGに見えない. (流石にレンダリングは重いけれど)
- 色数が少ない画像では却って要素数が増えてしまうことも.
- Potraceを色の階調分ぶん回しているので, 画像が大きすぎたり色の階調数が多いと処理に時間がかかります. 予めリサイズしておくと宜しかろうと.
- 色を合成している都合, 後から色を調整するのが面倒です…(再利用性に乏しい)
- 減色処理がへぼい(色の誤差が酷い)ので↑の特徴と組み合わせると実用に耐えうるか疑問. 技術検証目的ってことでひとつ…
(適切な減色処理→使っている色を使ってベクタ化が理想なんだけれど)
誰かやってくれるでしょう.
出力結果SVGのサンプル
更新履歴
- 2016/05/20 新規作成
- 2016/05/21 buffered-renderingを追加
- 2016/05/22 赤のみ倍階調設定を追加. (見た目がよりきれいになる?)
- 2016/05/22 処理をWorker化し, 動作を軽快に.
- 2016/05/22 コードを整理, 緑も倍階調に.
- 2016/05/22 トレースしたパスを相対化し, ファイルサイズを削減. 無駄なパスを無視するように変更. 処理の中断機能を追加.
- 2016/05/23 mix-blend-modeの代わりにSVG Filterを使った出力を可能とした. この場合Firefoxでは動作しません(さっさと直して欲しい).
- 2016/05/23 変換ストラテジを設定可能とした.
- 2016/05/23 非サポート画像形式指定時にエラー復帰できるように対応.
- 2016/05/23 グレイスケールの出力に難があったのを修正.SVGの構造を変更(描画時のチラツキ対策).出力コードの無駄を排除.
- 2016/05/24 chromeでエラーを履いていたのを修正. 出力SVGの構成を再改良．
- 2016/05/26 svgzの出力が重すぎるので選択出来るようにした.
- 2016/05/30 svgzの出力をWorker内部に移動.