crftロゴ

SVGフィルター(G)

このエントリーをはてなブックマークに追加

 ファイル(F)  編集(E)  オブジェクト(O)  書式(T)  選択(S)  効果(C)  表示(V)  ウインドウ(W)  ヘルプ(H)

SVGフィルター(G)

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
静的