SVG in CSS backgrounds

Method of using SVG images as CSS backgrounds

Spec	https://www.w3.org/TR/css3-background/#background-image
Status	W3C Candidate Recommendation

IE	Edge	Firefox	Chrome	Safari	Opera
			103
		100	102
		99	101	TP
11	99	98	100	15.4	83
10	98	97	99	15.2-15.3	82
9	97	96	98	15.1	81
8	96	95	97	15	80
Show all
7	95	94	96	14.1	79
6	94	93	95	14	78
5.5	93	92	94	13.1	77
	92	91	93	13	76
	91	90	92	12.1	75
	90	89	91	12	74
	89	88	90	11.1	73
	88	87	89	11	72
	87	86	88	10.1	71
	86	85	87	10	70
	85	84	86	9.1	69
	84	83	85	9	68
	83	82	84	8	67
	81	81	83	7.1	66
	80	80	81	7	65
	79	79	80	6.1	64
	18	78	79	6	63
	17	77	78	5.1	62
	16	76	77	5	60
	15 ⁽³⁾	75	76	4 ⁽¹⁾	58
	14 ⁽³⁾	74	75	3.2 ⁽¹⁾	57
	13 ⁽³⁾	73	74	3.1	56
	12 ⁽³⁾	72	73		55
		71	72		54
		70	71		53
		69	70		52
		68	69		51
		67	68		50
		66	67		49
		65	66		48
		64	65		47
		63	64		46
		62	63		45
		61	62		44
		60	61		43
		59	60		42
		58	59		41
		57	58		40
		56	57		39
		55	56		38
		54	55		37
		53	54		36
		52	53		35
		51	52		34
		50	51		33
		49	50		32
		48	49		31
		47	48		30
		46	47		29
		45	46		28
		44	45		27
		43	44		26
		42	43		25
		41	42		24
		40	41		23
		39	40		22
		38	39		21
		37	38		20
		36	37		19
		35	36		18
		34	35		17
		33	34		16
		32	33		15
		31	32		12.1
		30	31		12
		29	30		11.6
		28	29		11.5
		27	28		11.1
		26	27		11
		25	26		10.6
		24	25		10.5
		23 ⁽²⁾	24		10.0-10.1
		22 ⁽²⁾	23		9.5-9.6
		21 ⁽²⁾	22		9
		20 ⁽²⁾	21
		19 ⁽²⁾	20
		18 ⁽²⁾	19
		17 ⁽²⁾	18
		16 ⁽²⁾	17
		15 ⁽²⁾	16
		14 ⁽²⁾	15
		13 ⁽²⁾	14
		12 ⁽²⁾	13
		11 ⁽²⁾	12
		10 ⁽²⁾	11
		9 ⁽²⁾	10
		8 ⁽²⁾	9
		7 ⁽²⁾	8
		6 ⁽²⁾	7
		5 ⁽²⁾	6
		4 ⁽²⁾	5
		3.6	4
		3.5
		3
		2

Notes

Partial support in iOS Safari and older Safari versions refers to failing to support tiling or the background-position property.
Partial support in older Firefox and Opera Mini/Mobile refers to SVG images being blurry when scaled.
Partial support in Edge 15 and older refers to a lack of support for SVG data URIs. see bug

Opera messes background repeat when changing zoom level: known issue in Opera's private bug tracker (CORE-33071)
IE 10 Mobile does not always provide crisp SVG backgrounds, particularly when zooming in.
Android 2.x will not display the fallback background-image in addition to not displaying the SVG if it is implemented using multiple background-image properties on the same element. (e.g. PNG background-image fallback + SVG background-image)

Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
https://caniuse.com/svg-css