SVGで印刷時を想定して素材（A4方眼紙）作成 → Firefox + AcrobatでPDF化 → 原寸出力すると、想定どおりの仕上がりになりました。昨日は「コンビニのコピー機で原寸出力されるか」を確認し、順番が前後しますが今日はSVG作成とPDF化について。実行環境はWindows7 32bit + Firefox40 + Acrobat Pro Xです。
昨日はSVGの中で単位をmmに変換してたけど、viewBoxを使えば済んだ
結果は同じですが、昨日のSVGの作り方は無駄が多かったです。今日と並べると ↓
- 昨日：SVG内に、mmをピクセル単位に変換するJavaScriptの関数を埋め込み。mm → 25.4で割ってインチ → 96を掛けてピクセル。この関数を使い、SVG全体のサイズ、各オブジェクトの位置を印刷用サイズ（mm）からピクセルに換算して指定した。
- 今日：SVGのwidth、heightは指定せず、viewBoxだけ「0 0 210 297」と設定。これでA4縦用紙にPDF出力すれば、SVG内の単位がmmと一致するので換算不要。各オブジェクトの位置もmmの値をそのまま入力すればOK。
今回は方眼紙なので、各オブジェクトを手動で入力せずSVG内のJavaScriptで自動的に挿入しました。具体的には最後のSVGのソースを参照して下さい。
vector-effect属性で線の太さを固定
線種はSVG内のCSSで設定でき、↓ のようにしました。線の太さを0.5ピクセルにし、vector-effect属性にnon-scaling-strokeを指定。これでSVGのサイズによらず幅が常に一定になります。0.5ピクセルというのは特に意味ありませんが、Firefox + AcrobatでPDF出力すると0.36ポイント（0.127mm）になり、細い線としてちょうどいい感じだったから。他の出力方式では違う結果になるかも。
rect, line {
stroke-width: 0.5;
/* 0.5px = 0.36pt = 0.127mm */
/* 1px = 0.72 pt */
/* 1pt = 1/72 inch = 25.4 / 72 mm */
stroke: black;
vector-effect: non-scaling-stroke;
}
↓ 出力したPDFをIllustratorで開き、線幅（0.36pt）を確認したところ。
Firefox + AcrobatでPDF化
↓ 今日作ったSVGへのリンクと、OBJECT要素に入れて配置したもの。未対応ブラウザでは何も表示されないと思います、すみません。SVGのwidth、heightが未設定なので、入れ物（ここではOBJECT要素）に合わせて自動的に縮小表示されて便利。
» SVG（1.83KB）
Firefoxでは、OBJECT要素に入れたSVGを「インラインフレームのコンテンツ」と同様に扱うことができ、右クリックで印刷可能。ただしプレビューはできず印刷ダイアログがすぐに出ます。プレビューが必要ならSVGだけ別ウィンドウで開けばOK。
FirefoxでSVGを別ウィンドウで開くと印刷時の余白設定もできますが ↓ HTMLと違ってSVGでは無視され、常に余白ゼロになるようです。印刷時にいちいち余白を気にしなくていいので、むしろ好都合。
SVGのソース
今日は何だか雑然としたメモですが、要するに「印刷時も想定したSVG + Firefox + Acrobat」という組み合わせが結構便利で、いずれグラフや図解などでも試したいと思い、そのひな型として ↓ のSVGを作ったと、まぁそんなとこです。