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

Inkscapeの不透明度についてのあれこれ

 このページでは、Inkscapeのオブジェクトのスタイルとして設定する「不透明度」に関するあれこれをまとめていきたいと思います。

(2024.07.19更新)

Inkscapeと不透明度

 Inkscapeがメインで扱うデータ形式であるSVG形式には、RGBのような色情報を記述する属性が定義されています。

 そして色情報には赤や青といった混ぜ合わせる色そのものの値(例えば赤=0緑=255青=255など)が含まれるのはもちろんですが、下に重なっている他の色がどのぐらい透けて見えるかを指定する不透明度の大きさも含まれます。

 不透明度は0.0~1.0の範囲でSVG形式データの中で指定可能で、1.0なら完全な不透明(下の色が全く透けてみえない)になります。

 不透明度はフィルにもストロークにもそれぞれ設定することができます。

 なお、Inkscapeは画面上では0~100の数値で不透明度を指定するようになっていますが、データ化する時点で0.0~1.0の値に自動的に変換されています。

 しかしなぜ「不透明度」というちょっと分かりにくい用語を採用したのかなと思います。ドローツールを使う目的からすると、全く透明でない状態のほうが普通で、少しでも透明になっている状態のほうが特殊な効果のように思うので、「透明度」と呼べば分かりやすかったのになあと思います。「不透明度を大きくする」などと言われてもいつもすぐピンとこないです。

不透明度を記述する複数の方法

 ところでSVG形式データの中で不透明度を記述するには複数の方法があります。

 まずRGBのようなカラーコードと呼ばれる値の一部に不透明度を記述する方法です。

 例えばRGBの場合「#FF00FF」のように赤緑青の3つの色の輝度をカラーコードとして記述しますが、この3つに加えて「#FF00FF7F」のように4番目の値として不透明度を記述することが可能です。この4番目の値のことを「アルファチャネル」と呼ぶそうです。RGB以外のカラーモデル(例えばCMYK)でも同じように「アルファチャネル」を記述することができるそうです。

 次にオブジェクトごとに不透明度を設定する方法です。

 この方法ではオブジェクトごとの「opacity: xxx」という属性に不透明度の値を記述します。ここに記述された不透明度はそのオブジェクトのフィルとストロークに共通の不透明度として両方の表示に使われます。

 次にオブジェクトのフィルとストロークのそれぞれで不透明度を設定する方法です。

 この方法ではオブジェクトごとの「fill-opacity: xxx」と「stroke-opacity: xxx」という2種類の属性にそれぞれ不透明度を記述します。

 不透明度を記述可能な場所がいくつもあるので、Inkscape上で不透明度を設定したときにどの方法で不透明度を設定したことになっているのかを把握しておかないと、思ったような透け方の表示にならずに悩むことになってしまうので、注意が必要です。

 Inkscapeで色を設定するための画面もいくつか存在しますが、例えばもっともよく使うであろうフィル/ストロークダイアログの場合は次のような構成になっています。

 不透明度1と示したところで不透明度を指定すると、その値はフィルとストロークのそれぞれ(fill-opacityとstroke-opacityという属性のそれぞれ)に設定されることになります。画面上では「A」と書かれた欄で指定する構成になっているので、カラーコードの中のアルファチャネルを設定しているように見えなくもないですが、実際はカラーコードではなくSVG形式の不透明度属性(fill-opacity、stroke-opacity)のそれぞれに記述されます。

 どちらの属性を設定することになるのかは、ダイアログのフィルタブとストロークの塗りタブのどちらの画面で設定しているかに依ります。

 不透明度2と示したところで不透明度を指定すると、その値はオブジェクトごとのフィル/ストローク共通の不透明度(opacityという属性)に設定されることになります。

 一方でカラーコードのアルファチャネルを画面上で直接設定する機能はInkscapeには無いようです。SVG形式データをテキストエディタのように編集することは可能なので、そこで直接アルファチャネルを記述することは可能です。

2つの不透明度の組み合わせ

 不透明度1不透明度2を組み合わせた結果としてどのような透け方で表示されるのかは少しややこしいです。

 不透明度1不透明度2も100を指定した場合は特に何も起こらない(全く不透明なだけ)ので問題ないですが、例えば両方とも50を指定した場合は結果としてどのような透け方をするのかというと、2つの不透明度を掛け合わせた値(0.5x0.5で0.25)を最終的な不透明度として使って表示します。

 次の例では、左の矩形は不透明度1を50に不透明度2を100にしたもの、右の矩形は不透明度1を50に不透明度2も50にしたものです。右の矩形は最終的に不透明度25(0.25)で表示されているのでさらに透けてみえるようになります。

スポイトツールで設定

 スポイトツールを使うと、あらかじめ選択しておいたオブジェクトの不透明度に、スポイトツールでクリックした位置のピクセルの不透明度を掛け合わせることができます。

 この場合スポイトツールはクリックしたほうのオブジェクトの不透明度1でも不透明度2でもなくそれらを掛け合わせた不透明度をクリックした位置のピクセルの不透明度として抽出して、あらかじめ選択しておいたオブジェクトの不透明度1の値にそれを掛け合わせた結果で不透明度1を更新します。

 例えば、不透明度1を50に設定しているオブジェクトを選択しておいて、スポイトツールで不透明度が50で表示されているピクセルをクリックすると、選択しておいたオブジェクトの不透明度1は0.5x0.5となるので、スポイトツールによる変更後の不透明度1は25になります。

  (参考:スポイトツールの詳細

スウォッチで設定

 特定のオブジェクトの色をスウォッチに登録すると、その色と不透明度(不透明度1)が色見本になります。

 その色見本を他のオブジェクトに設定すると、色と不透明度が両方適用されます。このときの適用後の不透明度1は先に書いたスポイトツールのケースと同じように色見本の不透明度1と設定先のオブジェクトの不透明度1を掛け合わせたものになるので、例えば不透明度1が50のオブジェクトに不透明度50の色見本を適用するとそのオブジェクトの不透明度1は25になります。

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

現時点の不透明度を確認する

 選択したオブジェクトの不透明度がどうなっているのかを確認するには、フィル/ストロークダイアログを表示させるのがもっとも簡単かと思いますが、キャンバスの下側にあるステータスバーの左端でも確認することができます。

 ちなみにこの表示をするかどうかは環境設定で切り替えます。

 色を透明にすると、どのぐらいの不透明度になっているかもここに表示されます。

 不透明度1を1.0より小さくすると(透明にすると)、左側のフィルとストロークのそれぞれの色を示しているところの左半分もそれに合わせて透明になります(背景として市松模様が透けて見える)。

 一方、不透明度2はその右側に数値として表示されます。この例では40%を設定した状態であることが分かります。