要約：Chromium43とOpera28で、なんか面白いPDFできたよー!
Contents

真面目な要約
HTMLのOBJECTE要素でSVGを読み込み、JavaScriptでvector-effect属性を付加すると、Chromium43とOpera28で印刷時に塗りと線がズレました（ブラウザ上の表示は正常）。昨日、SVGを印刷メニューからPDF化するにはChromiumも結構使えると書きましたが、vector-effect属性があるSVGは除く、と訂正します。

Firefoxはvector-effect属性の有無にかかわらず正常で、SVG印刷は当面こちら中心になりそう。Chromium、Chrome、Opera、Firefox以外は未調査。


実行環境とファイル一式
OS : Windows7 32bit
Browsers : Chromium43, Chrome43, Opera28, Firefox38（いずれもポータブル版）
HTML + SVG + JavaScript : html_svg_js.zip（4ファイル, 4.2MB）

上記ZIPを同じ場所に解凍し、HTMLをブラウザで開く。Chromeではセキュリティ上、デフォルトでOBJECT要素にローカルのSVGファイルを読み込めないため、起動時にオプション--allow-file-access-from-filesを付けます（参考：JavaScriptでインラインフレームをリロードしようとした話）。

ZIPの中身は、先日から昨日までの記事で使ったもの、すなわちPostGIS（地理情報データベース）→ SVG出力 → HTML + JavaScriptで可視化する一セット。当初はvector-effect属性を未使用、というか間違えてg要素に当てて無効になってました。

その状態で昨日の印刷・PDF化の記事を書き、後でvector-effect属性のミスに気付きJavaScriptを修正（一昨日の記事も修正）。で、改めて表示と印刷を確認したら、あれ～Chromiumでズレてるよorz 記事の時系列ともズレて訳分かんなくなってますが、とにかく現状を書くことにしました。


Chromium43とOpera28の結果
まずChromium43から。Chromeもこれと同じ。表示は ↓ のとおり正常です。

↓ 印刷メニューでプレビューすると、プリンタの種別に関わらず塗りと線がズレ。良く見ると、緑色の円のうち左側のいくつかも消えています。これは昨日すでにあった現象。Chromium固有のPDF保存（Save as PDF）で出力した結果が、二つ目の画像（冒頭の再掲）。PDFはこちら（9.5MB）


次にOpera28。Chromiumと同じく表示は正常、プレビューでズレ、印刷しても同じ。ただズレ幅がChromiumより少ないのが謎です。PDFはこちら（8.7MB）


Firefox38の結果
↓ 画面表示、右クリックでフレーム内（OBJECT要素のソースのSVG）を印刷、プリンターでAcrobatを選択、最後に出力結果。プレビュー機能はありません。出力されたPDFは表示どおり正常。ただし昨日書いたとおり、半透明オブジェクトがある領域はラスタライズされました。これはAcrobatの設定によるかも。PDFはこちら（1.2MB）


当面の対策
今回のSVG処理では、全ての線にvector-effect属性を設定。でChromiumとOperaの結果を見ると、線は本来の位置に描画され、塗りの位置がズレている感じ。SVGのコンテナのOBJECT要素にheightやwidthを設定しておらず、そのせいかもしれません。

当面はFirefoxメインになりそう。今回のようにデータ量が多いと動作が遅いですが、SVGが表示どおり印刷されて安心。半透明オブジェクトもベクタでPDF化できれば最高なので、引き続き調べる予定。

どちらとも、何か対策や進展があったら別記事にします。