SVG effects for HTML

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

Spec	http://www.w3.org/TR/SVG11/extend.html#ForeignObjectElement
Status	W3C Recommendation

IE	Edge	Firefox	Chrome	Safari	Opera
		57	62
		56	61	TP	48
	16 ⁽²⁾	55	60	11	47
11 ^(1,2)	15 ⁽²⁾	54	59	10.1	46
10 ^(1,2)	14 ⁽²⁾	53	58	10	45
9 ^(1,2)	13 ⁽²⁾	52	57	9.1	44
8	12 ⁽²⁾	51	56	9	43
Show all
7		50	55	8	42
6		49	54	7.1	41
5.5		48	53	7	40
		47	52	6.1	39
		46	51	6	38
		45	50	5.1	37
		44	49	5	36
		43	48	4	35
		42	47	3.2	34
		41	46	3.1	33
		40	45		32
		39	44		31
		38	43		30
		37	42		29
		36	41		28
		35	40		27
		34	39		26
		33	38		25
		32	37		24
		31	36		23
		30	35		22
		29	34		21
		28	33		20
		27	32		19
		26	31		18
		25	30		17
		24	29		16
		23	28		15
		22	27		12.1
		21	26		12
		20	25		11.6
		19	24		11.5
		18	23		11.1
		17	22		11
		16	21		10.6
		15	20		10.5
		14	19		10.0-10.1
		13	18		9.5-9.6
		12	17		9
		11	16
		10	15
		9	14
		8	13
		7	12
		6	11
		5	10
		4	9
		3.6	8
		3.5	7
		3	6
		2	5
			4

iOS Safari	Opera Mini	Android Browser	Blackberry Browser	Opera Mobile	Android Chrome	Android Firefox	IE Mobile	Android UC Browser	Samsung Internet	QQ Browser	Baidu Browser
11
10.3	all	56	10	37	59	54	11	11.4	5	1.2	7.12
10.0-10.2		4.4.3-4.4.4	7	12.1			10		4
9.3		4.4		12
9.0-9.2		4.2-4.3		11.5
Show all
8.1-8.4		4.1		11.1
8		4		11
7.0-7.1		3		10
6.0-6.1		2.3
5.0-5.1		2.2
4.2-4.3		2.1
4.0-4.1
3.2

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.

IE11 and below do not support <foreignObject>.
IE and Edge do not support applying SVG filter effects to HTML elements using CSS. Bug Report

Bugs

Browsers can have differing behavior when HTML CSS properties are set on SVG elements, for example Edge & IE browsers do not respond to the height property while Chrome does.

Resources

Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
http://caniuse.com/#feat=svg-html