以下のような SVG 画像(イメージ)があるときに、これを png に出力するときの話。四つ角は透過している。周りが白くなるのが謎ったのだけど、結局は灰色の border の下に白い下地が同じ大きさで存在していて、なぜか端だけ白によっていったことが原因だった。(たぶんどちらも透過していくことで下地の白が現れるようになってしまったのだと思う。)
これに対して imagemagick の加工で対処しようとしたのが無駄になった記念に書いておく。同じような画像にはなったはずである。
inkscape -z -e /tmp/hoge.png -w 128 tokyo.svg # inkscape のほうが境界がシャキッとするのではじめは inkscape を使う。 ここで端が白い画像ができる。 (1) convert /tmp/hoge.png # (1) \ \( \ +clone -channel alpha -threshold 254 # 白が混ざった無駄な部分(透明度がある部分)を消す。 (2) \ \( \ +clone -background black -channel RGB -alpha remove # 透明な部分を背景色(黒)にする \ -morphology Dilate Rectangle:11x11 # 色を 11x11 の領域で広げる。黒い部分は拡張されないので、四辺に枠の色が浸透する。 (3) \ \) \ -compose DstOver -composite # 2 の上に 3 を重ねることで四辺が角まで同じ色になった。 (4) \ \) \ -reverse -compose CopyOpacity # 初めの画像から透明度のデータのみをコピーして、 4 に重ねる。同じ色に対して透明度が適用されるので同じ色のまま透明になってくれる。 \ -composite png32:hoge.png # png32 としているのは GIMP でうまく透明度が読み込めなかったため。 (5)
- 1
端が白い。
- 2
四辺のアンチエイリアスが消えていることがポイント。
- 3
- 4
四辺がすべて同じ色になっている。
- 5
端っこが綺麗!!すごい!
imagemagick って奥が深いですね。終わり。