SVGのpx・mm・ptとPDFページサイズの換算方法

SVGではpx、mm、cm、in、ptを指定できます。一方、PDFはページ寸法を主にポイントで扱います。単位を省略した数値をミリだと思い込むと、A4を作ったつもりでも小さなPDFになります。

SVG2IMGではブラウザーのCSS単位に合わせ、次の関係で換算します。

96 CSS px = 1インチ、72 PDF pt = 1インチ。したがって1 px = 0.75 ptです。

単位の対応表#

この換算はページの物理寸法を決めます。ベクターパスの画質を決めるDPIとは別の話です。

210×297だけではA4にならない#

次のSVGは幅210px、高さ297pxです。

<svg width="210" height="297" viewBox="0 0 210 297">

96 DPI基準では約55.6 × 78.6 mmしかありません。A4を指定する場合は単位を付けます。

<svg width="210mm" height="297mm"
     viewBox="0 0 210 297">

widthとheightが用紙寸法を示し、viewBoxは内部の座標範囲を示します。この例では分かりやすく同じ数値にしていますが、1座標単位が常に1mmという意味ではありません。

viewBoxとページ寸法の役割#

例えば次のSVGを考えます。

<svg width="100mm" height="50mm" viewBox="0 0 1000 500">

PDFページは100 × 50 mmです。図形は1000 × 500の座標で作られ、ページに合わせて縮小されます。

viewBoxを変えると、表示範囲、ズーム、切り抜き方が変わります。widthとheightを変えると、PDFの物理サイズが変わります。

よく使うページ寸法#

PDFビューアーは表示値を丸めるため、0.1mm程度の差が出ることがあります。

カスタムpxを指定した場合#

800 × 600pxを指定すると、PDFは600 × 450pt、約211.7 × 158.8mmになります。Webやスライド用の比率を保つには便利ですが、A4などの規格サイズにはなりません。

印刷サイズが決まっているなら、元のSVGにmm、cm、in、ptを指定し、変換画面では元サイズを選ぶ方が判断しやすくなります。

ページサイズとDPIを混同しない#

ベクターPDFのパスには固定DPIがありません。プリンターの出力解像度に合わせて線が計算されます。画像PDFはピクセルを持つため、有効DPIを計算できます。

有効DPI = 画像の横px ÷ ページ幅(in)

A4の幅は約8.27インチです。2480pxなら約300 DPI、1240pxなら約150 DPIです。

画像PDFへの切り替え時、SVG2IMGは300 DPIを目標にします。ただしブラウザーのメモリ負荷を抑えるため最長辺は4096pxです。ポスターなど物理サイズが大きいページでは、実際のDPIが下がります。

サイズが合わないときの確認順#

1. ルート<svg>のwidth、height、viewBoxを見る。
2. 210と210mmを取り違えていないか確認する。
3. デザインツールがアートボードではなく選択範囲を書き出していないか調べる。
4. 物理単位が入っているSVGでは元サイズを選ぶ。
5. ビューアーの「ページに合わせる」表示ではなく文書プロパティを見る。
6. 最終寸法でテスト印刷する。

印刷入稿では、寸法に加えて塗り足し、トンボ、セーフマージン、CMYK、フォント、PDF/Xの指定を確認してください。SVG PDF 変換ツールはSVGの物理単位をページへ反映しますが、印刷会社固有の入稿条件は専門ソフトで仕上げる必要があります。