Inline SVG in HTML5

Method of using SVG tags directly in HTML documents. Requires HTML5 parser.

Spec	https://html.spec.whatwg.org/multipage/embedded-content.html#svg-0
Status	WHATWG Living Standard

IE	Edge	Firefox	Chrome	Safari	Opera
		57	62
		56	61	TP	48
	16 ⁽¹⁾	55	60	11	47
11 ⁽¹⁾	15 ⁽¹⁾	54	59	10.1	46
10 ⁽¹⁾	14 ⁽¹⁾	53	58	10	45
9 ⁽¹⁾	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

Notes

Does not support CSS transforms on SVG elements (transform attribute can be used instead)

Inline SVG in HTML works in Android 4+, but is reported to have bugs when manipulating the elements using JS, e.g. setting className does not work. Using getAttribute('class') and setAttribute('class', 'foobar') works.

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