SVGフィルター(G)

  • SVGフィルターを適用…
  • SVGフィルターの読み込み…

  • AI_ぼかし_ガウス_4
  • AI_ぼかし_ガウス_7
  • AI_アルファ_1
  • AI_アルファ_4
  • AI_シャドウ_1
  • AI_シャドウ_2
  • AI_ピクセルプレイ_1
  • AI_ピクセルプレイ_2
  • AI_ベベルのシャドウ_1
  • AI_乱気流_3
  • AI_乱気流_5
  • AI_木目
  • AI_侵食_3
  • AI_侵食_6
  • AI_涼風
  • AI_膨張_3
  • AI_膨張_6
  • AI_静的

 SVGはファイルフォーマットの種類の名前でScalable Vector Graphicの略です。

 このcrftのサイト全体のロゴマークもSVGファイルが貼り付けてありますが、非常に軽量に取り扱えるのでウェブで多用されるようになってきています。そのSVGファイルにはフィルター機能もあって、本来はxmlで指定していきます。

 IllustratorのフィルターにあるSVGフィルターはこれらの機能をIllustratorの中で再現できるようにしているものだと思えばよいと思います。

 フィルターメニューの中が入れ子になっていて、またフィルター群があるようなイメージです。

 SVGフィルターを実行したオブジェクトをSVGで保存すると、フィルター部分はラスタライズされる旨の警告が表示されます。

 フィルターには値を制御するようなパネルはありませんが、SVGフィルターパネルの中にあるfxボタンをクリックするとスクリプトな内の数値を編集することができます。

 たとえばぼかし_ガウス_4を選択して、fxボタンをクリックすると以下のようなスクリプトが表示され、編集することも可能です。

<filter id="AI_ぼかし_ガウス_4"><feGaussianBlur stdDeviation="4"></feGaussianBlur></filter>

実際のところどういう状態でウェブに実装されるのか、よくわかりませんが下に実際にSVGファイルとしてサンプルを張り付けておくので参考にしてください。フィルターは透明度情報ももっているので、背景に色をつけておきます。

Illustratorでは正しく表示てきませんという警告の出るフィルターもあります。

ピクセルプレイ1 ピクセルプレイ2

ぼかし ガウス4
ぼかし ガウス7
アルファ1
アルファ4
シャドウ1
シャドウ2
ピクセルプレイ1
ピクセルプレイ2
ベベルのシャドウ
乱気流3
乱気流5
木目
浸食3
浸食6
涼風
膨張3
膨張6
静的