お絵描きソフトInkscape(インクスケープ)の使い方を初級レベルから上級レベルまで広く紹介しています。
情報追加のリクエストや分かりにくい点があれば下のCONTACTフォームからどうぞ。

InkscapeでviewPortとviewBoxを設定する

 このページではInkscapeのviewPort(ビューポート)とviewBox(ビューボックス)というパラメータについて調べた結果をまとめてみたいと思います。

  (参考:ページツール

(2024.10.20更新)

 viewPortviewBoxはどちらもSVG形式として標準化されているパラメータです。1つのSVG形式データに含まれている絵図のうち、どこからどこまでの絵図をどんな大きさで表示するかを指定するものです。

 編集対象の絵図全体に対して表示対象の絵図の切り取り方を独立に(いつでも変更可能に)指定できるにしよう、言い換えるとデータの内部の座標系と表示するときの座標系とを分けるようにしようという意図なのでしょうか。

 viewPortは1つのSVG要素(<svg> </svg>で囲われたところ)の表示先(画面など)の四角い領域のことで、viewBoxはそのSVG要素の中の絵図のうちどの範囲の絵図をviewPort内に表示するかを示す四角い領域のことです。

 SVGでは次のようにviewPortの大きさとviewBoxの位置/大きさを記述します。

<svg
   width="400"             ←viewPortの幅
   height="400"            ←viewPortの高さ
   viewBox="50 0 100 100"  ←viewBoxの位置と高さ

 これらを記述すると、描いた絵図のうちviewBoxの内側のものだけがviewPortの内側に表示されます。viewBoxとviewPortの大きさが違う場合は表示時にちょうどviewPortの大きさ一杯になるように拡大または縮小されます。(縦横の比率は保たれるようですが)

 例えば編集時には「100px × 100px」のような現実の大きさで絵図を描き、それをWebブラウザで表示させるときは一部分だけ切り出して小さく縮小して表示されるようにviewBoxやviewPortを小さめに設定するようなことが可能です。

 InkscapeでもこのviewPortとviewBoxを設定することができます。

 つまり、Inkscapeのキャンバス上の絵図をSVG形式データとしてInkscape以外のソフト(例えばWebブラウザ)で表示するときに、その絵図のどの範囲をどんな大きさで表示するかを指定することができます。

 ただしInkscapeの場合、「絵図のどの範囲をviewBoxにするか」を指定してから次に「そのviewBoxの内側をどんな大きさのviewPortに表示するか」と指定するという(ごく自然な)流れでなく、先に「どんな大きさのviewPortに表示する絵図を編集しようとしているか」を指定して次に「そのviewPortにぴったり収まるviewBoxの範囲」を指定する(そうすることで個々のオブジェクトの位置を記述する座標値の単位が決まる)という逆の流れになっています。

 このInkscapeの流れではviewPortとviewBoxの2つのパラメータの目的からズレているようにも感じるのですが、すこし想像してみると、InkscapeではviewPortとviewBoxを「ページ枠」として扱うという方針をとったのではないかという気がします。そういう流れを採用することで、Inkscapeは表示させたいページの大きさ(表示時の大きさ)をまず決めてから編集を開始し、ファイルに保存する際の各種座標値をそのページの大きさから逆算した値にしようとしているのではないかと思います。

 具体的には、Inkscapeまずドキュメントのプロパティの「フロントページ」という項目でviewPortとviewBoxを設定します。

 まずviewPortの「幅」と「高さ」を指定します。ここには最終的に表示される領域の大きさ(例えばA4の「幅」「高さ」)を指定します。

 例として幅を100mm、高さを50mmにしてみます。最終的に表示される大きさもこれになります。

(注意!)Inkscapeのキャンバス上での表示もこの幅と高さになります。InkscapeのキャンバスもviewPortの指定に当然従っているということでしょう。

 ここで、通常はviewPortとviewBoxの座標系を異なるものにする必要はない(見た目の座標値とデータ内部での座標値は普通は同じにする)のでドキュメントのプロパティの画面上ではviewBoxのほうの設定は表示されていませんが、表示するには次のように「ビューボックス」というラベルのところをクリックします。

 するとviewBoxの値が表示されるようになります。

 デフォルトでは「尺度」が1.0なので、viewPortとviewBoxの大きさは同じになっています。つまりオブジェクトの位置

 次に「フロントページ」の「尺度」を指定します。この「尺度」はviewBoxの「幅」と「高さ」の値を何倍したらviewPortの「幅」「高さ」(キャンバス上のページ枠の大きさ)になるかを指定します。「尺度」を指定すると、その「尺度」に応じたviewBoxの「幅」「高さ」が「ビューボックス」と書かれている欄に自動的に設定されます。分かりにくいですが、要するにviewPortの「幅」「高さ」に対して「尺度」を使った逆算を行ってviewBoxの「幅」「高さ」を決定しているということです。

 ちなみにviewBoxの「幅」「高さ」のほうに直接数値を入力することもできます。その場合はすでに指定済みのviewPortの値との比率が「尺度」の値として自動的に設定されます。キャンバス上に描くオブジェクトの位置を記述する座標値を現実の大きさで設定したい場合はこちらの手順でviewBoxの大きさを指定するほうが分かりやすそうです。

 例では見た目の座標値をデータ内部の座標値の2倍になるようにしてみます。「尺度」に2.0を指定するとviewBoxのほうの値が自動的に半分(例えば幅が100.0→50.0)になります(個々のオブジェクトの位置を記述する座標値の単位が見た目の座標値の半分になります)。

 次に必要ならviewBox(ビューボックス)の左上の位置を指定します。左上の位置は「X」と「Y」で指定します。こちらは自由に指定できますがviewBoxの座標値を並行移動する利点はあまりないようにも思うので「0」のままにすることがほとんどではないかと思います。

 こうやって指定したviewPortが最初のページ(1ページ目)のページ枠になり、保存されるSVGデータの中の各オブジェクトの座標値はviewBoxの大きさに沿った値(キャンバス上での見た目の座標値の半分の値)になります。

 試しにこのページ枠(viewPort)と同じぐらいの大きさの矩形を描いてみます。当たり前ですが幅と高さはページ枠とほぼ同じもの(94mm ✕ 43mm)になります。

 これをSVGファイルに保存してみると、次のようなデータになっていることが分かります。描いた矩形の幅と高さはInkscapeの画面上で設定されている幅と高さの半分になっています。

 SVGデータを常にviewPortを介して編集したり表示したりするのであれば、SVGデータ内の座標値がどんな値であろうが構わないようにも思えますが、SVGデータ内の座標値のほうが意味のある値であったり、SVGデータ内の座標値を変えることなく表示時の大きさのほうを変えたい場合などはviewPortとviewBoxの設定を異なるものにする(つまり「尺度」を1.0以外のものにする)意味もあるのかもしれません。

 なお、個々のオブジェクトの座標値が自動的に書き替わるのを止めさせたい場合は尺度入力欄のすぐ右側にある「表示倍率にリンク」ボタンをクリックして、「●」の表示に切り替える(すなわちリンクが切れている)状態にします。そうすると尺度を使って個々のオブジェクトの座標値を逆算する処理は行われず、座標値は自動的に書き替わらなくなります。ちなみにしたの画面はリンクがされている状態です。