SVGを印刷用素材として作成・印刷するひな型（A4方眼紙）

SVGで印刷時を想定して素材（A4方眼紙）作成 → Firefox + AcrobatでPDF化 → 原寸出力すると、想定どおりの仕上がりになりました。昨日は「コンビニのコピー機で原寸出力されるか」を確認し、順番が前後しますが今日はSVG作成とPDF化について。実行環境はWindows7 32bit + Firefox40 + Acrobat Pro Xです。

Contents

昨日はSVGの中で単位をmmに変換してたけど、viewBoxを使えば済んだ
vector-effect属性で線の太さを固定
Firefox + AcrobatでPDF化
SVGのソース

昨日は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を作ったと、まぁそんなとこです。

a4_graph_paper_rev.svgSelect Rawtext Bitbucket

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
<style>
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;
}
rect {
    fill: none;
}
</style>
<script type="text/javascript">
// <![CDATA[
    function set(elem, ary) {
        for (var i = 0, len = ary.length; i < len; i+=2) {
            elem.setAttribute(ary[i], ary[i+1]);
        }
    }

    var svg = document.documentElement,
        ns = svg.namespaceURI,
        rect1 = document.createElementNS(ns, 'rect'),
        line1 = document.createElementNS(ns, 'line'),
        paperWidth = 210,
        paperHeight = 297,
        marTop = 30,
        marLeft = marRight = marBottom = 20,
        n = 20;

    set(svg, ['viewBox', '0 0 ' + paperWidth + ' ' + paperHeight]);

    var limX = Math.floor((paperWidth - marLeft - marRight) / n);
    for (var i = 0; i < limX; i++) {
        var line2 = line1.cloneNode(),
            x = n * (i+1) + marLeft;
        set(line2, [
            'x1', x,
            'y1', marTop,
            'x2', x,
            'y2', paperHeight - marBottom ]);
        svg.appendChild(line2);
    }

    var limY = Math.floor((paperHeight - marTop - marBottom) / n);
    for (var i = 0; i < limY; i++) {
        var line2 = line1.cloneNode(),
            y = n * (i+1) + marTop;
        set(line2, [
            'x1', marLeft,
            'y1', y,
            'x2', paperWidth - marRight,
            'y2', y ]);
        svg.appendChild(line2);
    }

    set(rect1, [
        'x', marLeft,
        'y', marTop,
        'width', paperWidth - marLeft - marRight,
        'height', paperHeight - marTop - marBottom ]);
    svg.appendChild(rect1);
// ]]>
</script>
</svg>