SVG filterとCSS filterの対応ブラウザについて

画像にぼかしをかけたくて、filterの対応ブラウザについて調べたのでメモ。

filterをかける方法は2種類あって、SVGを使う方法とCSSのみでやる方法があります。
従来はSVGを使用する方法しかなかったが、CSSでのfilterに対応するブラウザが増えてきているので、CSS Filter Effectsを使えるものは使い、フォールバックとしてSVG filtersを使用するという認識です。

結論から言うと、IE9以下とAndroid4.3以下を無視できるのであれば問題なく使用できそうです。

SVG filters

SVG filters | Can I use
IE9以下とAndroid4.3以下が未対応。
比較的モダンな環境であれば導入ができそう。

CSS Filter Effects

CSS Filter Effects | Can I use
IEが全滅で、またもAndroid4.3以下が未対応。

参考

filterの適用については下記などを参考に。

Frosting Glass with CSS Filters | CSS-Tricks
CSS と SVG で曇りガラスのような効果を作る | Unformed Building

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