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

Inkscapeの画像トレースの前提知識

 このページでは、Inkscapeのトレース機能を使って画像からエッジを抽出する際に必要な前提知識についてまとめたいと思います。

  (参考:画像トレースのパラメータと手順

(2022.11.09更新)

はじめに

 Inkscapeでは、キャンバス上に置かれたビットマップ画像オブジェクトの中に現れている境界線(いわゆるエッジ)を自動的にトレースして線画状の絵(すなわちパスオブジェクト)を生成することができます。

 トレース対象はビットマップ画像オブジェクトで、シェイプオブジェクトやパスオブジェクトは対象になりません。

 変換した結果は、ビットマップ画像オブジェクトとは独立した新規のパスオブジェクトになります。

 Inkscapeを使ってトレースを実行する際には、どんなトレース結果を得たいかに応じて、ダイアログ上で適切なパラメータを指定しないといけませんが、ここにまとめる前提知識があると適切なパラメータを指定することも少し簡単になると思います。

 ここでは前提となる一般的な知識をまとめるところまでにして、Inkscape特有のパラメータ設定方法などのトレース実行手順については「画像トレースのパラメータと手順」でまとめていきます。

 なお、ここで言っている「トレース」は、あくまでも自動的にトレースすることを指しています。一方で、画像を見ながらマウスなどを使って画像に重なるようにパスを描いていくことで境界線を手に入れることも「トレース」と呼ぶことが多いようです。実際、ネットを検索すると、Inkscapeを使ってビットマップ画像の上から手でパスを作成することで「トレース」を行う方法を紹介するサイトを多く見つけることができますが、そちらの「(手動)トレース」については触れないつもりです。

トレースとは何か?

 Inkscapeの解説コンテンツを中心にちょこちょこっと勉強しただけなので、初心者の理解にとどまっているのですが、要するに、ピクセルが並んだビットマップ(ラスター)画像データを解析して、絵としての境界線(エッジ)を抽出することをトレースと呼ぶものと理解しています。

 どうやって境界線を抽出するかとか、そもそも何をもって境界線とするのかとか、抽出した境界線が最終的にどんな形式のデータになるかはソフトウェアによっていろいろありそうですが、Inkscapeにも何種類かの境界線抽出方法が組み込まれています。

 さて、どんなタイプの画像を対象とするのか(写真のような画像なのか、イラストのような画像なのか、など)、どんな境界線を自動抽出したいのかに応じて、トレース実行時のパラメータを設定する必要があるのですが(パラメータをわずかに変えただけで全く異なる境界線が抽出されることもあります)、パラメータの数値からトレース結果を予想するのはなかなか難しくて、ある程度試行錯誤の上でパラメータを決定しなければいけないようです。将来的には試行錯誤のコツもうまく体得していきたいところです。

 Inkscapeでは、抽出した境界線をキャンバスとは別にダイアログ上にプレビュー表示してくれるので、設定パラメータを変えながらうまく絞り込んでいけば、短時間で期待する境界線を入手することができるかもしれません。

画像に関する基礎知識

 ところで、Inkscapeのトレース機能に関する解説コンテンツを読んでいると、そもそものビットマップ画像データ全般に関する知識がないと理解しにくいところがたくさんあることに気付きます。

 そこで、トレース機能を勉強していく中で合わせて得られた、今更な感じのビットマップ画像に関する基礎知識をまずまとめてみようと思います。Inkscape特有のトレース手順については「画像トレースのパラメータと手順」でまとめていきます。

ビットマップ画像

 ピクセルごとの色情報を縦横に並べたような画像のことをビットマップ画像と呼びます。
 「ビット」の「マップ」なので、白と黒だけから成る画像のことをビットマップ画像と呼ぶのかと思っていたら、ラスター画像の別名でこう呼ぶらしいです。Inkscapeでもカラー画像を含めてビットマップ画像と呼んでいます。

明度(明るさ、Brightness)

 RGBで表す色の場合、色の成分の値(R値G値B値)の最大値、または、最大値と最小値の平均値のことで、R値G値B値が1つでも大きければより明るいことになります。
 Inkscapeの解説コンテンツでは、R値G値B値の合計を明度としているとも書かれています。いろんな定義があるのかな。

彩度(鮮やかさ、Saturation)

 純色である度合いを示す指標で、RGBで表す色の場合、色の成分の3つの値(R値G値B値)のバラつきで表し、例えば(最大値-最小値)/最大値で求められ、3つの値がバラバラであればあるほど鮮やかであることになります。

輝度(Luminance)

 人間の目から見て明るく見える度合いを示す指標で、RGBで表す色の場合、色の成分の値(R値G値B値)の所定の重みを使った加重平均値(例えば、0.3×R値+0.6×G値+0.1×B値)を使ったりします。この輝度算出の例をみると、グリーンが強い色は人間の目にはより輝いてみえるのですね。

濃淡

 色の成分の値それ自体(ゼロに近ければ淡い)を示す指標。(しかし、そうだとすると、RGBの場合、「白」はRもGもBも「濃い」ことになるので、日常的な感覚に合ってないようだし、よくわからない・・・)

コントラスト

 濃い部分と淡い部分の差。
 濃い部分と淡い部分の濃度の違いが大きく、かつ、濃度の分布が狭いときに大きくなります(つまり、くっきりしている、ということ)。
 明るい部分と暗い部分の差に基づく場合もあるようです。

色相

 赤や青などの色の種類のことで、よく色相環として表現されます。

トレースで生成するパス

 Inkscapeの画像トレース機能によって生成されるパスオブジェクトについてです。

 トレースによって、画像から抽出した境界線に出来る限りぴったり合致するベジエパス(ベジエ曲線をセグメントとするパス)が生成されます。一回の境界線抽出の結果、画像から複数の境界線が抽出される場合は、複数のパスが生成されます。生成された複数のパスの各々は、サブパスとして、最終的に結合されて新しいパスオブジェクトとなります(「サブパス」やその「結合」については「パスをつなぎ合わせる/切り離す」でまとめています)。

 例えば次のような画像のトレースを実行すると、画像にピッタリ重なるようにパスオブジェクトが生成されます。

 真ん中の絵は見た目にわからないですが、トレースがすでに実行済みで、画像にピッタリ重なったパスオブジェクトが生成されている状態です。重なったパスオブジェクトをドラッグして移動すると、右端の絵のようになります。

 このパスオブジェクトは2つのサブパス(iの文字の上下部分)から構成されています。つまり、2つのサブパスを結合した1個のパスオブジェクトになっています。

 このパスオブジェクトに対して分解操作(分解操作の詳細については「パスをつなぎ合わせる/切り離す」に書いてます)を行うと、それぞれ別のパスオブジェクトとして編集可能にすることもできます。

 普通の画像でもトレースを実行すると、思ったより複雑なパスオブジェクトになる(サブパスの数も結構多い)ので、パスオブジェクトそれ自体の性質や編集方法をあらかじめ理解してから画像トレースを行うようにしたほうがトレース後の修正作業などで色々助けになるかもしれません。