最近、SVG ファイルを使って、閉領域にパターン（のビットマップ画像）を流し込んだ画像を作成する事をやっている。基本はポリゴン（多角形）の中をパターンで塗りつぶすだけなのだが、パターンを回転させたり拡大縮小したり、ポリゴンも凸とは限らなかったり（幸い輪郭の交差は無いのだが）で、自分でコードを書くのは面倒だし、元データ（輪郭の）を作るのも面倒そうだ。その点、SVG ファイルなら、Illustrator や Inkscape で作成できるし、パターンを流しこむのも簡単。
という前置きはともかく、SVG 関連で思ったようにいかないことがいくつかある。ひとつは、Inkscape の 64 bit 版が今ひとつ安定しない事。Partha というサイトからダウンロードできるのだが、手元の PC だと、パターンを fill しようとすると落ちてしまう。ということで、今回の目的には使えず。まぁ、win32 版でも一応対応できるデータサイズのようでなんとか。
もう一つは、パターンを流し込んだ際、パターンのタイリングに、微妙な隙間ができること。Inkscape の GUI 上で編集している際は結構顕著にタイル１枚１枚の間に隙間が白い線として見えたり、見えなかったりチラチラすることも。それはともかく、最終 PNG に落とした結果にも、GUI 上ほど酷くは無いが、良く見ると微妙に隙間が空いていることがよくある。Inkscape をコマンドラインで使用して、SVG を PNG に落とす場合でも同様。ちなみに印刷用途なので、パターンの解像度や出力 PNG の解像度は 300dpi あたり。
ただ、IE11 や Chrome 等で SVG を開いた際にもそういう事が起こっているようだ。SVG 自体の問題なのか、SVG のレンダラは結構難しいということなのだろうか。パターン(pattern)の大きさを 0.01% レベルで変えてみて、隙間が空かないかトライアンドエラーして、現在は対処しているが、位置が２〜３ピクセルずれてしまう場合もあって少々困る。
更に謎なのは、アルファチャンネルだけ隙間が空く場合もあること。アルファチャンネルを反映せず表示する画像ビューアでは、特に隙間も無く見えているのだが、Paint.Net や Photoshop で見てみると、隙間が空いていることが。アルファチャンネルだけ編集する必要があって、これはこれで面倒。印刷向けだとアルファチャンネルは要らないので、外してしまうのが一番楽ではあるが。
以前に言及したスケールの問題もややこしいし、なんか、SVG って今後が期待される規格だが、今ひとつ洗練されていない印象が強い。どうなんだろう。
一応メリットもあって、xml エディタがあると、色々な要素の切り貼りが簡単にできるのは便利。特に位置を正確に合わせたいときなどは、コピペして、数値で移動させるとか。ブラウザですぐに見られるのも楽。くらいかな。
