InkscapeでDesign- XMLエディターで編集する

その他の便利な機能

XMLエディターで編集する

Inkscapeのドキュメントは、『SVG』というベクターグラフィック言語で記述されています。
そして、この『SVG』というのは『XML』という言語をベースにしています。つまり、Inkscapeのドキュメントは『XML』言語を使って記述されているということになります。
Inkscapeのドキュメントを、通常の保存方法である『Inkscape SVG (*.svg)』形式で保存したあと、『メモ帳』のようなテキスト編集ソフトで開くと、文字列がずらずらずらっと記述されていますが、これが『XML』言語です。
ここに、描画したオブジェクトの位置や大きさや色など全ての情報が記述されていて、Inkscapeを立ち上げなくても、この記述内容を『メモ帳』などで編集すれば、Inkscapeのドキュメントを編集することができます。
それを簡単に編集できるようにしたのが、この［XML エディタ］です。

［XML エディタ］にはInkscapeドキュメント上の全ての情報がツリー構造で記述されています。

とりあえず、実際に触ってみます

まずは開いてみます

新規ドキュメントを開き、コマンドバーより［XML エディタ］を開くと、下記のように5行の文字列がリスト表示されます。ここには初期設定の情報が含まれます。

何か描いてみます

矩形ツールで矩形を描いてみます。
すると5行目の<svg:g id="layer1" inkscape:label="レイヤー1">の頭に三角マーク（）が付き、下に<svg:rect id="rect2818">という行が追加されました。

『rect』は矩形オブジェクト（=rectangle）を表します。『2818』は自動的に振られたid番号です。
空っぽだった『レイヤー1』の中に、矩形の2818番が加わったということを表しています。

<svg:rect id="rectXXXX">の行が表示されていない場合は

右側の欄に注目してみます

次に、この<svg:rect id="rect2818">の行をクリックして選択してみます。（行が青く反転している場合は既に選択されています。）
すると、右側の欄にずらずらっと、この『rect2818』に関する情報が表示されました。

高さ（=height）、id番号（=id）、カラーなどの情報（=style）、幅（=width）、位置（=X,Y）という『属性』によって『rect2818』が定義されていることを表しています。

属性を編集・・・線幅を変えてみます

それぞれの属性の行をクリックして選択すると、下部にその属性の種類と値が表示され、編集可能な状態になります。編集後、をクリックすると更新されます。

例えば、線幅を変えたい場合、『style』属性の行をクリックして選択し、下部に表示された値のなかから、線幅を表す『stroke-width:』という記述を探して、数値を入力しなおします。入力後を押すと完了です。

矩形以外のオブジェクトでは？

上記では例として矩形を取り上げましたが、オブジェクトによって定義のしかたが異なるため、属性の項目も変わってきます。
例えば、円／弧ツールで描いた楕円は、下記のように、パスの定義（=ｄ）、id番号（=id）、円の中心位置（=sodipodi:cx、sodipodi:cy）、半径（=sodipodi:rx、sodipodi:ry）オブジェクトのタイプ（=sodipodi:type）カラーなどの情報（=style）の属性によって定義されています。

ツリー構造の見かた

上記でさらっと書きましたが、もう少し具体的に書いてみます。

下記のようなInkscapeのドキュメントを作りました。
[黄色い顔]と、[吹き出し部分]は、それぞれグループ化しています。

これをXMLエディタを開いて見てみます。
上の方にも書いていますが、各行の先頭に付いている右向きの三角マーク（）は、子要素が隠れていることを表しています。クリックすると下向き（）に変わり、隠れていた子要素が表示されます。
そもそも、子要素とは何なのかというと、例えば、オブジェクトをグループ化している場合、『グループ化』を表す行が親要素で、グループを構成している個々のオブジェクトの行が子要素になります。

『レイヤー1』の行（svg:g id="layer1" inkscape:label="レイヤー1"）以下の全ての行のをクリックして、全ての子要素を表示しました。

グループ化は『svg:g id=gXXXX』のように表示されます。今回の場合、”顔”のグループは『svg:g id=g3781』で表されています。
その下の『svg:path』のそれぞれの行は、顔の輪郭、目、鼻、口の各パーツのパスオブジェクトです。みな『svg:g id=g3781』の子要素になっているので、”顔”のグループ『g3781』の構成要素だということを表しています。

その下の『g3828』は”吹き出し”のグループを表しています。吹き出しの形を作っている2つのパスオブジェクトと、『svg:text id=text3834』というテキストオブジェクトから成り立っていることがわかります。

リストの順番はオブジェクトの重なりの順番を表しています。下に行くほど重なり順は上になります。この場合、”顔”のグループの上に”吹き出し”のグループが重なっています。

各アイコンの意味

①：新規の要素ノードを作成

左側の欄の1行分＝1つの『要素ノード』です。
このボタンで、新たに『要素ノード』を追加できます。
例えば、このボタンをクリックして表示されるダイアログに『svg:rect』と入力して［作成］ボタンを押すと、矩形オブジェクトのノードが追加されます。この矩形は、自動的に付けられたID番号以外の情報をまだ持っていないので、描画スペースには何も表示されません。右側の欄で幅（=width）高さ（=height）色（=style）などの属性を設定すると表示されます。

②：新規のテキストノードを作成

文字を入力するためのボタンです。
このノード単独では何も表示できません。色やフォントサイズなどを指定した『svg:text』の子要素として使います。

③：ノードを複製

選択中の要素ノードを複製します。選択中の要素ノードが子要素を持っている場合は、子要素ごと複製され、ID番号だけが新たに振りなおされます。

④：ノードを削除

選択中の要素ノードを削除します。選択中の要素ノードが子要素を持っている場合は、子要素ごと削除されます。

⑤⑥：ノードのインデントを左右に移動

⑤は要素ノードのインデントを左側に、⑥は右側に移動します。
左側に移動すると、子要素から外れ、右側に移動すると、一つ上にあるノードの子要素になります。

⑦⑧：ノードを上下に移動

⑦は要素ノードを上に移動⑧は要素ノードを下に移動します。
これによってオブジェクトの重なりの順序が変わります。ノードがリストの下に行くほど重なり順は上になります。

⑨：属性を削除

選択中の属性を削除します。