「note」に引っ越し中です。移動したページごとに移動先へのリンクを作っていく予定です。

Inkscapeの塗りつぶし用の部品の詳細(色、パターン、グラデーション)

 このページでは、オブジェクトを塗りつぶす機能である、グラデーションパターンについて、特に分かりにくいポイントに着目して整理していきたいと思います。(オブジェクトの塗りつぶしはInkscapeの各種機能の中でもっとも分かりにくい機能の1つだと思います)

  (参考:不透明度についてのあれこれ

  (参考:オブジェクトと塗りつぶしの連動

(2023.08.20更新)

「塗りつぶし」とは何か?

 Inkscapeにはオブジェクトを塗りつぶす方法として大きく分けて、色(単一色/Solid Color)、グラデーション、パターンの3種類の塗りつぶし方法があります。

 この3種類のうち、グラデーションパターンは、塗りつぶしかた(すなわち模様)を個々のオブジェクトの属性に直接設定したものではなく、個々のオブジェクトとは独立した形で、塗りつぶしかただけを定義した「リソース」と呼ばれる一種の部品データとしてドキュメントデータの一部に埋め込まれたものです。個々のオブジェクトの属性にはその「リソース」に対するリンクが設定されます。したがって1つの「リソース」を複数のオブジェクトからリンクすることによって、複数のオブジェクトを同じ塗りつぶしかたで塗りつぶすことが可能になっています。

 ちなみに「シンボル」や「マーカ」のような、塗りつぶし以外の目的で利用される部品データも「リソース」と呼ばれるようです。

 また、についても、個々のオブジェクトの属性として例えばRGB値を直接設定するのが基本ですが、グラデーションやパターンと同様に「リソース」データとしてドキュメントの一部に色の定義(色見本)を埋め込んでおいて、複数のオブジェクトから1つの色見本部品をリンクすることで共通の色を設定するということができます。

ドキュメントの構造

 個々の塗りつぶし用のリソースは専用のタグ(patternタグやlinearGradientタグなど)を使ったエレメントとしてSVGデータの中に記述されます。そして各オブジェクトの属性(fill属性)などにそれらリソースのIDを記述する(すなわちリンクする)ことでそのオブジェクトのフィルやストロークの塗りつぶしに使います。

 そして、ドキュメントの中で塗りつぶし用のリソースを記述した部分(またはその部分とリンクを張ることで利用できるようにした機能)のことを「ペイントサーバ」と呼びます。「ペイントサーバ」というのはSVG用語で、サーバという名前からネットワークの向こう側にあるサーバコンピュータのことを想像したりしそうですが、ペイント(塗りつぶし)の部品(リソース)を本体(オブジェクト)に提供する(サーブする)という意味で「サーバ」と呼んでいるのだと思います。

 そしてそのペイントサーバを記述するためのSVGエレメント(何種類かある)を「ペイントサーバエレメント」と呼びます。

 塗りつぶし用のリソースについては「ペイントサーバ」という特別な名前が付いていて、 他のリソース(シンボルやマーカ)については「××サーバ」という名前が付いていない理由はわかりません。複数のオブジェクトのスタイルとして共有できる部品データとしての性質は同じなのでそれらも「××サーバ」と呼んでも良さそうに思われますが。

 なお、Inkscapeでは塗りつぶし用組み込みリソースの定義を記述してあるファイルのこともペイントサーバと呼んでいるようですので、少し混乱します。ペイントサーバは各オブジェクトからリンクされるリソースのことを指していると思うので、ドキュメント中にリソースを生成するための元データ(またはその元データが記述されているファイル)自体はペイントサーバではないように思うのですが、詳しい解説コンテンツが発見できないので、そのあたりはあいまいな理解で止まっています。ちなみにSVGのスペックには「a paint server element, which is an element that defines a paint server」とか「A gradient element is one that defines a gradient paint server」のように書かれています。

 というわけで、ペイントサーバを含むドキュメントデータの構造は次のようになっていると理解しました。


 色見本グラデーションパターンも、リソースの一種であるペイントサーバとして色情報や座標値を使って定義されることになります。

組み込みリソースについて

 どの種類のリソースにも、ドキュメント内のリソースの他に、組み込みリソースとしてInkscapeに組み込まれているものがあります。組み込みリソースから選んでオブジェクトに設定された(すなわちリンクされた)リソースはドキュメント内のリソースとしてコピーされます。(なお、グラデーションについて組み込みリソースがありうるのかについては未調査です。できると思うのですが)

シンボルとの関係は?

 Inkscapeには似たような機能に「シンボル」があって、これも個々のオブジェクトとは独立に定義されたシンボルデータを各オブジェクトからリンクして利用するリソースであるという点ではペイントサーバのリソースに似ていますが、ペイントサーバが対象としているリソースは塗りつぶしかたを定義したものに限るようです。

 (参考:シンボル(図形部品)を描く

スウォッチとパレットについて

 Inkscapeには、色見本を指す用語としてスウォッチパレットという言葉が登場します。

 どちらもペイントサーバとして提供される色見本であることは同じだと思います。

 スウォッチは、見本として並べられる色1個1個を指します。スウォッチは、スウォッチダイアログ上に一覧表示されたり、フィル/ストロークダイアログ上に一覧表示されたりします(後者の場合はドキュメントに含まれる色見本だけ)。

 パレットはスウォッチを並べた構造のことを指します。キャンバス下にカラーパレットとして表示されたり、スウォッチダイアログに表示されたりします。言い換えれば、スウォッチダイアログにパレットを表示することでスウォッチ一覧になります。ちなみに、フィル/ストロークダイアログ上に一覧表示されたものはパレットとは呼ばないようです。フィル/ストロークダイアログの一覧は縦一列に並ぶだけなので、現実のパレットと似てないという理由なのかもしれません。

 このように似た用語がからみあって登場するので、全体としてなんとなくすっきり理解した気持ちになれない原因になっているのかも?

Inkscapeのペイントサーバが分かりにくい理由

 Inkscapeの色見本やグラデーションやパターンを使っていて、なんだか分かりにくいなあと思うことが多いです。

 主な原因と思われるのは、ペイントサーバとして提供されるリソースであるという点は共通しているのに、それを扱うためのGUIや用語に統一感がないので、実際に操作していても何が起こっているのか、何が出来て何が出来ないのかを頭の中で整理しにくいことです。

 ネット上にもこの辺りを分かりやすくまとめてくれている解説コンテンツは見つかっていません。

 とはいえ、文句ばかり言っていてもしょうがないので、自分で調べて、できるだけ整理してみようと思います。

ペイントサーバーダイアログ

 ペイントサーバとしてドキュメント中に格納されているリソースを選択して塗りつぶしに使用する手順は、そのリソースの種類によって違っているし、多くの解説コンテンツでも、色見本はこうで、グラデーションはこうで、パターンはこういう手順で使用します、と個々に説明するに留まっています。この「Inkscape覚え書き」自身もそうです。

 でも、実はペイントサーバ全体として3種類のリソースをまとめて一覧表示して選択可能にしてくれる画面があるのです。

 それが「ペイントサーバー」(そのものズバリ)という名前のダイアログです。

 ダイアログ表示エリアの右上にあるボタンをクリックして、表示されるダイアログ一覧から「ペイントサーバー」を選択すると、次のようなダイアログが表示されます。オブジェクト > ペイントサーバーメニューでも同じように表示されます。

 このダイアログには、3種類のリソースがまとめて表示されていて、好きなものを選んで塗りつぶしに使うことができます。組み込みリソースも表示されます。

 塗りつぶしたい対象のオブジェクトを選択しておいて、変更というメニューで、フィルストロークかを選び、使いたいリソースをクリックすると、そのリソースを使った塗りつぶしが実行されます。(ここで、ストロークの場合はシフトキーを押しながらクリック、という手順にしておけばもう少し統一感が増していたかもと思ったりします)

 このダイアログには、ドキュメント内のスウォッチ、ドキュメント内のグラデーション、ドキュメント内のパターン、組み込みのパターンが一覧表示されます。

 組み込みのスウォッチ、組み込みのパターンは一覧表示に含まれません。これが可能であればペイントサーバの機能が1つのダイアログに統合されて分かりやすくなるかとも思うのですが。

 また、サーバーというメニューですべてのペイントサーバーに替えて現在のドキュメントを選択すると、現在編集中のドキュメントに含まれているペイントサーバーだけが一覧表示されます。

 サーバーというメニューには他にも次のような選択肢があります。


 ちょっと横道に逸れますが、このメニューのPatternsHatchesというのはSVG形式でのタグの種類を表しています。SVGではパターンの定義をpatternエレメントに記述しますが、平行線を繰り返し描いたようなハッチングパターンについてはSVGのバージョン2でhatchエレメントに記述することが検討されているそうで、Inkscapeの組み込みパターンにはpatternエレメントで記述されたものとhatchエレメントで記述されたものがあるので、その一方だけを一覧表示するメニューになっています。ちなみに、現在のドキュメントに含まれているパターンはPatternsを選んだときもHatchesを選んだときも一覧表示されません。Patternsのほうで表示されるほうが自然だと思うのですが。

 なお、ペイントサーバーダイアログには、各リソースの削除や編集を行う機能がありません。スウォッチダイアログなどにはあるので、こっちにもあったら便利かなあと思います。

 ペイントサーバーダイアログと、リソースの種類ごとに用意されている画面には、それぞれに可能な操作と不可能な操作とがあるので、うまく使い分けていく必要がありそうです。

 ここからは、リソースの種類ごとに用意されている画面の操作手順をペイントサーバと関連させつつまとめていきます。

スウォッチ(色見本)

 スウォッチ(色見本)は、スウォッチダイアログ、カラーパレット、フィル/ストロークダイアログに表示されます。

 スウォッチダイアログは表示 > スウォッチメニューで表示されます。


 スウォッチダイアログの右下のボタンを押すと、表示するパレットを切り替えることができます。

 カラーパレットの場合も、カラーパレットの右端にある同じようなボタンを押せば表示するパレットを切り替えることができます。

 このとき、パレットの一覧がメニューとして表示されますが、一番上の「Auto」という名前のパレットが現在のドキュメントのペイントサーバとして記憶されているスウォッチを並べたパレットで、それ以外のパレットが組み込みのパレットになります。

 フィル/ストロークダイアログで、選択しているオブジェクトのフィルやストロークの色を現在のドキュメントのペイントサーバ群に追加で登録するときは、塗りつぶしのタイプを切り替えるボタンに並んでいるスウォッチボタンをクリックします。

 すると、選択しているオブジェクトの色がペイントサーバとして登録され、他のすでに登録済みのスウォッチとともに一覧表示されます。(なお、この一覧には「スウォッチのフィル」というラベルが付けられていますが、意味は特になさそうです。)

 このとき、たった今登録した色のスウォッチが選択されている状態になっていますが、他のスウォッチに選択を変えると、たった今登録したスウォッチはペイントサーバに登録したままで後から選択したスウォッチの色での塗りつぶしが行われます。新しいスウォッチの登録と同時に既存のスウォッチの選択が可能になる画面なので、ちょっととまどいますが。

 選択しているスウォッチの色は、フィル/ストロークダイアログで変更できます。

 右端に「#」という欄がありますが、これは各スウォッチを使用して塗りつぶしをしている場所(フィルとストロークはそれぞれ1個と数える)の数を示しています。この例では、たった今登録したスウォッチ以外はどのオブジェクトのどのフィルにもストロークにも使われていないことがわかります。

 2個以上の場所で使用されているスウォッチの色を変更すると、そのすべての場所の塗りつぶしが変更後のものに変わります。塗りつぶしに使っているリンク先のスウォッチが変更されたのだから、これは当然です。(この効果がスウォッチの利点の1つであると解説しているコンテンツも多いです。実際は同じスウォッチを使っていることを意識していないために思いもしない場所の色も一緒に変更されてしまってびっくりすることもあります。)

 現在のドキュメントのペイントサーバ群に登録されているスウォッチは、次のようにスウォッチダイアログ(やカラーパレット)のAutoパレットにも表示されます。ただし、登録後に改めてスウォッチダイアログを表示し直さないとスウォッチの一覧に反映されません。(これは将来修正されると期待しています)


 スウォッチダイアログのAutoパレットでスウォッチ一覧を表示して、変更したい色を右クリックして編集メニューを操作すると、フィル/ストロークダイアログに自動的に切り替わってそのスウォッチの色を変更できます。ただし、スウォッチダイアログまたはカラーパレットの上から塗りつぶしに設定したスウォッチに限ります。それ以外のスウォッチは編集メニューを操作することはできますが、何も起こりません。(これも将来修正されると期待しています)


 同様に削除メニューを操作すると、そのスウォッチが現在のドキュメントのペイントサーバ群から削除され、そのスウォッチを使っていたオブジェクトの塗りつぶしは、削除したスウォッチと同じ色のグラデーションに強制的に変更されます。(内部の話になりますが、ペイントサーバ内のスウォッチはグラデーションと同じSVGタグを使って格納されているので、スウォッチの削除時にそういう動きになるのだろうと思いますが、不思議な動きなのでとまどいます)


 なお、スウォッチ一覧の「#」の欄に、そのスウォッチを使用して塗りつぶしを行っている場所の数が「0(ゼロ)」と表示されている場合、ファイル > ドキュメントを整理メニューを操作すれば削除してもらえそうに思いますが、パターンやグラデーションと違ってたとえ「ゼロ」でも削除はされません。(これも将来修正されると期待しています)

 不要なスウォッチを削除したい場合は、そのスウォッチの「#」欄がゼロであることを確認してから削除メニューを操作するのが良さそうです。

 (参考:独自のカラーパレット/スウォッチダイアログを作る

グラデーション

 グラデーションの一覧はスウォッチダイアログ、フィル/ストロークダイアログに表示されます。

 グラデーションにはInkscapeインストール時の組み込みのものがありません。

 フィル/ストロークダイアログで、選択しているオブジェクトのフィルやストロークをグラデーションに切り替えると、同時にそのグラデーションが現在のドキュメントのペイントサーバ群に追加で登録され、次のようなグラデーションというラベルの付いたボタンを押すと表示されるグラデーションライブラリ(現在のドキュメントのペイントサーバ群に登録されているグラデーションの一覧)に追加で表示されます。

 このとき、たった今登録したグラデーションが選択されている状態になり、さらに他のグラデーションに選択を変更すると、たった今登録したグラデーションはペイントサーバ群に登録したままで後から選択したグラデーションで塗りつぶしが行われます。新しいグラデーションの登録と同時に既存のグラデーションの選択が可能になる画面なので、ちょっととまどいます。

 選択しているグラデーションの色や色フェーズなどは、フィル/ストロークダイアログで変更できます。

 (参考:グラデーションを作る

 (参考:グラデーションのデータ構造

 グラデーションライブラリの画面の右端に次のように「#」という欄がありますが、これは各グラデーションを使用して塗りつぶしをしている場所の数を示しています。この例では、たった今登録したグラデーション以外はどのオブジェクトにも使われていないことがわかります。

 2個以上の場所で使用されているグラデーションの色などを変更すると、そのすべての場所の塗りつぶしが変更後のものに変わるかと思いきや、グラデーションの色などを少しでも変更すると、変更後のグラデーションが新たなグラデーションとして自動的にペイントサーバ群に追加されるので、選択中のオブジェクトの塗りつぶしだけが変更後のものに変わります。ここはスウォッチとは違うところです。(同じ動作でも良かったんじゃないかとも思うのですが)

 グラデーションライブラリのダイアログの下の方に「+」と「-」の2つのボタンがあります。

 「+」を押すと、選択中のグラデーションの複製が作られて、グラデーションライブラリの1つ下に追加されます。

 グラデーションが2個以上ペイントサーバ群に登録されていて、かつ、選択中のグラデーションの「#」の欄が「1」の場合(すなわちそのグラデーションが設定されている場所が1つの場合)は「-」を押すことができて、そのグラデーションがペイントサーバから削除されるとともに、選択中のオブジェクトのグラデーションが自動的に別のグラデーションに変更されます。グラデーションが1個しかペイントサーバ群に登録されていない場合や、選択中のグラデーションが2個所以上で使われているときは「-」ボタンを押すことはできません。なお、「#」の欄に「0」と表示されているグラデーションを「0」のままで選択することはできない(選択したとたんにそのグラデーションが設定されて、必ず「0→1」になるから)ので、どこにも使われていないグラデーションについて「-」ボタンを押すことはもちろんできません(なんとややこしい動作なのだろう?)。

 また、グラデーションライブラリの「#」の欄に、そのグラデーションを使用して塗りつぶしを行っている場所の数が「0(ゼロ)」と表示されている場合、ファイル > ドキュメントを整理メニューを操作すればまとめて削除されます。

グラデーションをスウォッチとして登録

 単一色(Solid Color)と同じように、グラデーションもスウォッチとしてペイントサーバ群に登録することができます。スウォッチに登録しておけば、スウォッチダイアログやカラーパレットに表示され、そこから選んでオブジェクトの塗りつぶしとして設定することができるので便利です。(すでに書いたように、ペイントサーバダイアログからはスウォッチとして登録していないグラデーションも選択可能なので、ペイントサーバダイアログから設定しても良いです。)

 手順は単一色のときと同じで、グラデーションを設定してあるオブジェクトを選択して、フィル/ストロークダイアログのスウォッチボタンを押します。

 そうすると、次のようにグラデーションもAutoパレットにスウォッチの1つとして追加されます。その代わり、グラデーションライブラリからは削除されます。


 スウォッチ化されたグラデーションを塗りつぶしに用いる場合も単一色のスウォッチと同様です。設定したいオブジェクトを選択しておいて、スウォッチダイアログやカラーパレットからグラデーション状のスウォッチをクリックします。


 すると、グラデーション状のスウォッチが塗りつぶしに用いられます。


 一見まったくグラデーションになっていないように見えますが、スウォッチから設定した直後のグラデーションは、そのグラデーションパスがオブジェクトからはずれた位置に初期化されてしまっているからです。グラデーションツールを使ってグラデーションパスを表示してみると、次のように変なところにグラデーションパスが配置されていることがわかります。


 グラデーションパスをドラッグしてオブジェクトに重なる位置まで移動すれば、次のようにグラデーションがちゃんと設定されていることがわかります。

 なお、放射グラデーションやメッシュグラデーションはスウォッチとして登録することはできないようです。登録はされるのですが、放射やメッシュの性質は失われます。

パターン

 パターンの一覧は、フィル/ストロークダイアログに表示されます。

 パターンには、現在のドキュメントのペイントサーバ群に登録されているものと、Inkscapeインストール時の組み込みのものがあります。

 何らかのパターンで塗りつぶしたいオブジェクトを選択して、フィル/ストロークダイアログのパターンボタンを押すと、次のようなパターンフィルという名前の付いたプルダウンメニューが表示され、さらにそのメニューから1つを選択するとパターンの一覧がメニューとして表示されます。


 パターンは、グラデーションと異なり、パターンボタンを押したときに新しいパターンとして登録されるという手順ではなく、とりあえずパターンの一覧の一番上に表示される既存のパターンが自動的に設定されます。

 もちろん、パターンの一覧から別のパターンを選択すれば、それに切り替えることもできます。

 新たなパターンを現在のドキュメントのペイントサーバ群に登録する手順はスウォッチやグラデーションとは全く異なります。詳しくは次のページで。

 (参考:パターンを使って塗りつぶす

 また、パターンの場合、スウォッチやグラデーションのように、何個所で用いられているのかを示す数字が表示されません。残念ながらペイントサーバダイアログのほうでも表示されません。

 したがって、現在のドキュメントのペイントサーバ群に登録されているパターンのうち、どのパターンが全く使われていないパターンで、どのパターンがファイル > ドキュメントの整理メニューを操作したときに削除されるパターンなのかは簡単にはわかりません。

 パターンを直接指定して削除する手順や、指定したパターンの内容を直接変更する手順もないようです。

塗りつぶし用の部品の詳細のまとめ

 ・・・というように、色見本(スウォッチ)、グラデーション、パターンという3種類のリソース(塗りつぶし用部品)を新規登録したり、選択したり、修正したり、削除したりする操作手順は3種類の間でバラバラで、ペイントサーバ群から提供される部品であるという共通点を理解していたとしても、なかなか慣れるまでが大変だなあという印象です。