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

Inkscapeのグラデーションのデータ構造

 このページでは、Inkscapeのグラデーションがどのような構造のデータとして記憶されていてグラデーションを設定する操作にどんな意味があるのかをまとめてみたいと思います。

(2024.05.15更新)

 グラデーションの配色などの定義データは塗りつぶす対象であるオブジェクトとは独立に「リソース」としてドキュメント中に埋め込まれています。(参考:塗りつぶし用の部品の詳細

 グラデーションの編集操作はオブジェクトごとにフィル/ストロークダイアログなどから行いますが、Inkscape内部ではオブジェクトごとの属性を変更しているのではなく、各オブジェクトが「リソース」の中から選んで使っているグラデーションの定義のほうを変更していることになります。

 そしてグラデーションはSVG形式として定められているグラデーション要素(<linearGradient>、<radialGradient>または<meshGradient>)を使って定義されます。

 各グラデーション要素の定義内容はフィル/ストロークダイアログ上のグラデーションライブラリの一覧に表示され、その中から選んでオブジェクトの塗りつぶしに使うことができます。(参考:塗りつぶし用の部品の詳細

 データの具体例を示します。

 次のようなグラデーション付きオブジェクトを描きます。

 これをSVGファイルとして保存したときの中身を見てみます。なお細かいところは手で編集して省略してあります。

<svg
  <defs>
    <linearGradient  id="linearGradient1">
      <stop  style="stop-color:#00ff00;"  offset="0" />
      <stop  style="stop-color:#ffff00;"    offset="1" />
    </linearGradient>
    <linearGradient  id="
linearGradient2">
      <stop  style="stop-color:#0000ff;"  offset="0" />
      <stop  style="stop-color:#0000ff;"  offset="0.0994898" />
      <stop  style="stop-color:#ff00ff;"    offset="0.57397968" />
      <stop  style="stop-color:#ff00ff;"    offset="1" />
    </linearGradient>
    <linearGradient
       xlink:href="#
linearGradient1"
       id="
linearGradient4"
       x1="4.6110139"  y1="11.160748"   x2="12.575492"   y2="11.160748"
       gradientTransform="matrix(1,0,0,0.49606298,11.841922,1.53728)" />
    <linearGradient
       xlink:href="#
linearGradient2"
       id="
linearGradient3"
       x1="0"   y1="6.654531"   x2="7.964478"   y2="6.654531"
       gradientTransform="matrix(1,0,0,0.49606298,3.6678519,3.7726476)" />
  </defs>
  <rect
       style="fill:url(#
linearGradient3);"
       id="rect2"
       width="7.964478"
       height="6.6021328"
       x="16.452936"
       y="3.7726476" />
  <rect
       style="fill:url(#
linearGradient4);"
       id="rect1"
       width="7.964478"
       height="6.6021328"
       x="3.6678519"
       y="3.7726476" />
</svg>

 この中に登場しているlinearGradientは「線形グラデーション」と呼ばれるグラデーションを定義するためのグラデーション要素の1種で、色の分岐点の位置やその分岐点に割り当てる色などの属性値を記述します。

 linearGradient要素がいくつか記述されていますが、よく見ると2種類に分かれていることがわかります。

 1つ目のlinearGradientはグラデーションパス上の分岐点の位置(0.0~1.0の値)とその色が記述されたものです。

 2つ目のlinearGradientはグラデーションパス自身の位置(どこからどこまで引いたパスなのか)が記述されたものです。

 分岐点の位置はグラデーションパスの両端を0.0と1.0としたときの相対的な値で記述されますが、グラデーションパス自身の位置はキャンバス上の座標値で記述されます。

 そして、2つ目のlinearGradient(グラデーションパス定義用linearGradient要素)から1つ目のlinearGradient(分岐点定義用linearGradient要素)をそのIDでリンクすることで、まとまった1つのグラデーション定義が出来上がります。

 1つのグラデーションの定義を1つのグラデーション要素で全部記述することもSVG形式の仕様上もちろん可能ですが、Inkscapeではこのように分岐点の定義とグラデーションパスの定義を独立した別々のlinearGradient要素で記述することで、1つの配色のグラデーションを複数のオブジェクトの間で共有して塗りつぶしに使えるようにしたようです。どういうことかというと、各オブジェクトの位置や形は当然異なってくるので、複数のオブジェクトに同一のグラデーションを共有して使えるようにグラデーションパスの座標値だけをグラデーションパス定義用linearGradient要素で記述するようにしたのだと思われます。

 その結果、グラデーションライブラリの中のグラデーションを使って新たに塗りつぶしを行うたびにグラデーションパス定義用linearGradient要素が追加されていきます。そのオブジェクトを削除したときはそこで追加されたグラデーションパス定義用linearGradient要素だけが削除され、分岐点定義用linearGradient要素はそのまま残ります。

 また、同一のグラデーション(グラデーションパス定義用linearGradient要素)を共有しているオブジェクトのうちの1つを選択してグラデーションを編集すると編集後のグラデーションに合わせて分岐点定義用linearGradient要素が追加され、グラデーションパス定義用linearGradient要素からリンクされる分岐点定義用linearGradient要素のIDがそちらに切り替わります。

 ・・・というグラデーション特有のデータ構造とその性質を理解しておくと、グラデーションを編集したときに何が起こるのかも理解できるようになると思います。