■ Inkscapeのスナッピング(Inkscape 0.45+devel, built Jan 11 2007版)

もくじ

---

■ まずは設定
■ 選択ツールとノードツール使用時におけるスナッピングの挙動のちがい
■ スナッピング設定詳細
□ スナッピング設定詳細 0.46版
□ 選択ツール使用時のスナップポイント
□ 変形(拡大/縮小・ゆがみ)
□ ブラウザによるsvgファイルの見え方
□ グループ化したオブジェクトを斜めに等間隔配置するには
□ ストローク幅 > 0 の時の、選択範囲のズレ
□ パターンを作ってみる
□ 破線の実線と空白部分の長さを揃える
□ アレするとこうなるよ

このページの内容およびダイアログのスナップショットは、Inkscape-0.45pre0-1.win32(Inkscape 0.45+devel, built Jan 11 2007)のもので、Inkscape 0.46dev+devel, built Jun 24 2007以降のバージョンではガイド・グリッド設定・スナッピング設定ダイアログが大きく変更・簡略化されています。


Document Propertiesダイアログでの設定はグローバル設定とは異なり、ドキュメントごとにその内容を保存しているため、別のsvgを開いてもその設定は継承されません。
例えば新規作成(デフォルト)では
Object Snappingが[Snap to object paths] (下図�B)のみ有効になっていて、この設定ではオブジェクト同士のスナッピングはできません。

デフォルトの新規作成や新規作成メニューのテンプレートは、
"インストールパス\share\templates\"
に入っていて、起動時に最初に開くドキュメントのプロパティを変更するには、このフォルダのdefault.svgを上書きします。

必要ならdefault.svgのコピーをdefault.bakなどにリネームして、新規ドキュメントを開いたら設定を変更して"名前をつけて保存"で
インストールパス\share\templates\default.svgを上書きすれば、次回から編集した設定で新規ドキュメントがテンプレートとして開くようになります(ファイルのフルパスを入力しても保存できますが、半角スペースが含まれるパスでもダブルコーテイションで囲う必要はありません)。

default.svgのオススメ設定は、↑のスナップ設定やガイド・グリッドはお好みで、Layer1を"background"にリネーム、backgroundに矩形を描き、Fill色はお好みで(ただし透過色は使わない)、ストロークは無し、矩形を選択した状態でXMLエディタを開き、以下のように値を追加・設定します。
この矩形はページ背景色(=メインウィンドウのキャンバス領域の色で用紙枠内を含む)を変更した時の台紙代わりです。 (sodipodi:insensitive="true" = オブジェクトをロックしてマウスで選択できなくします) こうしておく事で、たとえばキャンバス領域の背景色をグレーに変えても用紙枠内は白いままにすることが出来ます。

このほか、用紙サイズ・デフォルトの単位・ページ背景色(用紙枠内含む)・用紙枠の色・枠の影の色、枠の有無・グリッドの間隔、ガイドの位置、色など、ドキュメントプロパティで設定可能なものは全てテンプレートに保存できます。

"Layer 1"のレイヤー名を"background"などに変更した場合、Layer idが"Layer1"のままだとカレントレイヤー(起動した時のアクティブレイヤー)が"root"になってしまうようなので のようにidを変更して(↑はソース上の表記 以下同じ) のようにすれば起動時や新規作成時に指定したレイヤーがアクティブになります。

テンプレートフォルダには日本語環境では不要と思われる"default.de.svg"(メニューにも表示されない)などがいくつか入っているので、これらは削除しても大丈夫です。普段まず使わないような"web_banner_728x90.svg"などのファイルも除外するとテンプレメニューがすっきりすると思います。
台紙代わりに置いた矩形は、XMLエディタでrootに持っていくこともできます。
XMLエディタの左ペインで<svg:rect id="rect_background">を上にドラッグして<svg:svg id="svg2">に放り込むか、5(ノードを上げる)ボタンで上に持っていくだけです(defsにインデントすると見えなくなってしまいます)。

台紙代わりの矩形をrootに入れてしまえば、カレントレイヤーは初めから白紙になるので良いのですが、任意のレイヤーでオブジェクトを最背面に移動したとき台紙代わりの矩形の背面に廻って見えなくなってしまいます。


スナップ設定もXMLエディタで変更できます。
左ペインから<sodipodi:namedview id="base">を選択すると、右ペインにドキュメントプロパティの内容が表示されます。

なぜに今さらな感じですが用語のおさらい

これらをひっくるめて"パス"と言いますが、単にパスという場合はセグメントの事を指す事が多いようです。また、ここで言うノードはアンカーポイントと言う方が一般的です。

ノードはこの他シンメトリックポイント(ノードを点対称軸にして左右のハンドル長・角度が変化)があります。図の破線部分がbounding box(選択範囲)で、この図はOutlineモードで表示していて実際にはストローク幅が有るのでパスと破線が接していません(ストローク幅=0(なし)のときは破線がパスに接します)。

これは「整列/配置」を使えば済む事がほとんどなので個人的にはあまり使いません。
�@+(�Bor�C)にすると、選択ツールを使用して、ノードの位置に関係なくバウンディングボックスの「角」がスナップします。

バウンディングボックスの「辺」も結果的にはスナップしますが、たとえば矩形のバウンディングボックスをドラッグして拡大し、角を相手のどこかにスナップしたいとき、�@+�Cの設定では「角と相手のノード」がスナップ有効範囲内になければスナップできません。
また�@+�Bの設定では、「角をセグメントに」スナップできますが、バウンディングボックスの中心の矢印をドラッグしても角が相手に着いていない場合スナップできません。
選択ツールでの変形時にスナップできるのは拡大/縮小のときだけです。
歪み/回転モードではどこにもスナップしません。

「テキストをパス上に」をオブジェクトで行う時には�@+�Bをonにすれば可能になります(ただし1個ずつ、手動で)。
また選択範囲の1辺にノードが1つも接していないオブジェクト(例：斜めに歪めた楕円)の選択範囲の角をノードにスナップする場合�@+�C、セグメント上にスナップする場合�@+�Bで選択ツールを使用してスナップできます。

なお�@を有効にしてもノードツール使用時は無意味です。

これと�Cをセットで使うことで Node to Node が可能になります。
ハンドル操作を行う時や、既にノード同士がスナップしているオブジェクトを選択ツールで変形・編集する場合などには、�Bや�Cが有効のままでも�Aをoffにすれば無効になります。

Node to Node は1つのノードを相手のノードにスナップできるほか、オブジェクトのノードを全て選択してドラッグすることで、選択ツールでドラッグしたときと同じように形状を保持したままスナッピングすることも可能です。

�Aの設定はノードツールでも選択ツールでも有効ですが、選択ツールでスナップできるのはスナップポイントだけです。

�A+�Bをonにすると、ノードツール使用時は"1つのノード"またはハンドル(の方向点)が、選択ツール使用時にはスナップポイントまたは変形時の回転軸が、セグメントをレールにしてその上を走るようにスナップします。

※このとき方向点は自分自身が方向を決めているセグメントにもスナップするため、閾値が大きいとマウスでは操作が困難になります。
またマウスでハンドルを操作する時、スナッピングを一時的に無効にするショートカットはありません。

ただし、ノードツールで2つ以上のノードを選択しているときは基本的には Node to Segment はできません。選択中のノードのうち、1つのノードのハンドルが、左右いずれかまたは両方ともハンドル長=0(方向点が自身のノードにスナップしている状態)ならば、ハンドル長0のノードを掴んでいる時に限り、そのノードだけはセグメントにスナップします(不安定)。

2つ以上のノードが選択状態(青色)でも、マウスで掴んでいる(赤色の)方向点はセグメントにスナップしますが、ノードを掴んでいる時はスナップしません。つまり方向点がスナップするのはその方向点がアクティブな時(またはノードと一致する時)だけです。
ノードを鈍角の頂点に合わせるとき・ノードを通るストロークを新たに引く時は必ずoffにしないとズレたりします。

選択ツールを使用して拡大/縮小する時は、スナップポイントがセグメント上にスナップ(斜めに歪めた矩形などは必ずしも角がスナップするとは限りません)、ゆがみ/回転時には回転軸が自分を含めたオブジェクトのセグメント上にスナップします(ゆがみ/回転時、スナップポイントはどこにもスナップしません)。

オブジェクトを2つ以上選択しているとき、回転軸は全体を1つと見た時の選択範囲で重心・辺の中心などを求めますが、セグメントに対してはあらゆる場所にスナップします。グループ化でまとめられたオブジェクトでも同じです。

�A+�Cをonにすると、通常はノードツール使用時のみ Node to Node のスナップが有効になります。
複数または全てのノードが選択状態の時は、選択状態のノードの内どれか1つが相手のノードにスナップします。

ノードツールで選択できるのは1つのオブジェクトだけで、パス連結してあればその全てが、グループ化では1オブジェクト単位での選択になります。
スナップ先のノードに対しては、そこにノードが有れば何処にでもスナップできます。これは選択ツールでも同じです。

選択ツール使用時は、選択範囲の角とノードが一致する場合そのノードがスナップ(ストローク幅 > 0のとき、これは有り得ません)、選択範囲の角を挟む2辺にそれぞれノードが1つ以上接している場合はその選択範囲の角が相手のノードにスナップします。
選択範囲の角のすぐ近くにスナップポイントが有る場合もあるため、�@+�A+�Cをonにするとズレたりします。

選択ツールを使用して拡大/縮小する時は、スナップポイントがノードにスナップ、ゆがみ/回転モードでは回転軸が自分を含めたオブジェクトのノードにスナップします。上に同じく、ゆがみ/回転モードではスナップポイントが全て無効になります。

なお、パス化する前の円または楕円に限り、弧の有無に関わらず中心のみスナップポイントになります。
スナップ先がパス化前の円や矩形の場合は、中心(円/楕円のみ)・弧の開放点・制御点(=パス化したときノードとなるポイント)に対してスナップできます。例えば角を丸めた矩形はスナップされる側の時に限り8ヵ所にスナップできますが、角を完全に丸めて楕円にすると4ヵ所になります。
パス化前の星やポリゴンはスナップポイントが選択範囲の4つ角のみですが、スナップ先の場合はその図形の全ての角にスナップできます。
その他は選択ツール使用時のスナップポイントについて

デフォルトの新規作成ドキュメントにセットされている値(=10)はかなり強力です。スクリーンピクセル数でなく、100%表示の時にスナップが効き始めるピクセル数と思われますが、1000%以上Zoomしてスナップさせるようなときは1以下でも良いかもしれません。選択したノードやオブジェクトがドラッグしても動かない時はスナップが効き過ぎています。

微妙な操作をするときは[Alt]+ドラッグすると一時的にスナップが無効になります(ハンドル操作を除く)。
この数値でObject Snappingの全ての項目の閾値が変わります。

常に有効にすると、ダイアログ上は閾値が50ですが、実際には最大の10000になるため、パスのハンドル操作などはキーボードでしか行えなくなります。一旦onにしてoffにすると閾値が50になってしまいます。

これは普通にonで。ただし選択オブジェクトのWxHがグリッドの間隔x整数倍と一致しなければ非常に合わせ辛くなります。逆に、拡大/縮小時にWやHをグリッドに合わせると便利です。
選択ツールでグリッドにスナップさせる時は、�Fと�Gどちらか1つを有効にした方が良いです。
特にストローク有りのオブジェクトでは、拡大/縮小・変形するときデフォルトではストローク幅も同時に変化するため、バウンディングボックスとスナップポイント(またはノード)が引っ張り合いになりスナップし辛くなります。

これも�@と同じく有効にしてもノードツール使用時は無効です。

なおグリッド設定の[Major grid line every]は、グリッドの分割線ではなく「何本おきにハイライト線を入れるか」なので、大きめの数字にしても全てのマス目にスナップします。

Major grid lineはZoom downしたとき通常のグリッド線色で表示され、Zoom upしてスクリーンピクセルでのグリッド間隔が8ピクセル以上になったときハイライト色で表示されます。
つまりデフォルトのグリッド間隔=1pxでは、Zoom率を801%以上にしたとき初めてMajor grid lineが設定した線色で見えてきます。

ノードとグリッドが一致する事は図形以外では殆どないのですが、正n角形や円を描くときはonにしておくと何かと便利です。
またノードツールを使って、1つのノードをグリッドにスナップさせたいときもonにします。
これも複数のノードが選択されている状態や選択ツール使用時にonになっていると、色んな場所のノードまたはスナップポイントが引っ張り合いになるので目的の場所に合わせ辛くなります。

デフォルトのグリッド間隔は1ピクセルになっていますが、例えばWeb素材などの用途でストローク幅1pxの水平線・垂直線をグリッドに合わせて引くときに、グリッド間隔を0.5pxにしてハイライト線を2に設定、ハイライト線以外のグリッドにベジェ線の始点終点をスナップさせる形でベジェ線を引かないと1pxの線としてラスタライズされません(さらにストロークの端部形状を「四角」に、エクスポートの開始位置・終端位置を「整数px」にする必要がある)。詳しくは解像度のお話参照

例えば、左図は上下共にストローク幅1pxの線を引いてあります。 上はストロークの選択範囲が間隔1ピクセルのグリッドのマス目に一致、下はストロークのノードを同じグリッドにスナップした結果です。

下はラスタデータの最小単位(ピクセル)の境界を跨いで0.5pxずつはみ出ている事になるので、結果、幅2pxのグレーの線としてラスタライズされているのが分かります(上の場合でも端部がデフォルトの「角」になっていると始点終点がぼやけます)。同じように3pxの線ならエッジが0.5ずつはみ出て4pxになります(印刷用途のベクタデータなら気にする必要はありません)。

実際には0.5px刻みのグリッドなんて1600%までズームしなければ見えてこないので、線を引いた後で�Fの設定で1pxのグリッドにスナップ(または座標を直接指定)させた方が作業性は良いです。
また＋の字を引く場合にも、水平線と垂直線の幅が違ってしまう事が有るので、矢印キーでの移動量を0.5pxにしておくと修正が楽になります。

Inkscapeに限らずCGを描く上での基本中の基本的なことですが、ベクターツールではつい忘れてしまう(←オレ)のでここに書いておきます。

またsvgをブラウザで表示する場合、ブラウザの種類によってその見え方が違ってくるので注意しなければなりません(IEとFirefoxでは同じデータを表示しても同じ絵にならない)。

常に有効がデフォなので略

グリッドを表示させてるのにスナップしなかったら意味が無いのでonに。
ただし既にグリッドと一致しているオブジェクトをグリッド表示状態で動かそうとした時、�Dと同様に常に有効がonではマウスでは動かなくなります(ズームアップ作業時)。
合ってないのに動かない・合わない時は、その反対側がスナップしている事が多いです。
グリッドスナッピングも[Alt]+ドラッグで一時的に無効にできます。

�A+�Bの時のように、ガイドをレールにして選択範囲(の角)がスナップします。
ガイドがグリッドと正確に一致しない限り、グリッドを表示したまま(Grid Snappingが有効のまま)使うのは避けるべきです。
これも�@や�Fと同じく有効にしてもノードツール使用時は無効です。

なおガイドの位置やグリッド間隔はダイアログでは1/100刻みの調整になりますが、XMLエディタではいくらでも小数点の桁数を増やせます。適当にドラッグしたガイドの位置は通常1/10万pxまで記録されているため、正確な位置にガイドを挿入したい場合は数値(座標)を直接指定する他ありません。

�A+�Cの時のように、ガイドにスナップポイントやノードがスナップします。ガイドとガイドの交点にスナップできるのは�Kがonのときだけです。

選択ツールでは、図形がパス化前の円(または楕円)に限り、楕円の傾きに関わらず、角やノードではなく選択範囲の重心(対角線の中心点)がガイドにスナップします。このとき円をパスに変換するとスナップポイントにしかスナップしなくなります。

逆に、ノードの位置に合わせてガイドを挿入したい場合、マウスドラッグでガイドをノードにスナップさせることは出来ず、そのノードの座標を正確に調べる必要があります。

XMLエディタのd属性に各ノードの座標が記録されていますが、正直、座標の数値がどのノードの座標なのか読み辛いので、マクロツールでこれを行う物を作ってみました。
詳しくはアレするとこうなるよ(役に立たないTips2)参照。

以下略

全てのスナッピングに共通で、例えばガイドとガイドの交点にノードをスナップする時、片方のガイドにスナップしてからもう一方へ近づけていくと、既に合わせてある方のガイドから剥がれてしまい、どちらか一方にしか合わせられない事があります。

スナップの閾値を調節(値をできるだけ下げる)しても上手くいかない時は、ガイドなら水平・垂直なので1辺に合わせたら[Ctrl]+ドラッグすれば方向が限定(デフォルト=15°)されて動くので剥がれにくくなります。
それでもダメな時は、いっそのこと片方のガイドに合わせたら、そのガイドをスナップが効かない位置まで移動してから[Ctrl]+ドラッグすれば確実に上手くいきます。