Feature detecting support for svg filters

Question

I need to feature detect whether a browser supports svg filters (feGaussianBlur, to be specific). How would I go about testing for this? Safari, which doesn't support the filter, silently ignores the filter.

Answer 1

You could probably also check the enums available on the interfaces, e.g:

var supportsfilter = typeof SVGFEColorMatrixElement !== undefined && 
                     SVGFEColorMatrixElement.SVG_FECOLORMATRIX_TYPE_SATURATE==2;

That way you won't have to construct new elements, as in https://stackoverflow.com/a/9767059/109374. I've not tested to see whether this works as expected in Safari.

Update: Patch submitted to modernizr: https://github.com/Modernizr/Modernizr/pull/531

Answer 2

I have created a fiddle http://jsfiddle.net/yxVSe/ which examines the existence of the properties of GaussianBlur. Say GaussianBlur has a method setStdDeviation, we check for the existence of that method, when fails we come to a conclusion that the current browser dosent support that filter.

When this fiddle is check in safari texts would be in red, while in firefox it will be green.

Answer 3

I added a small modification for legacy Androids bug

var supportsfilter = window['SVGFEColorMatrixElement'] !== undefined && SVGFEColorMatrixElement.SVG_FECOLORMATRIX_TYPE_SATURATE == 2