[70-2] SVGフィルターを使ってみた前回 HTMLに直接 SVGを埋め込む方法をやりました。 SVGには「ぼかし」とか「色変換」などのたくさんの種類のフィルタエフェクトが用意されています。 せっかくSVGを使うなら「SVGフィルター」も使えると便利だろうな〜 と思い、私のようなノンプログラマーでも簡単に使えそうなフィルターを探してサンプルを作ってみました。 SVG画像そのものは Illustratorなどのベクター描画ソフトに書き出して、HTMLに貼り付けたあとで<filter>要素を使ってSVG画像にフィルターをかけます。 今回のサンプルはこちら。（クリックでサンプルページが別ウィンドウで開きます） 今回使用する要素 <filter>要素だけじゃなく、参照したい定義をまとめる要素 <defs>要素も使っています。 そのほか、ぼかしのためには <feGaussianBlur>、色変換なら <feColorMatrix>といっ
![[70-2] SVGフィルターを使ってみた](https://cdn-ak-scissors.b.st-hatena.com/image/square/30dae701b48258b5da348d061ac955b611183b1a/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-121.fc2.com%2Fh%2Fo%2Fn%2Fhonttoni%2F170131svgf-4.jpg)
