SVG effects for HTML

Method of using SVG transforms, filters, etc on HTML elements using either CSS or the foreignObject element

IE Edge Firefox Chrome Safari Opera iOS Safari Opera Mini Android Browser Blackberry Browser Opera Mobile Chrome for Android Firefox for Android IE Mobile UC Browser for Android Samsung Internet QQ Browser Baidu Browser
49
56 9.3 4.4
14
See notes:
  • 2
52 57 10 10.0-10.2 4.4.3-4.4.4 4
11
See notes:
  • 1
  • 2
15
See notes:
  • 2
53 58 10.1 44 10.3 all 56 10 37 57 52 11 11.4 5 1.2 7.12
54 59 TP 45
55 60 46
56 61

Notes

Partial support refers to lack of filter support or buggy result from effects. A CSS Filter Effects specification is in the works that would replace this method.

Links