You are here: Home » Illustrator » Illustratorcs6、SVGフィルターと保存の解説と使い方

Illustratorcs6、SVGフィルターと保存の解説と使い方

SVGとは

SVGとは(Scalable Vector Graphics) の略で、ほぼAI形式そのままでwebなどで使える画像で2001年あたりから使えるようになりました。ラスタライズ効果とは違い、AIのデータの特徴をいかした、XMLというベクターグラフィック言語で書かれ、拡大縮小しても画質が劣化する事もなく、ファイルサイズも小さく印刷でも使え品質も高いです。ラスタライズしなくてもSVG形式で保存でき、javascriptを埋め込みイベントで音声やアニメーション等の動きをwebサイトに与える事ができます。

以前は専用のAdobe SVG Viewer等のプラグインをインストールしなければ使えませんでしたが現在はcs以降なら自動でインストールされ、今のほとんどのブラウザはHTML内に直接<svg>タグを記述したものを解釈できるようになり、AIから書き出したSVGのデータソースを、そのままコピーペーストして対応できますので、その辺も安心です。 

SVGフィルターの特徴

メニュー→効果→SVGフィルターで項目が現れます。後はAIぼかし_ガウス_4やAIぼかし_ガウス_7などの効果をオブジェクトに与えます。

SVGフィルターを適用した画像をIllustratorの画面で見るとギザギザな状態になることもありますが、SVG形式で保存してwebサイトに表示すると、ギザギザは取れて綺麗に表示されます。また、アニメーション効果を与えた画像もwebにアップしないと効果を確認できません。

スポンサーリンク

SVGフィルターは最後に適用する。


SVGフィルター効果はアピアランスパネルの一番下の項目に来るようにしましょう。オブジェクトにSVGフィルターを適用してアピアランスパネルの一番下にSVGフィルター以外の効果などがあるとそのオブジェクトはラスタライズオブジェクトになってしまいます。

SVGフィルターの簡単なカスタマイズ

SVGフィルターはXMLという言語で書かれていて、XMLを編集すると様々な効果をオブジェクトに適用できます。さらに、違う人が作成したフィルターを読み込む事も可能です。

効果→SVGフィルター→SVGフィルターを適用をクリックすると、上のダイヤログが現れます。編集する場合、 fxと書かれたボタンをクリックすると、SVGフィルターを編集のダイヤログがあらわれます。

上の編集画面を任意で編集してOKをクリックすると、SVGフィルターがオブジェクトに適用されます。

SVGフィルターの読み込み

SVGフィルターの読み込みは、効果→SVGフィルター→SVGフィルターの読み込みをクリックするとSVGファイルを選択ダイヤログが現れるので、ファイルをクリック選択してクリックで適用されます。

SVG形式で保存


SVG形式での保存は、SVGとSVG圧縮(SVGZ)の二つから選びます。SVG圧縮はファイルのサイズを50%以上小さく出来ますが、テキストエディターの編集はできません。
また、cs2からは携帯電話用の画像SVG Tiny1.1形式とSVG Tiny1.1+形式に対応できるようになり、設定できるオプションの種類が増加しました。CS3ではSVG Tiny 1.2形式に対応しました。

スポンサーリンク

スポンサーリンク

コメントを残す