SVGフィルタで拡張するCSSの表現

全2回

CSSのfilterプロパティは、blur()やgrayscale()など既定の関数で効果を適用できますが、実はSVGフィルタを呼び出すことで、より複雑な表現が可能です。このシリーズでは、SVGフィルタの活用方法を紹介します。

第2回 SVGフィルタの仕組みと色の制御

SVGフィルタで色を扱う方法として、feFloodとfeColorMatrixの2つを解説します。色の指定方法を理解しておくことで、たとえばコードが公開されているSVGフィルタをベースに、自分好みの表現へ調整できるようになります。

第1回 SVGフィルタの基本と表現例

SVGフィルタはCSSのfilterプロパティより、複雑な表現が可能です。古くからある技術ですが、活用されることが少ないSVGフィルタの使い方を紹介します。