これは何?
お手持ちの画像ファイルをSVGに変換します. ベクタ出力エンジンとしてPotraceを利用しています. なお, 出力結果はCSSのmix-blend-modeをサポートしている環境(Firefox, Chrome等)でのみ確認出来ます. フィルタストラテジを自然画に合わせているので, 写真などの出力品質が気持ち向上しています(していると嬉しい).
姉妹版：ラスタ画像SVG化スクリプト:カラー対応版 こちらはRGBで処理します
使い方
SVGに変換したい画像を選んで「実行」ボタンをクリックします. パラメータの詳しい意味はカーソルを当てて出てくるツールチップを確認してください.
※出力結果にゴミ(スジのような意図しない色境界)が出力されてしまう場合は, 色相分割の基準をずらすか速度優先モードを解除することで品質が改善します.
何をしているの?
元画像を, HSL成分に分割して, 階調毎にベクタ化して重ねています(丁度等高線みたいなグラフィックが出来る). 最後にHSL画像を合成すれば…ってのを思いついたので試してみたものです. 前回作ったRGBベースのものよりもHSLの方がよりきれいな減色ができると踏んで作ってみましたが…結果はご覧のとおりです(劇的な改善は感じられなかった).
動作環境
Firefox, Chromeのなるべく新しいもの.
特徴
- ストラテジ的には色が中途半端に多い画像に適したフォーマットかと. 自然画を変換すると割とSVGに見えない. (流石にレンダリングは重いけれど)
- 見た目が自然となるようにHSL階調を整えると結局RGB時とさほど変わらない. その代わり色相と彩度にぼかしを入れる仕組みを導入したので, こっちのほうがもう少し自然に見えるかもしれない.
- PotraceをHSL値の階調分ぶん回しているので, 画像が大きすぎたり色の階調数が多いと処理に時間がかかります. 予めリサイズしておくと宜しかろうと.
- 色を合成している都合, 後から色を調整するのが面倒です…(再利用性に乏しい)
- RGB合成と比較し, 格段に表示速度が遅い!!しかも色相値の扱いがデリケートでなかなか思ったような出力結果が得られない. ある意味失敗作と言えるかもしれない.
更新履歴
- 2017/12/01 新規作成
- 2017/12/03 ヒトの目の特性を鑑み, 色相・彩度にぼかしを入れることで品質を向上させる仕組みを取り入れてみた.
- 2017/12/03-2 彩度のぼかしアルゴリズムに選択的ガウスぼかしを採用.
- 2017/12/03-3 選択的ガウスぼかしのバグを修正.
- 2017/12/03-4 色相の調整機構, 入力値修正処理を追加.
- 2017/12/04 彩度の指定にバグが有ったのを修正.
- 2017/12/04−2 彩度の指定をより良いものに変更(hsl関数の利用をrgb関数に変更).
- 2017/12/06 色相値に対するぼかしとアルファブレンディングを除去. 赤付近の色ズレを防ぐ効果がある.
- 2017/12/06-2 色相値の出力品質についてのパラメータを追加.