追記(626日)vector-effect属性があるとChromiumで問題あり。詳細はこちら

要約:
新しい処理方法によるSVGを、ブラウザでズームと印刷のテスト。ズームはChromium43Firefox38ともに問題なく、印刷はFirefox38で「フレーム内のみ」が最も良さそう。ただしPDF出力にはいろいろ課題がありました。OSWindows7 32bit。
Contents

Chromium43、Firefox38 それぞれのズーム
どちらも普通のWebページと同様に、Ctrl+マウスホイールやメニューバーから拡大・縮小可能。ズームできる範囲がChromium4325%500%、Firefox3830%300%と、Chromiumの方が広いです。

上がFirefox、下がChromium(冒頭の再掲)。後者で500%まで拡大すると、海岸線の尖りが見える。線幅が太いと、鋭角の頂点でこうなります(Illustratorでもよくある)。SVGでは端点・頂点のスタイルも変えられるので、尖りをなくすことも可能。ズームと関係ありませんが、それに参考となるページを ↓ メモしておきます。

»svg要素の基本的な使い方まとめ(後ろの方、端点と頂点のスタイル指定)

両ブラウザとも、デフォルトでは虫眼鏡的なズーム機能なし。マウスカーソルのある場所を中心に拡大するとか、拡大したい範囲をマウスでドラッグ指定するとか、できません。グラフィックソフトやGISソフトに比べれば仕方ないところ。でも下記のようにズーム関連のアドオンで強化できそうで、いずれ試します。

»Mozilla Re-Mix : Firefoxに高機能ズームボタンを設置できるアドオン「Zoom Page」


印刷というか、本当にしたいのはPDF出力
今回のSVGは単独で使えず、HTMLJavaScriptと一体で機能するもの。これをブラウザ以外で使うには(1)ラスタ画像化(2)ベクタデータ化のどちらかが必要で、前者はスクリーンショット保存、後者はPDFへの印刷が基本になると思います。

(1)は、PC画面の大きさによる制約と、撮ったスクショから必要部分を切り出す手間を除けば、大きな問題はなさそう。一方(2)は、普通のWebページでもPDF出力すると見た目どおりでなく、SVGではなおさら不安。下記のようにSVGの印刷またはPDF出力がすんなり行かない例もあるそうで、実際試してみました。

»InkscapeBD(DVD)インデックスカード作った
»svgの印刷結果をクロスブラウザ化する


Chromium43でのPDF出力
Chromiumは単独でPDF出力機能あり。印刷メニューに現れるSave as PDFがそれです。今回、Acrobat X ProのあるPCで、Chromium単独でのPDF化とAcrobat経由でのPDF化の両方を試しました。

上:Chromium固有(Save as PDF)出力
(6.34MB)
下:Acrobat X Pro経由で出力(996KB)

どちらも、ページ全体の印刷のみ可能。本来、OBJECT要素に入れたSVGはインラインフレーム扱いらしく(下記を参考)フレームのみ印刷もできるはずですが、Chromiumでは不可。

»riaxdnp.jp : HTMLSVGを埋め込む際にハマったこと)

以下、結果について。

• どちらも、ページ全体の印刷のせいか上が大きく空き、左・下側の端が微妙に欠け。
• どちらも、左側の一定範囲で透明オブジェクトが消える(半透明の緑色で乗せたバッファがない)。
• 実はAcrobat経由では、透明オブジェクトがある部分はラスタライズされ、JPEGノイズもあり。
• 一方Chromiumによる出力は全てベクタデータ。その分、サイズが6.34MBと大きい。

今回のSVGに半透明オブジェクトがあるせいか、またはデータ量が多すぎるのか、その両方か、あとAcrobatの設定もあるのか、とにかくAcrobat経由だとラスタライズされて残念。拡大しないと分かりませんがJPEGノイズもあり。

Chromium単独なら、ファイルサイズが大きくなっても全てベクタのまま。でも半透明オブジェクトの一部は、Acrobat経由と全く同様に欠けていました。


Firefox38でのPDF出力
Firefoxには単独でのPDF出力機能がなく、今回はAcrobat経由のみ。またChromiumと違って「フレームのみ印刷」でOBJECT要素内のSVGだけを出力できました。

上:ページ全体を出力
(803KB)
下:フレーム内(OBJECT要素)出力(1.15MB)

以下、結果について。

• どちらもChromiumAcrobat経由と同じく、透明オブジェクトがある部分は全てラスタライズ。
• どちらもChromiumAcrobat経由とは違い、透明オブジェクトが全て描画されている。
• ページ全体の方は、OBJECT要素にheightwidthを未設定なためか、大きさが変。
• フレーム内の方は、用紙の端からきっちりSVGが描画されて良い。これでベクタなら最高なのに。
• 普通の印刷(PDF化でなくプリンタへ)なら、このフレーム内印刷が一番良さそう。


PDF化での課題
いろいろ問題が見つかり、原因の切り分けから始めないと…。ブラウザの印刷設定、Acrobatの設定、半透明オブジェクトの有無、データ量、他のブラウザでの検証、等々。

PDF化に限れば、とりあえず使えそうなのはChromium単独での出力かなぁ。用紙全体の印刷になってSVGの端が欠け、透明オブジェクトの一部が消えるけど、SVGのビューポート指定を変え、透明色を使わなければ何とか。あと「消える範囲」が分かれば対処しやすい。とにかくいろいろ調べて、進展したら別記事にします。