Pixelizer
SVG Screenshotに埋め込む画像なんとかならないかと考えていた
アイデア
data:png;base64画像を埋め込む代わりに色がついた文字を表示すればいいのでは？
ラスター画像とベクター画像のいいとこどりできたら最高
写真をsvg pathで書くのは無理
しかし拡縮に強くあってほしい
なぜ文字を表示する？
＝ 色がついたsvg rectを散りばめるのではだめ？
文字を使うねらい
拡大したときにピクセル補完が効く
rect散りばめ作戦だと拡大に弱い
文字だと曲線パーツを容易に導入できて、連続中間色を得られるので拡大に強いはず
着目ドットに隣接ドット色で文字を重ねることで、境界を滑らかにできそう
完全に塗りつぶしな文字を避ければ、3個くらいは重ねられるだろうという予想
ぱ や Q の隙間に異なる色の ・ や i を覗かせられる x, y を直接指定する必要がないのでラク
各行でspanで囲んでおくだけでいい
できた 
遊び方
$ python svg_c.py raw/pancake.jpg "@飯"
文字画像が html/pancake.a.svg として生成される
画像ファイルの各ピクセルを文字列「@飯」で表現する
何文字でもいいが、重ね合わせの性格上多すぎるとぼやける
絵の部位によって文字を変える必要はなく、全ピクセルでこの文字列を使う
入力画像が大きすぎる場合は適当にresizeされます
おすすめ文字
対象画像によって異なるが、経験上このへんの文字はハズレがない
斗 , 飯 , @ , # , 井 , ゑ , Φ , Q , U 着色されてない横縞が現れてしまった場合は
p , q などの下に突き抜けている文字を加えるといい 曲線を含み、各文字を重ねたときに互いに干渉しないかなどを考えながら選ぶ
いっそのことpixelizerに向いているフォントを作ってしまえばいい？
生成物
Pixel Slateで描画が重いので、画像記法にしていない
opacity付きのtext-shadowが悪さしている気がする
スマホ含めて他の端末は問題ないので端末固有の問題？
DPR>2だから？
付属viewページの様子
左はrawを単純に拡大、右がrawから生成した文字画像
width=1000~2000px の拡大にも耐えられる
Gapplinで開いた様子
拡大
クリックして拡大すると
@ を観察できるさらに拡大
@ に 飯 のが重なっているのがうっすら見える 互いに相手が持たない字形パーツを補い合っている
おわり
いまのところ実践可能な使いみちは思いついていない
生成物のファイル容量が想像より大きかった
画像を綺麗に拡大する手法として発展できる？
写真を絵画ふうに変換するツールにはなれそう
画像を文字で表現できるので差分のgit管理や可視化に使える？
とりあえず文字画像Tシャツつくろう
以上、日曜アートでした