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

Inkscapeのフィルタとは何か

 このページではInkscapeのフィルタ機能について紹介していきます。

 (参考:主なフィルタ

 (参考:フィルタプリミティブ要素と光源要素

 (参考:オリジナルのフィルタを作ってみた

 (参考:フィルタの変換過程を調べてみる

 (参考:オブジェクトを拡縮するとフィルタはどうなる?

(2024.10.20更新)

フィルタの基本

 フィルタは、オブジェクトの表示の際に、あらかじめ設定しておいた画像変換処理を実行して、その結果を表示する機能として、SVG形式の標準仕様になっている機能です。InkscapeもSVG編集ツールの一種としてこのフィルタをオブジェクトに設定する機能をサポートしています。フィルタそれ自体はInkscape独自の機能ではありませんが、その編集機能などはInkscapeが独自に提供してくれる機能です。

 フィルタの設定先がビットマップ画像である必要はなく、シェイプであってもパスであっても、オブジェクトの見た目に対してフィルタを適用してくれます。

 SVG形式では、1つのフィルタによる画像変換処理は複数の一連の基本変換ステップから構成されています。

 フィルタが設定されたオブジェクトは、表示する時点でフィルタに定義されている基本変換ステップの順に本来のオブジェクトの見た目に対して画像処理が施されてその結果が最終的なオブジェクトの見た目として表示されます。

 基本変換ステップには複数の種類(20種類ほど)があって、SVG形式の仕様として定義されています。

 それら基本変換ステップはフィルタプリミティブ要素(英語で言えばfilter primitive element)、あるいは単にフィルタプリミティブと呼ばれています。日本語に訳して「原始フィルタ」と呼ぶこともあるようですが、フィルタプリミティブそれ自体はフィルタではないので(primitive filterではなく、filter primitiveなので)、原始フィルタとそうでないフィルタがあるかのような誤解を生じないようにあえてカタカナ表記で書いていきたいと思います。

 このフィルタプリミティブ要素はフィルタを記述するための部品(プリミティブ、つまり「原始的な」もの)であるXML要素(エレメント、<タグ 〇〇〇>と書くアレ)として定義されていて、好きなように組み合わせてSVGデータの中に記述することで、一連の画像変換処理を施すフィルタを自分で定義して(定義したXML要素の例は後述)、オブジェクトに設定していくことができます。

 フィルタはフィルやストロークのスタイルとは違い、オブジェクトの見た目を直接パラメータ(属性)として指定するものではなく、フィルタの定義(<filter>エレメント)の中に一列に並べられたフィルタプリミティブ要素のパラメータ(属性)に従った画像変換をオブジェクトの表示を行う際にダイナミックに実行するものです。オブジェクトを表示するたびに画像変換が行われるので、たくさんフィルタやフィルタプリミティブ要素を設定すると、ドキュメント全体の表示処理が遅くなることもあるようです。

 フィルタの定義の中に並べられたフィルタプリミティブ要素の1つ1つは、変換元の画像に対してシンプルな変換を行った結果を変換後の画像として出力するものです。例えば、単にぼかしを入れた画像を出力するフィルタプリミティブ要素が<feGaussianBlur>としてSVGの仕様で定義されています。そして、複数のフィルタプリミティブ要素の出力と入力を互いにつなぎ合わせることで、複数のフィルタプリミティブ要素に従った一連の画像変換処理を連鎖的に実行して、最後の出力を画面に表示します。

 (参考:SVG形式として標準化されているフィルタプリミティブ要素

Inkscapeのサポート

 オブジェクトをどのように変換して表示させたいかに応じてフィルタプリミティブ要素を組み合わせていけばよいのですが、それをいちいちやっていては大変です。

 Inkscapeでは、あらかじめいい具合にフィルタプリミティブ要素を組み合わせて定義したフィルタが組み込みフィルタ(プリセットフィルタ)として用意されている(しかも結構な数)ので、適用したいオブジェクトを選択しておいてからプルダウンメニューのフィルタの中で使いたいものを選ぶだけで、好きなフィルタをオブジェクトに適用して画像処理結果を表示させるとともに、フィルタを適用している状態のまま標準のSVG形式ファイルに保存することができます。

 また、メニューから「フィルタギャラリー」というダイアログが表示できます。

 フィルタギャラリーでは、プルダウンメニューと同じフィルタ一覧がサンプル画像とともに表示されるので、その中から適用するフィルタを選ぶことも可能です。(「適用」ボタンが無く、クリックのみで適用されるので注意!)

 もちろん、フィルタプリミティブ要素を好きなように組み合わせてオリジナルのフィルタを定義してSVG形式ファイルに保存することも可能です。

 なお、フィルタを適用するときは、適用する前にあらかじめオブジェクトを通常より大きめに拡大(例えば400pxぐらい)しておいてから適用し、その後で元の大きさに戻すのがコツだと思います。どうしてそう思うのかは「オブジェクトを拡縮するとフィルタはどうなる?」に書いてあります。

フィルタの定義の例

 ちなみに、フィルタの定義(SVGファイル内の<filter>エレメント)の例として、Inkscapeのフィルター > ぼかし > ぼかし…というメニューで設定できるフィルタの中身を見てみると、次のようになっています。この中に記述されているfeGaussianBlurfeColorMatrixという名前の要素がフィルタプリミティブ要素に当たります。

    <filter
       height="1.4303909"
       width="1.4499541"
       y="-0.21519544"
       x="-0.22497705"
       style="color-interpolation-filters:sRGB;"
       inkscape:label="Blur"
       id="filter7662">
      <feGaussianBlur
         stdDeviation="2 2"
         result="blur"
         id="feGaussianBlur7656" />
      <feColorMatrix
         values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 50 0 "
         result="colormatrix"
         id="feColorMatrix7658" />
      <feComposite
         in="colormatrix"
         in2="SourceGraphic"
         operator="in"
         id="feComposite7660" />
    </filter>


 この場合は3つのフィルタプリミティブ要素を組み合わせたフィルタになっています。

組み込みフィルタのパラメータ

 組み込みフィルタのパラメータの設定方法についてです。

 Inkscapeの組み込みフィルタの中には、メニューを選択するとすぐにそのフィルタが設定されて、そのフィルタによる変換後の表示に切り替わるタイプのものと、メニューを選択すると簡単なパラメータを指定できるダイアログが表示されて、そこでパラメータを指定して適用ボタンを押すことで変換後の表示に切り替わるタイプのものがあります。

 例えば、次の画面はぼかしフィルタをメニューで選んだときに表示されるダイアログです。

 なお、このような、ダイアログが表示されるタイプのフィルタの場合も、各フィルタの定義に含まれるフィルタプリミティブ要素それぞれのパラメータのうち、ほんの一部の代表的なパラメータを指定可能なだけで、パラメータを全て自由に指定できるわけではありません。

 そのため、メニューからフィルタを選んで設定し、ダイアログ上でパラメータを指定するぐらいでは、なかなか思ったような変換結果にならないことが多いようです。

 そこで、フィルタの定義を自由に編集することができるフィルターエディター(後述)を使えば、SVGの仕様として定義されているフィルタプリミティブ要素のパラメータを自由に変更することができます。

フィルターエディター

 ※フィルターエディターの画面をバージョン1.3のものに書き換えました。

 Inkscapeにはフィルターエディターという名前のダイアログがあって、現在編集中のドキュメントの中で使用されているフィルタの一覧の表示、その一覧から選択したフィルタを構成するフィルタプリミティブ要素の追加や削除やパラメータの変更、新規フィルタの追加などが可能になっています。

 Inkscapeの組み込みフィルタの場合も、編集中のドキュメント内のオブジェクトに一度でも設定した組み込みフィルタであれば(設定した後でオブジェクトから除去したフィルタであっても)フィルターエディターのフィルタ一覧に表示されるので、編集可能になります。

 フィルターエディターはフィルター > フィルターエディターメニューで表示します。

 フィルターエディターはフィル/ストロークダイアログのようなダイアログの一種でもあるので、ダイアログ表示部分の右上にあるプルダウンメニューから選んで表示させることもできます。

 フィルターエディターの画面は次のようになっています。


 ①はフィルタの一覧です。ドキュメント中でいずれかのオブジェクトに設定されているフィルタ(または設定したあと除去されたフィルタ)が表示されます。

 ②は新規フィルタを追加するボタンです。これを押すと、フィルタ一覧にまだ何も定義されていない(フィルタプリミティブ要素が何も含まれていない)フィルタが追加されます。

 ③はフィルタ一覧で選択したフィルタを構成するフィルタプリミティブ要素です。ここに、1つのフィルタを構成するフィルタプリミティブ要素がその順番に沿って表示されます。なお、Inkscapeではフィルタプリミティブ要素のことをエフェクトとも呼ぶようです。(1個のフィルタによる変換のことをエフェクトと呼ぶコンテンツもあるので、この辺りは明確でないように思います。)

 ④はフィルタプリミティブ要素の入出力の流れを定義するコネクション領域です。コネクションを表す線の先端に小さい三角形がありますが、そのフィルタプリミティブ要素への画像の入力を意味しています。コネクションの反対側は画像の出力を意味しています。つまり、1本のコネクションは、画像データがコネクションの矢印に沿って入力元から入力先に入力されることを定義しています。入力元としては、フィルタの設定対象であるオブジェクト自体(ソースグラフィックと呼ぶ)の画像情報の他に、自分よりも処理順の早いフィルタプリミティブ要素を指定できます。

 ⑤はフィルタ設定対象のオブジェクトの各種画像情報です。フィルタプリミティブ要素への入力の入力元としてコネクションの接続対象になります。

 ⑥はフィルタプリミティブ要素を追加を行う部分です。右側のプルダウンメニューから追加したい要素の種類を選ぶと、③の一番下に追加されます。

 ⑦は選択しているフィルタプリミティブ要素の説明を表示させるボタンです。

 ⑧は選択しているフィルタプリミティブ要素に対して指定するパラメータ(属性)です。

オリジナルフィルタ

 組み込みフィルタとは別に、オリジナルのフィルタを作る方法についてです。

 フィルタプリミティブ要素のそれぞれの機能を理解しつつ、それを組み合わせて、行き当りばったりではないちゃんと意味のあるフィルタを作成するのはなかなか難しそうなので、オリジナルのフィルタをフィルタエディタを使って構築することはまあ無さそうではありますが、フィルタエディタの使い方として簡単にメモしておきます。

 まず②のボタンを押して①のフィルタ一覧に中身は空っぽのフィルタを追加します。最初は適当なフィルタ名が付けられているので、フィルタ名の上をクリックして(ファイル名の変更操作の要領で)変更します。

 次に⑥のプルダウンメニューでそのフィルタを構成するフィルタプリミティブ要素の種類を選びます。すると、③のところにその要素が追加されます。フィルタプリミティブ要素の右端に小さい三角形が表されているので、それをドラッグして、他のフィルタプリミティブ要素または⑤の画像情報のいずれかまでドラッグします。そうすると、フィルタプリミティブ要素へのコネクション(画像の入力元と入力先)が設定されます。

 これを繰り返して、最終的なフィルタの出力画像に変換していく手順を定義します。フィルタの出力画像は、③に並んでいるフィルタプリミティブ要素の一番下のものの出力になります。

 小さい三角形のところからもう一度ドラッグすることでコネクションを変更することができます。また、フィルタプリミティブ要素自体をドラッグして上下の順番を入れ替えたり、右クリックして表示されるメニューで削除したり複製したりすることもできます。

 フィルタプリミティブ要素ごとにSVGの仕様で決められているパラメータは⑧のところで設定します。

エディタでパラメータを調整

 フィルタエディタは、オリジナルのフィルタを作るためというよりも、既存の組み込みフィルタの細かいパラメータを調整するために使うことのほうが多いように思います。

 フィルタエディタ上で組み込みフィルタを選択して、フィルタプリミティブ要素を選択して、⑧のところでパラメータを調整します。

 パラメータを調整すると、ダイナミックにその変更がフィルタ設定対象のオブジェクトの表示結果に反映されるので、いろいろ試行錯誤することも可能です。

 組み込みフィルタを新しく設定するときに表示されるパラメータ指定ダイアログだけではいい感じの変換結果にならないときは、このようにして調整します。