ベクター・グラフィックスは、レンダリングをクライアント側で行うためすばやくダウンロードできる利点があります。けれども、多くのデザイナーは、表現力豊かで質感と立体感のあるグラフィックを得るためにビットマップ形式を利用しています。こうしたアプローチのデメリットは、全般的にラスター・データの読み込みを、Webサイトにある他のデータと同じ速度に保つのが一般に難しい点にあるといえます。ボタンのタイトルを変えるだけの作業にも、元の画像エディタまで戻ってから、再度ファイルをWeb用に書き出すことになってしまいます。

SVGのフィルタ効果を使えば、表示されるベクター・グラフィック画像を、おなじみのさまざまなフィルタ効果を使って作成することができるのです。この機能のおかげで、Web用のアートワークの制作も、クライアント側でかんたんに生成と変更が可能となるような形で行えます。つまり、あなたの作ったベクター・アートワークの内容をダイナミックに生成し、その後、高度なフィルター効果を適用できるということです。さあこれで、コンパクトなベクター・グラフィック、スクリプト化可能なテキスト・コンテンツ、レンダリングしたフィルタ効果のある最高のツールを手にすることができるのです。

フィルタ効果は、 関連づけられたID付きの<filter>エレメントで定義されます。フィルタ効果は<filter>エレメントを参照する"filter"プロパティのあるエレメントに適用されます。以下にご紹介するのは、その例です：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 03March 2000//EN"
"http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">
<svg width="4in" height="3in">
	<defs>
		<filter id="CoolTextEffect">
		<!-- Definition of filter goes here -->
		</filter>
	</defs>
<text style="filter:url(#CoolTextEffect)">Text with a cool effect</text>
</svg>

フィルタ効果にとって重要な２つの属性とは、SourceGraphicとSourceAlphaです。SourceGraphicとは、<filter>エレメントの元の入力を指します。つまり、フィルタ効果の適用対象となるグラフィック・エレメントです。SourceAlphaは、SourceGraphicと同じですが、アルファ・チャンネルを含む点が異なります。アルファ・チャンネルには、対象のエレメントに指定されたアンチエイリアスが含まれます。

さまざまなフィルタの組み合わせによって、さまざまな効果を生み出すことができます。最終画像をレンダリングする前にエレメントのためのフィルタ効果がすべてコンパイル（レイヤー化）されるまで、画像処理モデルは実行されません。

次の画像は、ぼかし（ガウス）とスペキュラー・ライティングの組み合わせでできています。

以下は、この画像を作成するのに使った個々のフィルタを分けてみました。

<filter id="MyFilter">
	<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
	<feOffset in="blur" dx="4" dy="4" result="offsetBlurredAlpha"/>
	<feSpecularLighting in="blur" surfaceScale="5" specularConstant="1"
	  specularExponent="10" lightColor="white" result="specularOut">
		<fePointLightx="-5000" y="-10000" z="20000"/>
	</feSpecularLighting>
	<feComposite in="specularOut" in2="SourceAlpha"
	 operator="in" result="specularOut"/>
	<feComposite in="SourceGraphic" in2="specularOut"
	 operator="arithmetic" k1="0" k2="1" k3="1"
	 k4="0" result="litPaint"/>
	<feMerge>
		<feMergeNode in="offsetBlurredAlpha"/>
		<feMergeNode in="litPaint"/>
	</feMerge>
</filter>